/* Element Chalk 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: primary, success, warning, danger, error, info;

// Color
$colors: () !default;
$colors: map.deep-merge(
  (
    'white': #ffffff,
    'black': #000000,
    'primary': (
      'base': #409eff
    ),
    'success': (
      'base': #46c93a,
    ),
    'warning': (
      'base': #e6a23c
    ),
    'danger': (
      'base': #ff4757,
    ),
    'error': (
      'base': #ff4757,
    ),
    'info': (
      'base': #909399,
    ),
  ),
  $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;

// social colors
$social-colors: () !default;
$social-colors: map.merge(
  (
    'facebook': #3b5999,
    'twitter': #1da1f2,
    'youtube': #ff0000,
    'pinterest': #bd081c,
    'linkedin': #0077b5,
    'snapchat': #fffc00,
    'whatsapp': #25d366,
    'tumblr': #36465d,
    'reddit': #ff4500,
    'spotify': #1ed760,
    'amazon': #ff9900,
    'medium': #02b875,
    'vimeo': #1ab7ea,
    'skype': #00aff0,
    'dribbble': #ea4c89,
    'slack': #4a154b,
    'yahoo': #430297,
    'twitch': #6441a4,
    'discord': #7289da,
    'telegram': #0088cc,
    'google-plus': #db4437,
    'messenger': #0084ff,
  ),
  $social-colors,
);

// 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
// --vs-color-primary-light-i
// 10% 53a8ff
// 20% 66b1ff
// 30% 79bbff
// 40% 8cc5ff
// 50% a0cfff
// 60% b3d8ff
// 70% c6e2ff
// 80% d9ecff
// 90% ecf5ff
@each $type in $types {
  @for $i from 1 through 9 {
    @include set-color-mix-level($type, $i, 'light', $color-white);
  }
}

// --vs-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': #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': #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(
  (
    'base': 4px,
    'small': 2px,
    'round': 20px,
    'circle': 100%,
    'full': 99999px
  ),
  $border-radius
);

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

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

$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,
    '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
);

// Components
// ---
// Checkbox
// css3 var in packages/theme-chalk/src/checkbox.scss
$checkbox: () !default;
$checkbox: map.merge(
  (
    'font-size': 14px,
    'font-weight': getCssVar('font-weight-primary'),
    'text-color': getCssVar('text-color-regular'),
    'input-height': 14px,
    'input-width': 14px,
    'border-radius': getCssVar('border-radius-small'),
    'bg-color': getCssVar('fill-color', 'blank'),
    'input-border': getCssVar('border'),
    'disabled-border-color': getCssVar('border-color'),
    'disabled-input-fill': getCssVar('fill-color', 'light'),
    'disabled-icon-color': getCssVar('text-color-placeholder'),
    'disabled-checked-input-fill': getCssVar('border-color-extra-light'),
    'disabled-checked-input-border-color': getCssVar('border-color'),
    'disabled-checked-icon-color': getCssVar('text-color-placeholder'),
    'checked-text-color': getCssVar('color-primary'),
    'checked-input-border-color': getCssVar('color-primary'),
    'checked-bg-color': getCssVar('color-primary'),
    'checked-icon-color': getCssVar('color', 'white'),
    'input-border-color-hover': getCssVar('color-primary'),
  ),
  $checkbox
);

$checkbox-button: () !default;
$checkbox-button: map.merge(
  (
    'checked-bg-color': getCssVar('color-primary'),
    'checked-text-color': getCssVar('color-white'),
    'checked-border-color': getCssVar('color-primary'),
  ),
  $checkbox-button
);

$checkbox-bordered-padding-left: () !default;
$checkbox-bordered-padding-left: map.merge(
  (
    'large': 12px,
    'default': 10px,
    'small': 8px,
  ),
  $checkbox-bordered-padding-left
);

$checkbox-bordered-padding-right: () !default;
$checkbox-bordered-padding-right: map.merge(
  (
    'large': 20px,
    'default': 16px,
    'small': 12px,
  ),
  $checkbox-bordered-padding-right
);

// Radio
/// fontSize||Font|1
$radio: () !default;
$radio: map.merge(
  (
    'font-size': getCssVar('font-size-base'),
    'text-color': getCssVar('text-color-regular'),
    'font-weight': getCssVar('font-weight-primary'),
    'input-height': 14px,
    'input-width': 14px,
    'input-border-radius': getCssVar('border-radius-circle'),
    'input-bg-color': getCssVar('fill-color', 'blank'),
    'input-border': getCssVar('border'),
    'input-border-color': getCssVar('border-color'),
    'input-border-color-hover': getCssVar('color-primary'),
  ),
  $radio
);

$radio-height: () !default;
$radio-height: map.merge($common-component-size, $radio-height);

$radio-button: () !default;
$radio-button: map.merge(
  (
    'checked-bg-color': getCssVar('color-primary'),
    'checked-text-color': getCssVar('color-white'),
    'checked-border-color': getCssVar('color-primary'),
    'disabled-checked-fill': getCssVar('border-color-extra-light'),
  ),
  $radio-button
);

$radio-disabled: () !default;
$radio-disabled: map.merge(
  (
    'input-border-color': getCssVar('disabled-border-color'),
    'input-fill': getCssVar('disabled-bg-color'),
    'icon-color': getCssVar('disabled-bg-color'),
    'checked-input-border-color': getCssVar('disabled-border-color'),
    'checked-input-fill': getCssVar('disabled-bg-color'),
    'checked-icon-color': getCssVar('text-color-placeholder'),
  ),
  $radio-disabled
);

$radio-checked: () !default;
$radio-checked: map.merge(
  (
    'text-color': getCssVar('color-primary'),
    'input-border-color': getCssVar('color-primary'),
    'icon-color': getCssVar('color-primary'),
  ),
  $radio-checked
);

$radio-bordered-input-height: () !default;
$radio-bordered-input-height: map.merge(
  (
    'large': 14px,
    'default': 12px,
    'small': 12px,
  ),
  $radio-bordered-input-height
);

$radio-bordered-input-width: () !default;
$radio-bordered-input-width: map.merge(
  (
    'large': 14px,
    'default': 12px,
    'small': 12px,
  ),
  $radio-bordered-input-width
);

// Input
// css3 var in packages/theme-chalk/src/input.scss
$input: () !default;
$input: map.merge(
  (
    'text-color': getCssVar('text-color-regular'),
    'border': getCssVar('border'),
    'hover-border': getCssVar('border-color-hover'),
    'focus-border': getCssVar('color-primary'),
    'transparent-border': 0 0 0 1px transparent inset,
    'border-color': getCssVar('border-color'),
    'border-radius': getCssVar('border-radius-base'),
    'bg-color': getCssVar('fill-color', 'blank'),
    'icon-color': getCssVar('text-color-placeholder'),
    'placeholder-color': getCssVar('text-color-placeholder'),
    'hover-border-color': getCssVar('border-color-hover'),
    'clear-hover-color': getCssVar('text-color-secondary'),
    'focus-border-color': getCssVar('color-primary'),
  ),
  $input
);

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

$input-font-size: () !default;
$input-font-size: map.merge(
  (
    'large': 14px,
    'default': 14px,
    'small': 12px,
  ),
  $input-font-size
);

$input-height: () !default;
$input-height: map.merge($common-component-size, $input-height);

$input-line-height: () !default;
$input-line-height: map.merge($common-component-size, $input-line-height);

$input-number-width: () !default;
$input-number-width: map.merge(
  (
    'large': 180px,
    'default': 150px,
    'small': 120px,
  ),
  $input-number-width
);

$input-padding-horizontal: () !default;
$input-padding-horizontal: map.merge(
  (
    'large': 16px,
    'default': 12px,
    'small': 8px,
  ),
  $input-padding-horizontal
);

// Button
// css3 var in packages/theme-chalk/src/button.scss
$button: () !default;
$button: map.merge(
  (
    'font-weight': getCssVar('font-weight-primary'),
    'border-color': getCssVar('border-color'),
    'bg-color': getCssVar('fill-color', 'blank'),
    'text-color': getCssVar('text-color', 'regular'),
    'disabled-text-color': getCssVar('disabled-text-color'),
    'disabled-bg-color': getCssVar('fill-color', 'blank'),
    'disabled-border-color': getCssVar('border-color-light'),
    'divide-border-color': rgba($color-white, 0.5),
    'hover-text-color': getCssVar('color-primary'),
    'hover-bg-color': getCssVar('color-primary', 'light-9'),
    'hover-border-color': getCssVar('color-primary-light-7'),
    'active-text-color': getCssVar('button-hover-text-color'),
    'active-border-color': getCssVar('color-primary'),
    'active-bg-color': getCssVar('button', 'hover-bg-color'),
    'outline-color': getCssVar('color-primary', 'light-5'),
    'hover-link-text-color': getCssVar('color-info'),
    'active-color': getCssVar('text-color', 'primary'),
  ),
  $button
);

$button-border-width: $border-width !default;

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


// drawer
$drawer: () !default;
$drawer: map.merge(
  (
    'bg-color':
      var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}),
    'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
  ),
  $drawer
);

// Rate
$rate: () !default;
$rate: map.merge(
  (
    'height': 20px,
    'font-size': getCssVar('font-size-base'),
    'icon-size': 18px,
    'icon-margin': 6px,
    // seems not be used, to be removed
    // 'icon-color': getCssVar('text-color-placeholder),
    'void-color': getCssVar('border-color', 'darker'),
    'fill-color': #f7ba2a,
    'disabled-void-color': getCssVar('fill-color'),
    'text-color': getCssVar('text-color', 'primary'),
  ),
  $rate
);

// Scrollbar
// css3 var in packages/theme-chalk/src/scrollbar.scss
$scrollbar: () !default;
$scrollbar: map.merge(
  (
    'opacity': 0.3,
    'bg-color': getCssVar('text-color-secondary'),
    'hover-opacity': 0.5,
    'hover-bg-color': getCssVar('text-color-secondary'),
  ),
  $scrollbar
);

// Collapse
// css3 var in packages/theme-chalk/src/collapse.scss
$collapse: () !default;
$collapse: map.merge(
  (
    'border-color': getCssVar('border-color-lighter'),
    'header-height': 48px,
    'header-bg-color': getCssVar('fill-color', 'blank'),
    'header-text-color': getCssVar('text-color-primary'),
    'header-font-size': 13px,
    'content-bg-color': getCssVar('fill-color', 'blank'),
    'content-font-size': 13px,
    'content-text-color': getCssVar('text-color-primary'),
  ),
  $collapse
);

// Empty
// css3 var in packages/theme-chalk/src/empty.scss
$empty: () !default;
$empty: map.merge(
  (
    'padding': 40px 0,
    'image-width': 160px,
    'description-margin-top': 20px,
    'bottom-margin-top': 20px,
    'fill-color-0': getCssVar('color-white'),
    'fill-color-1': #fcfcfd,
    'fill-color-2': #f8f9fb,
    'fill-color-3': #f7f8fc,
    'fill-color-4': #eeeff3,
    'fill-color-5': #edeef2,
    'fill-color-6': #e9ebef,
    'fill-color-7': #e5e7e9,
    'fill-color-8': #e0e3e9,
    'fill-color-9': #d5d7de,
  ),
  $empty
);

// transition
$transition: () !default;
$transition: map.merge(
  (
    'all': all getCssVar('transition-duration')
      getCssVar('transition-function-ease-in-out-bezier'),
    'ease': all getCssVar('transition-duration')
      getCssVar('transition-function-ease'),
    '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.25s,
    '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),
    'ease': ease
  ),
  $transition-function
);

// Break-point
$sm: 768px !default;
$md: 992px !default;
$lg: 1200px !default;
$xl: 1920px !default;

$breakpoints: (
  'xs': '(max-width: #{$sm})',
  'sm': '(min-width: #{$sm})',
  'md': '(min-width: #{$md})',
  'lg': '(min-width: #{$lg})',
  'xl': '(min-width: #{$xl})'
) !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-only': '(min-width: #{$xl})'
) !default;

// Icon
// css3 var in packages/theme-chalk/src/icons
$icon: () !default;
$icon: map.merge(
  (
    'background': getCssVar('color'),
    'height': 30px
  ),
  $icon
);

// Alert Component
// css3 var in packages/theme-chalk/src/alert.scss

// Icon Close
// css3 var in packages/theme-chalk/src/icon-close.scss
$iconClose: () !default;
$iconClose: map.merge(
  (),
  $iconClose
);

// Icon Check
// css3 var in packages/theme-chalk/src/icon-check.scss
$iconCheck: () !default;
$iconCheck: map.merge(
  (
    'height': 23px,
    'line-radius': 5px
  ),
  $iconCheck
);