/* Bigin UI Variables */
@use 'sass:math';
@use 'sass:map';

@use '../mixins/function.scss' as *;

// Special comment for theme configurator
// type|skipAutoTranslation|Category|Order
// skipAutoTranslation 1

// types
$types: blue, teal, green, yellow, orange, red;

// Color
$colors: () !default;
$colors: map.deep-merge(
  (
    'neutral': (
      'base': #adadad,
      '1': #f8f8f8,
      '2': #f2f2f2,
      '3': #e4e4e4,
      '4': #cecece,
      '5': #adadad,
      '6': #808080,
      '7': #646464,
      '8': #484848,
      '9': #333333,
    ),
    'primary': (
      'base': #0076ff,
      '1': #cce4ff,
      '2': #a3ceff,
      '3': #0076ff,
      '4': #064c93,
      '5': #0b467a,
    ),
    'blue': (
      'base': #2957ff,
      '1': #f5f7ff,
      '2': #ccd7ff,
      '3': #2957ff,
      '4': #0834ba,
      '5': #0e37a0,
    ),
    'teal': (
      'base': #3ac5de,
      '1': #e5fbff,
      '2': #bff3fc,
      '3': #3ac5de,
      '4': #218491,
      '5': #23737a,
    ),
    'green': (
      'base': #2ce23c,
      '1': #dbffde,
      '2': #b4fdba,
      '3': #2ce23c,
      '4': #1b8d21,
      '5': #1e7620,
    ),
    'yellow': (
      'base': #ffc60d,
      '1': #fff6d9,
      '2': #ffecb0,
      '3': #ffc60d,
      '4': #9f7607,
      '5': #86610c,
    ),
    'orange': (
      'base': #ff8419,
      '1': #fff1e5,
      '2': #ffdbbc,
      '3': #ff8419,
      '4': #ab4e07,
      '5': #91410d,
    ),
    'red': (
      'base': #ff1919,
      '1': #ffe5e5,
      '2': #ffbcbc,
      '3': #ff1919,
      '4': #ab070d,
      '5': #910d15,
    ),
  ),
  $colors
);

$color-neutral-1: map.get($colors, 'neutral', '1') !default;
$color-neutral-2: map.get($colors, 'neutral', '2') !default;
$color-neutral-3: map.get($colors, 'neutral', '3') !default;
$color-neutral-4: map.get($colors, 'neutral', '4') !default;
$color-neutral-5: map.get($colors, 'neutral', '5') !default;
$color-neutral-6: map.get($colors, 'neutral', '6') !default;
$color-neutral-7: map.get($colors, 'neutral', '7') !default;
$color-neutral-8: map.get($colors, 'neutral', '8') !default;
$color-neutral-9: map.get($colors, 'neutral', '9') !default;

$color-primary: map.get($colors, 'primary', 'base') !default;
$color-primary-1: map.get($colors, 'primary', '1') !default;
$color-primary-2: map.get($colors, 'primary', '2') !default;
$color-primary-3: map.get($colors, 'primary', '3') !default;
$color-primary-4: map.get($colors, 'primary', '4') !default;
$color-primary-5: map.get($colors, 'primary', '5') !default;

$color-blue: map.get($colors, 'blue', 'base') !default;
$color-blue-1: map.get($colors, 'blue', '1') !default;
$color-blue-2: map.get($colors, 'blue', '2') !default;
$color-blue-3: map.get($colors, 'blue', '3') !default;
$color-blue-4: map.get($colors, 'blue', '4') !default;
$color-blue-5: map.get($colors, 'blue', '5') !default;

$color-teal: map.get($colors, 'teal', 'base') !default;
$color-teal-1: map.get($colors, 'teal', '1') !default;
$color-teal-2: map.get($colors, 'teal', '2') !default;
$color-teal-3: map.get($colors, 'teal', '3') !default;
$color-teal-4: map.get($colors, 'teal', '4') !default;
$color-teal-5: map.get($colors, 'teal', '5') !default;

$color-green: map.get($colors, 'green', 'base') !default;
$color-green-1: map.get($colors, 'green', '1') !default;
$color-green-2: map.get($colors, 'green', '2') !default;
$color-green-3: map.get($colors, 'green', '3') !default;
$color-green-4: map.get($colors, 'green', '4') !default;
$color-green-5: map.get($colors, 'green', '5') !default;

$color-yellow: map.get($colors, 'yellow', 'base') !default;
$color-yellow-1: map.get($colors, 'yellow', '1') !default;
$color-yellow-2: map.get($colors, 'yellow', '2') !default;
$color-yellow-3: map.get($colors, 'yellow', '3') !default;
$color-yellow-4: map.get($colors, 'yellow', '4') !default;
$color-yellow-5: map.get($colors, 'yellow', '5') !default;

$color-orange: map.get($colors, 'orange', 'base') !default;
$color-orange-1: map.get($colors, 'orange', '1') !default;
$color-orange-2: map.get($colors, 'orange', '2') !default;
$color-orange-3: map.get($colors, 'orange', '3') !default;
$color-orange-4: map.get($colors, 'orange', '4') !default;
$color-orange-5: map.get($colors, 'orange', '5') !default;

