@use 'sass:map';
@use '../mixins/helper/functions.scss' as *;

// Color
$colors: () !default;
$colors: map.deep-merge(
  (
    'white': #fff,
    'black': #000,
    'primary': (
      'base': #409eff,
    ),
  ),
  $colors
);

$color-white: map.get($colors, 'white') !default;
$color-black: map.get($colors, 'black') !default;
$color-primary: map.get($colors, 'primary', 'base') !default;

// Typography
$font-family: () !default;
$font-family: map.merge(
  (
    '':
      "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
  ),
  $font-family
);

// Box-shadow
$box-shadow: () !default;
$box-shadow: map.merge(
  (
    '': (
      0 12px 32px 4px rgb(0 0 0 / 4%),
      0 8px 20px rgb(0 0 0 / 8%),
    ),
    'light': (
      0 0 12px rgb(0 0 0 / 12%),
    ),
    'lighter': (
      0 0 6px rgb(0 0 0 / 12%),
    ),
    'dark': (
      0 16px 48px 16px rgb(0 0 0 / 8%),
      0 12px 32px rgb(0 0 0 / 12%),
      0 8px 16px -8px rgb(0 0 0 / 16%),
    ),
  ),
  $box-shadow
);

$font-size: () !default;
$font-size: map.merge(
  (
    'extra-large': 20px,
    'large': 18px,
    'medium': 16px,
    'base': 14px,
    'small': 13px,
    'extra-small': 12px,
  ),
  $font-size
);

// zIndex
$z-index: () !default;
$z-index: map.merge(
  (
    'normal': 1,
    'dropdown': 10000,
  ),
  $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
);

$text-color: () !default;
$text-color: map.merge(
  (
    'primary': #303133,
    'regular': #606266,
    'secondary': #909399,
    'placeholder': #a8abb2,
    'disabled': #c0c4cc,
  ),
  $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': #fff,
  ),
  $fill-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(
  (
    'base': 4px,
    'small': 2px,
    'round': 20px,
    'circle': 100%,
  ),
  $border-radius
);

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