$theme-stroke-1: #333;
$theme-stroke-2: #444;
$theme-stroke-3: #666;
$theme-stroke-4: #999;
$theme-stroke-5: #bbb;
$theme-stroke-6: #cacaca;
$theme-stroke-7: #e5e5e5;
$theme-stroke-8: #f2f2f2;
$theme-stroke-9: #f8f8f8;
$theme-stroke-10: #fff;
$theme-stroke-11: #dcdcdc;

// Blue(primary) - 基于 #8bc34a 的绿色渐变方案
$theme-primary-1: #0d2e0a !default; // 最深绿
$theme-primary-2: #1a5c14 !default; // 深绿
$theme-primary-3: #2e7d32 !default; // 中深绿
$theme-primary-4: #8bc34a !default; // 基准绿
$theme-primary-5: #7dbd34 !default; // 中绿
$theme-primary-6: #c8e6c9 !default; // 浅绿
$theme-primary-7: #e8f5e8 !default; // 很浅绿
$theme-primary-8: #f1f8e9 !default; // 最浅绿

// Green
$theme-success-1: #0a0;
$theme-success-2: #4b0;
$theme-success-3: #6c2;
$theme-success-4: #396;
$theme-success-5: #4b8;

// Red
$theme-error-1: #b40000 !default;
$theme-error-2: #d40000 !default;
$theme-error-3: #da2626 !default;
$theme-error-4: #df4545 !default;
$theme-error-5: #ffebeb !default;

// Orange
$theme-warn-1: #c95a0a !default;
$theme-warn-2: #ed6a0c !default;
$theme-warn-3: #ef8030 !default;
$theme-warn-4: #f1924e !default;
$theme-warn-5: #fff5ed !default;

// Rate color
$rate-star-color: #fad20c !default;

$loading-icon-youzan-color: #e00 !default;

// !!! DO NOT USE !!!
// These variables will be removed
$notify-error: rgba(255, 68, 68, 0.8);
$notify-success: rgba(68, 187, 136, 0.8);

$theme-colors: (
  'stroke': ($theme-stroke-1,
    $theme-stroke-2,
    $theme-stroke-3,
    $theme-stroke-4,
    $theme-stroke-5,
    $theme-stroke-6,
    $theme-stroke-7,
    $theme-stroke-8,
    $theme-stroke-9,
    $theme-stroke-10,
    $theme-stroke-11,
  ),
  'primary': ($theme-primary-1,
    $theme-primary-2,
    $theme-primary-3,
    $theme-primary-4,
    $theme-primary-5,
    $theme-primary-6,
    $theme-primary-7,
    $theme-primary-8,
  ),
  'success': ($theme-success-1,
    $theme-success-2,
    $theme-success-3,
    $theme-success-4,
    $theme-success-5,
  ),
  'error': ($theme-error-1,
    $theme-error-2,
    $theme-error-3,
    $theme-error-4,
    $theme-error-5,
  ),
  'warn': ($theme-warn-1,
    $theme-warn-2,
    $theme-warn-3,
    $theme-warn-4,
    $theme-warn-5,
  ),
);

@function get-color($cat, $i) {
  @return nth(map-get($theme-colors, $cat), $i);
}

@function to-rgb($color) {
  @return red($color), green($color), blue($color);
}

// Use this for color with opacity = 1
// This is for backword compatibily
@function get-css-var($cat, $i) {
  // sass-lint:disable-block space-around-operator
  @return --theme-#{$cat}-#{$i};
}

// Use this for rgba support in theme colors
@function get-rgb-css-var($cat, $i) {
  // sass-lint:disable-block space-around-operator
  @return --theme-rgb-#{$cat}-#{$i};
}

@function theme-rgb($cat, $i) {
  @return var(get-css-var($cat, $i), get-color($cat, $i));
}

@function theme-rgba($cat, $i, $opacity) {
  $css-var: var(get-rgb-css-var($cat, $i), to-rgb(get-color($cat, $i)));

  // `unquote` is a workaround for node-sass misinterprets rgba as builtin function
  // https://github.com/sass/node-sass/issues/2251
  // dart-sass doesn't seem to have this issue.
  @return unquote('rgba(#{$css-var}, #{$opacity})');
}

@mixin theme-color($prop, $cat, $i, $opacity: 1) {
  $color: get-color($cat, $i);

  @if $opacity >=1 {
    #{$prop}: $color;
    #{$prop}: theme-rgb($cat, $i);
  }

  @else {
    #{$prop}: rgba($color, $opacity);
    #{$prop}: theme-rgba($cat, $i, $opacity);
  }
}

@mixin theme-border-impl($prop, $width, $style, $cat, $i, $opacity) {
  $color: get-color($cat, $i);

  @if $opacity >=1 {
    #{$prop}: $width $style $color;
    #{$prop}: $width $style theme-rgb($cat, $i);
  }

  @else {
    #{$prop}: $width $style rgba($color, $opacity);
    #{$prop}: $width $style theme-rgba($cat, $i, $opacity);
  }
}

@mixin theme-border($width, $style, $cat, $i, $opacity: 1) {
  @include theme-border-impl(border, $width, $style, $cat, $i, $opacity);
}

@mixin theme-border-top($width, $style, $cat, $i, $opacity: 1) {
  @include theme-border-impl(border-top, $width, $style, $cat, $i, $opacity);
}

@mixin theme-border-right($width, $style, $cat, $i, $opacity: 1) {
  @include theme-border-impl(border-right, $width, $style, $cat, $i, $opacity);
}

@mixin theme-border-bottom($width, $style, $cat, $i, $opacity: 1) {
  @include theme-border-impl(border-bottom, $width, $style, $cat, $i, $opacity);
}

@mixin theme-border-left($width, $style, $cat, $i, $opacity: 1) {
  @include theme-border-impl(border-left, $width, $style, $cat, $i, $opacity);
}

// Shadow
$shadow-spec-focus: 0 0 4px 0 rgba($theme-primary-1, 0.2) !default;
$shadow-spec-layer: 0 2px 8px 0 rgba($theme-stroke-4, 0.5) !default;
$shadow-spec-modal: 0 2px 24px 0 rgba($theme-stroke-4, 0.5) !default;
$shadow-spec-focus-var: 0 0 4px 0 theme-rgba(primary, 1, 0.2) !default;
$shadow-spec-layer-var: 0 2px 8px 0 theme-rgba(stroke, 4, 0.5) !default;
$shadow-spec-modal-var: 0 2px 24px 0 theme-rgba(stroke, 4, 0.5) !default;

$theme-shadow: (
  'focus': $shadow-spec-focus,
  'layer': $shadow-spec-layer,
  'modal': $shadow-spec-modal,
);

$theme-shadow-var: (
  'focus': $shadow-spec-focus-var,
  'layer': $shadow-spec-layer-var,
  'modal': $shadow-spec-modal-var,
);

@mixin theme-shadow($name) {
  $shadow: map-get($theme-shadow, $name);
  $shadow-var: map-get($theme-shadow-var, $name);

  box-shadow: $shadow;
  box-shadow: var(--shadow-spec-#{$name}, $shadow-var);
}

// @mixin default-theme-variables {
//   @each $cat, $list in $theme-colors {
//     @for $i from 1 through length($list) {
//       #{--theme-#{$cat}-#{$i}}: nth($list, $i);
//     }
//   }
// }