$color-red: map.get($colors, 'red', 'base') !default;
$color-red-1: map.get($colors, 'red', '1') !default;
$color-red-2: map.get($colors, 'red', '2') !default;
$color-red-3: map.get($colors, 'red', '3') !default;
$color-red-4: map.get($colors, 'red', '4') !default;
$color-red-5: map.get($colors, 'red', '5') !default;

$color-white: #ffffff !default;
$color-black: #000000 !default;
$color-overlay: rgba(0, 0, 0, 0.8) !default;
$color-mask: rgba(255, 255, 255, 0.6) !default;

$color-shadow-lv1: rgba(0, 0, 0, 0.04) !default;
$color-shadow-lv2: rgba(0, 0, 0, 0.08) !default;
$color-shadow-lv3: rgba(0, 0, 0, 0.12) !default;
$color-shadow-table-scroll: rgba(0, 0, 0, 0.1) !default;

$colorStatusMap: () !default;
$colorStatusMap: map.merge(
  (
    'info': 'teal',
    'success': 'green',
    'warning': 'orange',
    'error': 'red',
    'danger': 'red',
    'primary': 'primary',
  ),
  $colorStatusMap
);

// Box-shadow
$box-shadow: () !default;
$box-shadow: map.merge(
  (
    'lv1': (
      0px 4px 12px $color-shadow-lv1,
    ),
    'lv2': (
      1px 4px 16px $color-shadow-lv2,
    ),
    'lv3': (
      2px 4px 16px $color-shadow-lv3,
    ),
    'table-scroll': $color-shadow-table-scroll,
  ),
  $box-shadow
);

// Border
$border-width: 1px !default;
$border-style: solid !default;
$border-color: $color-neutral-3 !default;

$border-radius: () !default;
$border-radius: map.merge(
  (
    'xxs': 2px,
    'xs': 4px,
    'sm': 8px,
    'md': 12px,
    'lg': 16px,
    'xl': 20px,
    'xxl': 24px,
    'max': 999px,
  ),
  $border-radius
);

// Typography
$font-family: 'Inter', sans-serif !default;

$font-size: () !default;
$font-size: map.merge(
  (
    'xs': 10px,
    'sm': 12px,
    'md': 14px,
    'lg': 16px,
    'xl': 18px,
    'h1': 48px,
    'h2': 36px,
    'h3': 24px,
    'h4': 20px,
    'h5': 16px,
    'h6': 12px,
  ),
  $font-size
);

// zIndex
$z-index: () !default;
$z-index: map.merge(
  (
    'normal': 1,
    'top': 1000,
    'popper': 2000,
  ),
  $z-index
);

// Transitions

$transition: () !default;
$transition: map.merge(
  (
    'all': all getCssVar('transition-duration')
      getCssVar('transition-function-ease-in-out-bezier'),
    'fade': opacity getCssVar('transition-duration')
      getCssVar('transition-function-fast-bezier'),
    'md-fade': (
      transform getCssVar('transition-duration')
        getCssVar('transition-function-fast-bezier'),
      opacity getCssVar('transition-duration')
        getCssVar('transition-function-fast-bezier'),
    ),
    'fade-linear': opacity getCssVar('transition-duration-fast') linear,
    'border': border-color getCssVar('transition-duration-fast')
      getCssVar('transition-function-ease-in-out-bezier'),
    'box-shadow': box-shadow getCssVar('transition-duration-fast')
      getCssVar('transition-function-ease-in-out-bezier'),
    'color': color getCssVar('transition-duration-fast')
      getCssVar('transition-function-ease-in-out-bezier'),
  ),
  $transition
);

$transition-duration: () !default;
$transition-duration: map.merge(
  (
    '': 0.3s,
    'fast': 0.2s,
  ),
  $transition-duration
);

$transition-function: () !default;
$transition-function: map.merge(
  (
    'ease-in-out-bezier': cubic-bezier(0.645, 0.045, 0.355, 1),
    'fast-bezier': cubic-bezier(0.23, 1, 0.32, 1),
  ),
  $transition-function
);

// Break-point

$sm: 576px !default;
$md: 768px !default;
$lg: 992px !default;
$xl: 1200px !default;
$xxl: 1400px !default;

$breakpoints: (
  'xs': '(max-width: #{$sm})',
  'sm': '(min-width: #{$sm})',
  'md': '(min-width: #{$md})',
  'lg': '(min-width: #{$lg})',
  'xl': '(min-width: #{$xl})',
  'xxl': '(min-width: #{$xxl})',
) !default;

$breakpoints-spec: (
  'xs-only': '(max-width: #{$sm - 1})',
  'sm-and-up': '(min-width: #{$sm})',
  'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})',
  'sm-and-down': '(max-width: #{$md - 1})',
  'md-and-up': '(min-width: #{$md})',
  'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})',
  'md-and-down': '(max-width: #{$lg - 1})',
  'lg-and-up': '(min-width: #{$lg})',
  'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})',
  'lg-and-down': '(max-width: #{$xl - 1})',
  'xl-and-up': '(min-width: #{$xl})',
  'xl-only': '(min-width: #{$xl}) and (max-width: #{$xxl - 1})',
  'xl-and-down': '(max-width: #{$xxl - 1})',
  'xxl-only': '(min-width: #{$xxl})',
) !default;