@use 'sass:map';

/* IMPORTANT : Don't forget to add !default flag to all SCSS variables in this file */

/**
  ######## Summary ########
  0. Specials
  1. Breakpoints
  2. Colors
  3. Grix
  4. Layouts
  5. Core Typography
  6. Navbar
  7. Sidenav
  8. Dropdown
  9. Floating Action Button (FAB)
  10. Tooltip
  11. Button
  12. Footer
  13. Loading
  14. Modal
  15. Tab
  16. Table
  17. Toast
  18. Trends
  19. Forms
  20. Utilities
  21. Waves
  22. Skeleton
  #########################
**/

/**
  0. Specials
**/
$generated-css-vars: map.remove(
  (
    x: x,
  ),
  x
) !default;
$prefix: 'ax' !default;

$overlay-z-index: 700 !default;
$generated-css-vars: map.set($generated-css-vars, 'overlay-z-index', $overlay-z-index);

/** 
  1. Breakpoints
 **/
$breakpoints: (
  'xs': 'screen and (max-width: 599.98px)',
  'sm': 'screen and (min-width: 600px) and (max-width: 959.98px)',
  'md': 'screen and (min-width: 960px) and (max-width: 1279.98px)',
  'lg': 'screen and (min-width: 1280px) and (max-width: 1919.98px)',
  'xl': 'screen and (min-width: 1920px)',
) !default;

$extra-breakpoints: (
  'sm-down': 'screen and (max-width: 959.98px)',
  'md-down': 'screen and (max-width: 1279.98px)',
  'lg-down': 'screen and (max-width: 1919.98px)',
  'sm-up': 'screen and (min-width: 600px)',
  'md-up': 'screen and (min-width: 960px)',
  'lg-up': 'screen and (min-width: 1280px)',
) !default;

// Specific for grix generation
$grix-breakpoints: (
  'xs': '',
  'sm': 'screen and (min-width: 600px)',
  'md': 'screen and (min-width: 960px)',
  'lg': 'screen and (min-width: 1280px)',
  'xl': 'screen and (min-width: 1920px)',
) !default;

/** 
  2. Colors
**/
$colors: (
  'cyan': #28d1e7,
  'yellow': #f0de3b,
  'orange': #ff9028,
  'magenta': #e920e9,
  'blue': #2196f3,
  'red': #e92626,
  'green': #27e927,
  'viride': #61b399,
  'mole': #b3956d,
  'amaranth': #e62454,
  'airforce': #658fa3,
  'meadow': #22e684,
  'grey': #a5a5a5,
) !default;

$axentix-palette: (
  'primary': #2196f3,
  'secondary': #22ac72,
  'success': #12ad12,
  'warning': #fccc2e,
  'error': #df2c29,
  'white': #fff,
  'black': #000,
  'transparent': transparent,
) !default;

@each $name, $value in $axentix-palette {
  $generated-css-vars: map.set($generated-css-vars, $name, $value);
  $generated-css-vars: map.set($generated-css-vars, 'text-#{$name}', textColor($value));
}

/**
  3. Grix
**/
$grix-max-cols: 12 !default;
$grix-gutter: (
  '0': 0,
  '1': 0.5rem,
  '2': 0.75rem,
  '3': 1rem,
  '4': 1.25rem,
  '5': 1.5rem,
  '6': 1.75rem,
  '7': 2rem,
) !default;

/**
  4. Layouts
**/
$layouts-areas: 'header' 'main' 'footer' !default;
$layouts-columns: minmax(0, 1fr) !default;
$layouts-rows: auto 1fr auto !default;
$generated-css-vars: map.set($generated-css-vars, 'layout-areas', $layouts-areas);
$generated-css-vars: map.set($generated-css-vars, 'layout-columns', $layouts-columns);
$generated-css-vars: map.set($generated-css-vars, 'layout-rows', $layouts-rows);

$layouts-sidenav-fixed-z-index: 710 !default;
$layouts-sidenav-fixed-z-index-mdup: 690 !default;

/**
  5. Core Typography
**/
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;

$generated-css-vars: map.set($generated-css-vars, 'font-family', $font-family);

$base-size: 1rem !default;
$h1: $base-size * 2.75 !default;
$h2: $base-size * 2.25 !default;
$h3: $base-size * 2 !default;
$h4: $base-size * 1.75 !default;
$h5: $base-size * 1.5 !default;
$h6: $base-size * 1.25 !default;

