/** 图鸟变量 */
@use 'sass:map';
@use 'sass:math';

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

// 类型
$types: primary, success, warning, danger, error, info;

// 内置颜色的值
$inner-color-names: 'red', 'purplered', 'purple', 'bluepurple', 'aquablue',
  'blue', 'indigo', 'cyan', 'teal', 'green', 'yellowgreen', 'lime', 'yellow',
  'orangeyellow', 'orange', 'orangered', 'brown', 'grey', 'gray';

$inner-colors: (
  'red': (
    'base': #e83a30,
    'dark': #ba2e26,
    'disabled': #f39c97,
    'light': #fad8d6,
  ),
  'purplered': (
    'base': #e72f8c,
    'dark': #b9266f,
    'disabled': #f397c5,
    'light': #fad5e8,
  ),
  'purple': (
    'base': #892fe8,
    'dark': #6e26ba,
    'disabled': #c497f3,
    'light': #e7d5fa,
  ),
  'bluepurple': (
    'base': #5f4fd9,
    'dark': #4c3fae,
    'disabled': #afa7ec,
    'light': #dfdcf7,
  ),
  'aquablue': (
    'base': #3646ff,
    'dark': #2b38cc,
    'disabled': #9aa2ff,
    'light': #d7daff,
  ),
  'blue': (
    'base': #3d7eff,
    'dark': #3165cc,
    'disabled': #9ebeff,
    'light': #d8e5ff,
  ),
  'indigo': (
    'base': #31c9e8,
    'dark': #27a1ba,
    'disabled': #98e4f3,
    'light': #d6f4fa,
  ),
  'cyan': (
    'base': #2de8bd,
    'dark': #24ba97,
    'disabled': #96f3de,
    'light': #d5faf2,
  ),
  'teal': (
    'base': #24f083,
    'dark': #1dc069,
    'disabled': #91f7c1,
    'light': #d3fce6,
  ),
  'green': (
    'base': #31e749,
    'dark': #27b93a,
    'disabled': #98f3a4,
    'light': #d6fadb,
  ),
  'yellowgreen': (
    'base': #a4e82f,
    'dark': #82ba26,
    'disabled': #d1f397,
    'light': #edfad5,
  ),
  'lime': (
    'base': #d5eb00,
    'dark': #aabc00,
    'disabled': #e9f57f,
    'light': #f7fbcc,
  ),
  'yellow': (
    'base': #fff420,
    'dark': #ccc21a,
    'disabled': #fff88f,
    'light': #fffdd2,
  ),
  'orangeyellow': (
    'base': #ffca28,
    'dark': #cca220,
    'disabled': #ffe493,
    'light': #fff4d4,
  ),
  'orange': (
    'base': #ffa726,
    'dark': #cc851e,
    'disabled': #ffd392,
    'light': #ffedd4,
  ),
  'orangered': (
    'base': #ff7043,
    'dark': #cc5a36,
    'disabled': #ffb7a1,
    'light': #ffe2d9,
  ),
  'brown': (
    'base': #914f2c,
    'dark': #743f23,
    'disabled': #c8a795,
    'light': #e9dcd5,
  ),
  'grey': (
    'base': #78909c,
    'dark': #5f7e8b,
    'disabled': #c6d1d8,
    'light': #e4e9ec,
  ),
  'gray': (
    'base': #aaaaaa,
    'dark': #838383,
    'disabled': #e6e6e6,
    'light': #f8f7f8,
  ),
) !default;

// 炫酷颜色值
$cool-colors: (
  '1': (
    'begin': #f5317f,
    'end': #ff7c6e,
  ),
  '2': (
    'begin': #ca26ff,
    'end': #f360a7,
  ),
  '3': (
    'begin': #a26ffc,
    'end': #9d12ff,
  ),
  '4': (
    'begin': #aa77f0,
    'end': #e871e5,
  ),
  '5': (
    'begin': #40a0f7,
    'end': #4866e6,
  ),
  '6': (
    'begin': #209cff,
    'end': #68e0cf,
  ),
  '7': (
    'begin': #00c3ff,
    'end': #58fff5,
  ),
  '8': (
    'begin': #00d1ff,
    'end': #69ff97,
  ),
  '9': (
    'begin': #0fd893,
    'end': #29ecbf,
  ),
  '10': (
    'begin': #0fd850,
    'end': #f9f047,
  ),
  '11': (
    'begin': #24fe41,
    'end': #f7fd47,
  ),
  '12': (
    'begin': #d6ff7f,
    'end': #00f657,
  ),
  '13': (
    'begin': #fa709a,
    'end': #fee140,
  ),
  '14': (
    'begin': #fe5e9c,
    'end': #f1aa76,
  ),
  '15': (
    'begin': #ff3181,
    'end': #ff8331,
  ),
  '16': (
    'begin': #ed1c24,
    'end': #fece12,
  ),
);

