// 内置颜色类
@use 'sass:map';
@use 'sass:list';

@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/color' as *;
@use 'mixins/var' as *;
@use 'mixins/function' as *;

// 背景颜色
@each $type in $types {
  @include b('type-' + $type) {
    @include generate-attr-color($type, 'bg', 'background-color') {
      @include get-inner-color('color', 'white');
    }
  }
}
@include b('white') {
  @include generate-attr-color('white', 'bg', 'background-color') {
    @include get-inner-color('color', 'black');
  }
}
@include b('black') {
  @include generate-attr-color('black', 'bg', 'background-color') {
    @include get-inner-color('color', 'white');
  }
}
@each $color in $inner-color-names {
  @include b($color) {
    @include generate-attr-bg-color($color);
    @each $type in ('light', 'dark', 'disabled') {
      &-#{$type} {
        @include generate-attr-bg-color($color, $type);
      }
    }
  }
}

// 没有渐变色的主题色
$no-gradient-bg-colors: ('orangered', 'brown', 'gray');
// 渐变背景
[class*=#{bem('gradient-bg')}] {
  background-image: repeating-linear-gradient(
    45deg,
    getCssVar('cool-bg-start-color'),
    getCssVar('cool-bg-end-color')
  );
}
@include b('gradient-bg') {
  // 主题色渐变
  $i: 0;
  @each $color in $inner-color-names {
    $i: $i + 1;
    @include e($color) {
      @if not index($no-gradient-bg-colors, $color) {
        $next-color: '';
        @if $i >= length($inner-color-names) {
          $next-color: nth($inner-color-names, 1);
        } @else {
          $next-color: nth($inner-color-names, $i + 1);
        }
        #{getCssVarName('cool-bg-start-color')}: getCssVar('color', $color);
        #{getCssVarName('cool-bg-end-color')}: getCssVar('color', $next-color);
        &-light {
          #{getCssVarName('cool-bg-start-color')}: getCssVar(
            'color',
            $color,
            'light'
          );
          #{getCssVarName('cool-bg-end-color')}: getCssVar(
            'color',
            $next-color,
            'light'
          );
        }
      }
      &-single {
        #{getCssVarName('cool-bg-start-color')}: getCssVar('color', $color);
        #{getCssVarName('cool-bg-end-color')}: getCssVar(
          'color',
          $color,
          'light'
        );
      }
    }
  }

  // 炫酷渐变
  @include e('cool') {
    @each $key, $color in $cool-colors {
      &-#{$key} {
        #{getCssVarName('cool-bg-start-color')}: map.get($color, 'begin');
        #{getCssVarName('cool-bg-end-color')}: map.get($color, 'end');
      }
    }
  }
}

// 酷炫背景颜色图片
@include b('bg-image') {
  position: relative;

  &::after {
    content: ' ';
    position: absolute;
    z-index: inherit;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: getCssVar('border-radius', 'default');
    opacity: 1;
    transform: scale(1, 1);
    background-size: 100% 100%;
    background-image: inherit;
  }
  @for $num from 1 through 6 {
    &:nth-of-type(#{$num}n)::after {
      background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/#{$num}.png);
    }
  }
}

// 字体颜色
@each $type in $types {
  @include b('type-' + $type) {
    @include generate-attr-color($type, 'text', 'color');
  }
}

@each $color in join(('white', 'black'), $inner-color-names) {
  @include b($color) {
    @include generate-attr-color($color, 'text', 'color');
    @if not index(('white', 'black'), $color) {
      @each $type in ('light', 'dark', 'disabled') {
        &-#{$type} {
          @include generate-attr-color($color, 'text', 'color', $type);
        }
      }
    }
  }
}

// 边框颜色
@each $type in $types {
  @include b('type-' + $type) {
    @include generate-attr-color($type, 'border', 'border-color');
  }
}

@each $color in join(('white', 'black'), $inner-color-names) {
  @include b($color) {
    @include generate-attr-color($color, 'border', 'border-color');
    @if not index(('white', 'black'), $color) {
      @each $type in ('light', 'dark', 'disabled') {
        &-#{$type} {
          @include generate-attr-color($color, 'border', 'border-color', $type);
        }
      }
    }
  }
}

// 阴影颜色
@each $type in $types {
  @include b('type-' + $type) {
    @include generate-attr-shadow-color($type);
  }
}

@each $color in join(('white', 'black'), $inner-color-names) {
  @include b($color) {
    @include generate-attr-shadow-color($color);
    @if not index(('white', 'black'), $color) {
      @each $type in ('light', 'dark', 'disabled') {
        &-#{$type} {
          @include generate-attr-shadow-color($color, $type);
        }
      }
    }
  }
}