/**
  6. Navbar
**/
$navbar-height: 3.5rem !default;
$navbar-z-index: 100 !default;

$generated-css-vars: map.set($generated-css-vars, 'navbar-height', $navbar-height);
$generated-css-vars: map.set($generated-css-vars, 'navbar-z-index', $navbar-z-index);

/**
  7. Sidenav
**/
$sidenav-width: 12rem !default;
$sidenav-z-index: 710 !default;
$sidenav-logo-height: 3rem !default;
$sidenav-header-height: 5rem !default;

$generated-css-vars: map.set($generated-css-vars, 'sidenav-width', $sidenav-width);
$generated-css-vars: map.set($generated-css-vars, 'sidenav-z-index', $sidenav-z-index);
$generated-css-vars: map.set($generated-css-vars, 'sidenav-logo-height', $sidenav-logo-height);
$generated-css-vars: map.set($generated-css-vars, 'sidenav-header-height', $sidenav-header-height);

/**
  8. Dropdown
**/
$dropdown-z-index: 10 !default;
$dropdown-z-index-navbar: 20 !default;
$dropdown-z-index-sidenav: 30 !default;

$generated-css-vars: map.set($generated-css-vars, 'dropdown-z-index', $dropdown-z-index);
$generated-css-vars: map.set($generated-css-vars, 'dropdown-z-index-navbar', $dropdown-z-index-navbar);
$generated-css-vars: map.set($generated-css-vars, 'dropdown-z-index-sidenav', $dropdown-z-index-sidenav);

/**
  9. Floating Action Button (FAB)
**/
$fab-z-index: 200 !default;
$generated-css-vars: map.set($generated-css-vars, 'fab-z-index', $fab-z-index);

/**
  10. Tooltip
**/
$tooltip-z-index: 999 !default;
$generated-css-vars: map.set($generated-css-vars, 'tooltip-z-index', $tooltip-z-index);

/**
  11. Button
**/
$btn-disabled-bg-color: #c8c8c8 !default;
$btn-disabled-color: #787878 !default;
$generated-css-vars: map.set($generated-css-vars, 'btn-disabled-bg-color', $btn-disabled-bg-color);
$generated-css-vars: map.set($generated-css-vars, 'btn-disabled-color', $btn-disabled-color);

/**
  12. Footer
**/
$footer-min-height: 3rem !default;
$generated-css-vars: map.set($generated-css-vars, 'footer-min-height', $footer-min-height);

/**
  13. Loading
**/
$loading-pbar-bg-color: getColor('airforce', 'light', 4) !default;
$generated-css-vars: map.set($generated-css-vars, 'loading-pbar-bg-color', $loading-pbar-bg-color);

/**
  14. Modal
**/
$modal-top: 10% !default;
$modal-max-height: 80% !default;
$generated-css-vars: map.set($generated-css-vars, 'modal-top', $modal-top);
$generated-css-vars: map.set($generated-css-vars, 'modal-max-height', $modal-max-height);

/**
  15. Tab
**/
$tab-bar-border: 0.1rem solid getColor('primary') !default;
$generated-css-vars: map.set($generated-css-vars, 'tab-bar-border', $tab-bar-border);

/**
  16. Table
**/
$table-border: 1px solid #d2d2d2 !default;
$generated-css-vars: map.set($generated-css-vars, 'table-border', $table-border);

/**
  17. Toast
**/
$toaster-z-index: 1000 !default;
$generated-css-vars: map.set($generated-css-vars, 'toaster-z-index', $toaster-z-index);

/**
  18. Trends
  18.1 Glassmorphism
  18.2 Claymorphism
**/

/**
  18.1 Glassmorphism
**/
$glass-background: rgba(255, 255, 255, 0.25) !default;
$glass-blur: 5px !default;
$generated-css-vars: map.set($generated-css-vars, 'glass-background', $glass-background);
$generated-css-vars: map.set($generated-css-vars, 'glass-blur', $glass-blur);

/**
  18.2 Claymorphism
**/
$clay-background: rgba(255, 255, 255, 1) !default;
$clay-blur: 5px !default;
$clay-shadow-color: 145, 192, 255 !default;
$clay-shadow: 35px 35px 68px 0px rgba(var(getCssVar(clay-shadow-color)), 0.5),
  inset -8px -8px 16px 0px rgba(var(getCssVar(clay-shadow-color)), 0.6),
  inset 0px 11px 28px 0px rgb(255, 255, 255) !default;