// 颜色值
$colors: () !default;
$colors: map.deep-merge(
  (
    'white': #ffffff,
    'black': #000000,
    'primary': (
      'base': #01beff,
    ),
    'success': (
      'base': #00d886,
    ),
    'warning': (
      'base': #fbbd12,
    ),
    'danger': (
      'base': #ff444f,
    ),
    'error': (
      'base': #ff444f,
    ),
    'info': (
      'base': #9c9c9c,
    ),
  ),
  $colors
);

$color-white: map.get($colors, 'white') !default;
$color-black: map.get($colors, 'black') !default;
$color-primary: map.get($colors, 'primary', 'base') !default;
$color-success: map.get($colors, 'success', 'base') !default;
$color-warning: map.get($colors, 'warning', 'base') !default;
$color-danger: map.get($colors, 'danger', 'base') !default;
$color-error: map.get($colors, 'error', 'base') !default;
$color-info: map.get($colors, 'info', 'base') !default;

// https://sass-lang.com/documentation/values/maps#immutability
// mix colors with white/black to generate light/dark level
@mixin set-color-mix-level(
  $type,
  $number,
  $mode: 'light',
  $mix-color: $color-white
) {
  $colors: map.deep-merge(
    (
      $type: (
        '#{$mode}-#{$number}':
          mix(
            $mix-color,
            map.get($colors, $type, 'base'),
            math.percentage(math.div($number, 10))
          ),
      ),
    ),
    $colors
  ) !global;
}

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

// --tn-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': #080808,
    'secondary': #9c9c9c,
    'placeholder': #838383,
    'disabled': #e6e6e6,
  ),
  $text-color
);

$bg-color: () !default;
$bg-color: map.merge(
  (
    '': #ffffff,
    'page': #f4f4f4,
    'overlay': #ffffff,
    'mask': rgba(0, 0, 0, 0.5),
  ),
  $bg-color
);

$font-size: () !default;
$font-size: map.merge(
  (
    '4xl': 32px,
    '3xl': 26px,
    '2xl': 20px,
    'xl': 18px,
    'lg': 16px,
    'default': 14px,
    'sm': 13px,
    'xs': 12px,
  ),
  $font-size
);

$padding-margin-size: () !default;
$padding-margin-size: map.merge(
  (
    'xl': 25px,
    'lg': 20px,
    'default': 15px,
    'sm': 10px,
    'xs': 5px,
    '0': 0px,
  ),
  $padding-margin-size
);

$border-width: () !default;
$border-width: map.merge(
  (
    'bold': 3px,
    'default': 1px,
  ),
  $border-width
);

$border-radius: () !default;
$border-radius: map.merge(
  (
    'default': 7.5px,
    'round': 2500px,
  ),
  $border-radius
);

$box-shadow: () !default;
$box-shadow: map.merge(
  (
    'default': (
      0px 5px 30px -9.5px,
    ),
    'sm': (
      0px 5px 30px -20px,
    ),
    'md': (
      0px 5px 10px -1px,
      0px 0px 5px -2px,
    ),
    'lg': (
      0px 10px 15px -2px,
      0px 5px 10px -2px,
    ),
  ),
  $box-shadow
);

$box-shadow-colors: () !default;
$box-shadow-colors: map.merge(
  (
    'default': rgba(0, 0, 0, 0.1),
    'sm': rgba(0, 0, 0, 0.1),
    'md': rgba(0, 0, 0, 0.1),
    'lg': rgba(0, 0, 0, 0.1),
  ),
  $box-shadow-colors
);