/* Element Chalk Variables */
@use 'sass:math';
@use 'sass:map';
@use 'sass:color';
@use '../mixins/function.scss' as *;
@use '../common/color.scss' as *;
@use '../common/font.scss' as *;

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

// types
$types: primary, success, warning, danger, error;
$types-xzx: primary, success, warning, danger;
$tokens: base, active, disabled, focus, light, light-active;

$color-gray: () !default;
$color-gray: map.merge(
  (
    '': #f3f3f3,
    '2': #eeeeee,
    '3': #e7e7e7,
    '4': #dcdcdc,
    '5': #c5c5c5,
    '6': #a6a6a6,
    '7': #8b8b8b,
    '8': #777777,
    '9': #5e5e5e,
    '10': #4b4b4b,
    '11': #383838,
    '12': #2c2c2c,
    '13': #242424,
    '14': #181818,
  ),
  $color-gray
);

// Color
$colors: () !default;
$colors: map.deep-merge(
  (
    'white': #ffffff,
    'black': #000000,
    'info': (
      'base': map.get($color-gray, '3'),
      'active': map.get($color-gray, '5'),
      'disabled': map.get($color-gray, '2'),
      'focus': map.get($color-gray, '4'),
      'light': map.get($color-gray, '2'),
      'light-active': map.get($color-gray, '4'),
    ),
    'primary': (
      'base': 'brand-7',
      'active': 'brand-8',
      'disabled': 'brand-3',
      'focus': 'brand-1',
      'light': 'brand-1',
      'light-active': 'brand-2',
    ),
    'success': (
      'base': 'success-5',
      'active': 'success-6',
      'disabled': 'success-3',
      'focus': 'success-2',
      'light': 'success-1',
      'light-active': 'success-2',
    ),
    'warning': (
      'base': 'warning-5',
      'active': 'warning-6',
      'disabled': 'warning-3',
      'focus': 'warning-2',
      'light': 'warning-1',
      'light-active': 'warning-2',
    ),
    'danger': (
      'base': 'error-6',
      'active': 'error-7',
      'disabled': 'error-3',
      'focus': 'error-2',
      'light': 'error-1',
      'light-active': 'error-2',
    ),
    'error': (
      'base': 'error-6',
    ),
  ),
  $colors
);

@mixin set-color-mix-level(
  $type,
  $number,
  $mode: 'light',
  $mix-color: $color-white
) {
  $colors: map.deep-merge(
    (
      $type: (
        '#{$mode}-#{$number}':
          color.mix(
            $mix-color,
            $brand-7,
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;
}

@each $type in $types {
  @for $i from 1 through 9 {
    @include set-color-mix-level($type, $i, 'light', $color-white);
  }
}

// --xzx-color-primary-dark-2
@each $type in $types {
  @include set-color-mix-level($type, 2, 'dark', $color-black);
}

$text-color: () !default;
$text-color: map.merge(
  (
    'primary': color.scale($color-black, $alpha: -10%),
    'secondary': color.scale($color-black, $alpha: -40%),
    'placeholder': color.scale($color-black, $alpha: -60%),
    'disabled': color.scale($color-black, $alpha: -74%),
  ),
  $text-color
);

$border-color: () !default;
$border-color: map.merge(
  (
    '': #dcdfe6,
    'light': #e4e7ed,
    'lighter': #ebeef5,
    'extra-light': #f2f6fc,
    'dark': #d4d7de,
    'darker': #cdd0d6,
  ),
  $border-color
);

$fill-color: () !default;
$fill-color: map.merge(
  (
    '': #f0f2f5,
    'light': #f5f7fa,
    'lighter': #fafafa,
    'extra-light': #fafcff,
    'dark': #ebedf0,
    'darker': #e6e8eb,
    'blank': #ffffff,
  ),
  $fill-color
);

// Background
$bg-color: () !default;
$bg-color: map.merge(
  (
    '': #ffffff,
    'page': #f2f3f5,
    'overlay': #ffffff,
  ),
  $bg-color
);

// Border
$border-width: 1px !default;
$border-style: solid !default;
$border-color-hover: getCssVar('text-color', 'disabled') !default;

$border-radius: () !default;
$border-radius: map.merge(
  (
    'sm': 3px,
    'base': 6px,
    'md': 9px,
    'lg': 12px,
    'round': 999px,
    'circle': 100%,
  ),
  $border-radius
);

$border-radius-types: sm, base, md, lg, xl, round, circle;

// Box-shadow
$box-shadow: () !default;
$box-shadow: map.merge(
  (
    'base': (
      0 1px 10px #0000000d,
      0 4px 5px #00000014,
      0 2px 4px -1px #0000001f,
    ),
    'md': (
      0 3px 14px 2px #0000000d,
      0 8px 10px 1px #0000000f,
      0 5px 5px -3px #0000001a,
    ),
    'top': (
      0 6px 30px 5px #0000000d,
      0 16px 24px 2px #0000000a,
      0 8px 10px -5px #00000014,
    ),
  ),
  $box-shadow
);

// Typography
$font-family: () !default;
$font-family: map.merge(
  (
    // default family
    '':
      "'Roboto', '思源黑体', 'PingFang SC', 'San Francisco Pro', BlinkMacSystemFont, 'Misans', sans-serif",
    'ios':
      "BlinkMacSystemFont, 'PingFang SC', 'San Francisco Pro', 'Misans', sans-serif",
    'android': "'Roboto', '思源黑体', 'Misans', sans-serif"
  ),
  $font-family
);

$font-size-xzx: xl, lg, md, base, sm, xs, mini, t, m;

$font-weights-xzx: r, m, sb;

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

// Disable default
$disabled: () !default;
$disabled: map.merge(
  (
    'bg-color': getCssVar('fill-color', 'light'),
    'text-color': getCssVar('text-color', 'placeholder'),
    'border-color': getCssVar('border-color', 'light'),
  ),
  $disabled
);

$common-component-size: () !default;
$common-component-size: map.merge(
  (
    'large': 40px,
    'default': 32px,
    'small': 24px,
  ),
  $common-component-size
);

// overlay
$overlay-color: () !default;
$overlay-color: map.merge(
  (
    '': rgba(0, 0, 0, 0.8),
    'light': rgba(0, 0, 0, 0.7),
    'lighter': rgba(0, 0, 0, 0.5),
  ),
  $overlay-color
);

// mask
$mask-color: () !default;
$mask-color: map.merge(
  (
    '': rgba(255, 255, 255, 0.9),
    'extra-light': rgba(255, 255, 255, 0.3),
  ),
  $mask-color
);

// transition
$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
);

// Popup
// css3 var in packages/theme-chalk/src/popup.scss
$popup: () !default;
$popup: map.merge(
  (
    'modal-bg-color': getCssVar('color-black'),
    'modal-opacity': 0.5,
  ),
  $popup
);