$generated-css-vars: map.set($generated-css-vars, 'clay-background', $clay-background);
$generated-css-vars: map.set($generated-css-vars, 'clay-blur', $clay-blur);
$generated-css-vars: map.set($generated-css-vars, 'clay-shadow-color', $clay-shadow-color);
$generated-css-vars: map.set($generated-css-vars, 'clay-shadow', $clay-shadow);

/**
  19. Forms
  19.1 Default
  19.2 Material Forms
  19.3 Switch
**/

/**
  19.1 Default
**/
$form-helper-size: 0.75rem !default;
$form-helper-color: #747474 !default;
$form-valid-color: getColor('success') !default;
$form-invalid-color: getColor('error') !default;
$form-control-border: 1px solid #bbb8b8 !default;
$form-disabled-bg-color: #c8c8c8 !default;
$form-disabled-color: #787878 !default;
$form-check-disabled-color: #afafaf !default;

$generated-css-vars: map.set($generated-css-vars, 'form-helper-size', $form-helper-size);
$generated-css-vars: map.set($generated-css-vars, 'form-helper-color', $form-helper-color);
$generated-css-vars: map.set($generated-css-vars, 'form-valid-color', $form-valid-color);
$generated-css-vars: map.set($generated-css-vars, 'form-invalid-color', $form-invalid-color);
$generated-css-vars: map.set($generated-css-vars, 'form-control-border', $form-control-border);
$generated-css-vars: map.set($generated-css-vars, 'form-disabled-bg-color', $form-disabled-bg-color);
$generated-css-vars: map.set($generated-css-vars, 'form-disabled-color', $form-disabled-color);
$generated-css-vars: map.set($generated-css-vars, 'form-check-disabled-color', $form-check-disabled-color);

/**
  19.2 Material Forms
**/
$form-material-color: getColor('viride', 'dark', 1) !default;
$form-material-transition-duration: 0.3s !default;
$form-material-label-color: getColor('grey', 'dark', 2) !default;
$form-material-border: 2px solid #c7c7c7 !default;
$form-material-disabled-border: 2px dashed #c7c7c7 !default;
$form-material-active-border-width: 2px !default;
$form-material-active-border-style: solid !default;
$form-material-after-z-index: 15 !default;

$generated-css-vars: map.set($generated-css-vars, 'form-material-color', $form-material-color);
$generated-css-vars: map.set(
  $generated-css-vars,
  'form-material-transition-duration',
  $form-material-transition-duration
);
$generated-css-vars: map.set($generated-css-vars, 'form-material-label-color', $form-material-label-color);
$generated-css-vars: map.set($generated-css-vars, 'form-material-border', $form-material-border);
$generated-css-vars: map.set(
  $generated-css-vars,
  'form-material-disabled-border',
  $form-material-disabled-border
);
$generated-css-vars: map.set(
  $generated-css-vars,
  'form-material-active-border-width',
  $form-material-active-border-width
);
$generated-css-vars: map.set(
  $generated-css-vars,
  'form-material-active-border-style',
  $form-material-active-border-style
);
$generated-css-vars: map.set(
  $generated-css-vars,
  'form-material-after-z-index',
  $form-material-after-z-index
);

/**
  19.3 Switch
**/
$form-switch-color: #e2e2e2 !default;
$form-switch-active-color: getColor('viride', 'dark', 1) !default;
$form-switch-btn-color: #fff !default;
$form-switch-transition-duration: 0.3s !default;

$generated-css-vars: map.set($generated-css-vars, 'form-switch-color', $form-switch-color);
$generated-css-vars: map.set($generated-css-vars, 'form-switch-active-color', $form-switch-active-color);
$generated-css-vars: map.set($generated-css-vars, 'form-switch-btn-color', $form-switch-btn-color);
$generated-css-vars: map.set(
  $generated-css-vars,
  'form-switch-transition-duration',
  $form-switch-transition-duration
);

/**
  20. Utilities
  20.1 Cursors
  20.2 Overflow
  20.3 Shadows
  20.4 Hoverable
  20.5 Rounded
  20.6 Margins & paddings
  20.7 Line height
  20.8 Display
  20.9 Borders
  20.10 Typography
  20.11 General hover effect
  20.12 Word break
**/

