@use 'sass:math';

// Path and dirs
$font-dir: "../fonts";

//// Icons path
$font-icon-url-eot: url("#{$font-dir}/icons.eot");
$font-icon-url-embedded: url("#{$font-dir}/icons.eot");
$font-icon-url-woff: url("#{$font-dir}/icons.woff");
$font-icon-url-ttf: url("#{$font-dir}/icons.ttf");
$font-icon-url-svg: url("#{$font-dir}/icons.svg");

// Base Unit
$base-unit: rem;
$base-steps: 16;
$base-geometric-step: 3;
$colors: body, primary, alternative, link, mute, cancel, success, info, warning, danger, color-1, color-2, color-3;

// Sizes
$sizes: xs, s, m, l, xl, xxl; // can be set for ex. xs, s, m, l etc.. change name of variables for buttons input etc.
$size-xs: 0.6;
$size-s: 0.85;
$size-m: 1.15;
$size-l: 1.5;
$size-xl: 1.75;
$size-xxl: 2;
$input-sizes: s, m, l;

// Layout Unit
$layout-unit: px;
$layout-steps: 8;
$layout-factor: 0.3;
$layout-geometric-step: $base-geometric-step;

// Content
$content-max-width: 1128;
$content-min-margin: 20;
$content-max-height: 600;

$layout-width: $content-max-width;
$layout-height: $content-max-height;

// Description list
$dl-steps: $layout-steps;

// Responsive Web Design

// Break points
$desktop-min-width: 1280px;
$tablet-max-width: 1024px;
$tablet-portrait-max-width: 768px;
$mobile-max-width: 568px;
$mobile-portrait-max-width: 320px;

$breakpoints: (
  desktop-min-width: $desktop-min-width,
  tablet-max-width: $tablet-max-width,
  tablet-portrait-max-width: $tablet-portrait-max-width,
  mobile-max-width: $mobile-max-width,
  mobile-portrait-max-width: $mobile-portrait-max-width,
);

// Break point on mobile menu
$mobile-menu-max-width: $tablet-portrait-max-width;


// Side break points
$device-width-side-collapse: $tablet-portrait-max-width; // in that device width sidebar will be automatic collapsed, set 0 to off
$device-width-side-hide: $mobile-max-width; // in that device width sidebar (side-hide) will automatic hide, set 0 to off
$device-width-side-show-full: $device-width-side-hide;

$table-mobile-max-width: $tablet-portrait-max-width;

// Z-index
  //// Modals
  $modal-zindex: 10000;

  //// Side
  $side-zindex: 10000;
  //// Tooltips
  $tooltip-zindex: 10000;
  $tooltip-arrow-zindex: 1;
  //// Popups
  $popup-zindex: 10000;
  $popup-arrow-zindex: 1;
  //// Select
  $select-zindex: 10000;

  // Header
  $header-zindex: 10000;




// Forms
$form-states: has-success, has-info, has-error, has-warning;
$form-state-invalid: has-error;
$form-state-valid: has-success;

$form-state-change-label: false;
$form-state-change-text-color: true;
$form-state-change-border: true;
$form-state-change-background: true;
$form-state-change-hint: true;
$form-state-change-tooltip: true;
$form-tooltip-position: right;  // left / center / right
$form-tooltip-input-show-on: focus;  // focus / not_focus / hover


// Alert
$alert-states: success, info, error, warning;

// Grid
$grid-steps: 16;
$grid-step-fractions: true;  // set true if you will be using fractions of grid step otherwise false to reduce weight
$grid-gutter: true; // set true if you will be using grid gutter otherwise false to reduce weight
$grid-space: true; // set true if you will be using grid space otherwise false to reduce weight
$grid-offset: true; // set true if you will be using grid offset otherwise false to reduce weight
$grid-gutter-start: 2;
$grid-gutter-steps: $layout-steps/2;
$grid-gutter-unit: $base-unit;
$grid-gutter-step: 0.3;
$grid-space-start: 2;
$grid-space-steps: $layout-steps/2;
$grid-space-unit: $base-unit;
$grid-space-step: 0.3;

// Typography
$typography-unit: $base-unit;
$typography-font-size-1: 2.5 + $typography-unit;
$typography-line-height-1: 1.35 + em;

$typography-font-size-2: 2, $typography-unit;
$typography-line-height-2: 1.35 + em;

$typography-font-size-3: 1.7, $typography-unit;
$typography-line-height-3: 1.35 + em;

$typography-font-size-4: 1.3, $typography-unit;
$typography-line-height-4: 1.35 + em;

$typography-font-size-5: 1, $typography-unit;
$typography-line-height-5: 1.35 + em;

$typography-font-size-6: 0.8, $typography-unit;
$typography-line-height-6: 1.35 + em;

// Buttons
$button-set-gradient: true; // 'default' to use gradient button as default, true like option, false not use
$button-set-focus: true; // true if you will be use focus state on any buttons
$button-set-color-focus: false; // true to use focus state on color change
$button-set-inverse: false;  // true to set buttons inverse as default
$button-set-transparent: false; // true to set buttons background transparent as default

// Items
$items-gutter: 15px;

// Tabs
$tabs-pages: 10;

//// Includes - DO NOT CHANGE BELOW ////
$include-core-layout-header: null;
$include-core-layout-side: null;

$include-core-component-modal: null;
$include-core-component-tooltip: null;
$include-core-component-menu: null;
$include-core-component-table: null;