/**
  20.1 Cursors
**/
$cursors: 'default', 'pointer', 'not-allowed', 'grab', 'wait', 'zoom-in', 'zoom-out', 'none' !default;

/**
  20.2 Overflow
**/
$overflows: 'visible', 'auto', 'hidden', 'scroll', 'initial', 'inherit' !default;

/**
  20.3 Shadows
**/
$light-shadows: (
  '1': '0 6px 10px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  '2': '0 8px 12px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  '3': '0 10px 15px -1px rgba(0, 0, 0, 0.1), 0 6px 8px 0px rgba(0, 0, 0, 0.05)',
  '4': '0 15px 20px -1px rgba(0, 0, 0, 0.11), 0 8px 10px 0px rgba(0, 0, 0, 0.06)',
  '5': '0 20px 30px 0px rgba(0, 0, 0, 0.12), 0 10px 10px -2px rgba(0, 0, 0, 0.06)',
) !default;

$shadows: (
  '1': '0 4px 8px 0 rgba(0, 0, 0, 0.10),  0 2px 5px 2px rgba(0,0,0,0.06)',
  '2': '0 5px 8px 0 rgba(0, 0, 0, 0.10),  0 3px 8px 3px rgba(0,0,0,0.1)',
  '3': '0 6px 8px 0 rgba(0, 0, 0, 0.1), 0 5px 12px 4px rgba(0,0,0,0.15)',
  '4': '0 7px 8px 0 rgba(0, 0, 0, 0.1), 0 7px 18px 6px rgba(0,0,0,0.15)',
  '5': '0 8px 9px 0 rgba(0, 0, 0, 0.12),  0 10px 25px 8px rgba(0,0,0,0.15)',
) !default;

$drop-shadows: (
  '1': drop-shadow(0 0.15rem 0.1rem #808080),
  '2': drop-shadow(0 0.15rem 0.125rem #5f5f5f),
  '3': drop-shadow(0 0.15rem 0.15rem #494949),
  '4': drop-shadow(0 0.15rem 0.15rem #292929),
  '5': drop-shadow(0 0.15rem 0.2rem #000000),
) !default;

$text-shadows: (
  '1': 0 2px 5px rgba(0, 0, 0, 0.4),
  '2': 2px 4px 3px rgba(0, 0, 0, 0.3),
  '3': 0px 4px 3px rgba(0, 0, 0, 0.5),
  '4': 6px 6px 0px rgba(0, 0, 0, 0.2),
) !default;

/**
  20.4 Hoverable
**/
$light-hoverable-delay: 0.3s !default;
$hoverable-delay: 0.2s !default;

$light-hoverable: (
  '1': '0 11px 10px -5px rgba(0, 0, 0, 0.1), 0 9px 6px -2px rgba(0, 0, 0, 0.06)',
  '2': '0 13px 12px -2px rgba(0, 0, 0, 0.11), 0 9px 6px -7px rgba(0, 0, 0, 0.06)',
  '3': '0 15px 15px -1px rgba(0, 0, 0, 0.11), 0 11px 8px 0px rgba(0, 0, 0, 0.06)',
  '4': '0 20px 20px -1px rgba(0, 0, 0, 0.12), 0 13px 10px 0px rgba(0, 0, 0, 0.07)',
  '5': '0 25px 30px -1px rgba(0, 0, 0, 0.13), 0 15px 10px -2px rgba(0, 0, 0, 0.07)',
) !default;

$hoverable: (
  '1': '0px 9px 8px 0px rgba(0, 0, 0, 0.10),  0px 5px 8px 3px rgba(0,0,0,0.12)',
  '2': '0 10px 8px 0 rgba(0, 0, 0, 0.10),  0 6px 8px 3px rgba(0,0,0,0.16)',
  '3': '0 11px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 12px 4px rgba(0,0,0,0.20)',
  '4': '0 12px 8px 0 rgba(0, 0, 0, 0.1), 0 16px 18px 6px rgba(0,0,0,0.2)',
  '5': '0 13px 9px 0 rgba(0, 0, 0, 0.12),  0 18px 25px 8px rgba(0,0,0,0.2)',
) !default;

/**
  20.5 Rounded
**/
$rounded: (
  '0': '0',
  '1': '5px',
  '2': '10px',
  '3': '20px',
  '4': '30px',
  'full': '100%',
) !default;

/**
  20.6 Margins & paddings
**/
$mp-base-space: 1rem !default;
$mp-spaces: (
  '0': 0,
  '1': $mp-base-space * 0.25,
  '2': $mp-base-space * 0.5,
  '3': $mp-base-space * 1,
  '4': $mp-base-space * 1.5,
  '5': $mp-base-space * 2.5,
  'auto': auto,
) !default;

/**
  20.7 Line height
**/
$lh-relative: (
  '1': 1,
  '2': 1.25,
  '3': 1.375,
  '4': 1.5,
  '5': 1.625,
  '6': 2,
) !default;

$lh-rem: (
  '1': 1rem,
  '2': 1.25rem,
  '3': 1.5rem,
  '4': 1.75rem,
  '5': 2rem,
) !default;

/**
  20.8 Display
**/
$displays: 'block', 'flex', 'grid', 'table', 'inline', 'inline-block', 'inline-flex', 'inline-table' !default;

/**
  20.9 Borders
**/
$bd-base-width: 1px !default;
$bd-width: (
  '0': 0,
  '1': $bd-base-width * 1,
  '2': $bd-base-width * 1.5,
  '3': $bd-base-width * 2,
  '4': $bd-base-width * 4,
  '5': $bd-base-width * 6,
) !default;

$bd-style: 'dashed', 'dotted', 'double', 'groove', 'hidden', 'none', 'inset', 'outset', 'ridge', 'solid',
  'revert' !default;

/**
  20.10 Typography
**/
$font-base-size: 1rem !default;
$font-sizes: (
  '1': $font-base-size * 0.75,
  '2': $font-base-size * 1,
  '3': $font-base-size * 1.25,
  '4': $font-base-size * 1.5,
  '5': $font-base-size * 1.75,
  '6': $font-base-size * 2,
  '7': $font-base-size * 2.5,
  '8': $font-base-size * 3,
  '9': $font-base-size * 3.5,
  '10': $font-base-size * 4.25,
  '11': $font-base-size * 5,
  '12': $font-base-size * 6,
) !default;

/**
  20.11 General hover effect
**/
$hover-background: rgba(0, 0, 0, 0.07) !default;
$hover-collapsible-background: rgba(0, 0, 0, 0.04) !default;
$generated-css-vars: map.set($generated-css-vars, 'hover-background', $hover-background);
$generated-css-vars: map.set(
  $generated-css-vars,
  'hover-collapsible-background',
  $hover-collapsible-background
);

$hover-background-dark: rgba(255, 255, 255, 0.1) !default;
$hover-collapsible-background-dark: rgba(255, 255, 255, 0.06) !default;
$generated-css-vars: map.set($generated-css-vars, 'hover-background-dark', $hover-background-dark);
$generated-css-vars: map.set(
  $generated-css-vars,
  'hover-collapsible-background-dark',
  $hover-collapsible-background-dark
);

$hover-text-color: #000 !default;
$hover-text-color-dark: #fff !default;
$generated-css-vars: map.set($generated-css-vars, 'hover-text-color', $hover-text-color);
$generated-css-vars: map.set($generated-css-vars, 'hover-text-color-dark', $hover-text-color-dark);

/**
  20.12 Word break
**/
$word-break: 'break-all', 'keep-all', 'normal', 'break-word', 'unset' !default;

/**
  20.13 Letter spacing
**/
$base-letter-spacing: 3px !default;
$letter-spacings: (
  '1': $base-letter-spacing * 0.75,
  '2': $base-letter-spacing * 1,
  '3': $base-letter-spacing * 1.25,
  '4': $base-letter-spacing * 1.5,
  '5': $base-letter-spacing * 1.75,
) !default;

/**
  21 Waves
**/
$waves-color: rgba(#fff, 0.1) !default;
$generated-css-vars: map.set($generated-css-vars, 'waves-color', $waves-color);

/**
  22 Skeleton
**/
$skeleton-background-from: #e0e4e7 !default;
$skeleton-background-to: #f0f3f5 !default;
$generated-css-vars: map.set($generated-css-vars, 'skeleton-background-from', $skeleton-background-from);
$generated-css-vars: map.set($generated-css-vars, 'skeleton-background-to', $skeleton-background-to);