@import "function";
@import "./var.scss";

$theme: (
  purple: $--color-primary-purple,
  palevioletred: $--color-primary-palevioletred,
  forestgreen: $--color-primary-forestgreen,
  deepblue: $--color-primary-deepblue,
  orange: $--color-primary-orange,
  skyblue: $--color-primary-skyblue,
  aurorablue: $--color-primary-aurorablue,
  tiffanyblue: $--color-primary-tiffanyblue,
);

@mixin theme_map() {
  @each $name in map-keys($theme){
    [#{'data-theme=' +$name} ] & {
      // color: rgb(map-get($theme,$name), $opacity);
      @content;
    }
  }
}

/* 字体主题色
 -------------------------- */
@mixin font_color_primary( $opacity: 1, $color: $--color-primary) {
  color:rgba($--color-primary, $opacity);
  @each $name in map-keys($theme){
    [#{'data-theme=' +$name} ] & {
      color: rgba(map-get($theme,$name), $opacity);
    }
  }
  &:hover {
    // @include font_color_primary_mixin(.2)
  }
}

 /*
  字体混合主题色
  -------------------------- */
  @mixin font_color_primary_mixin($opacity: 1, $color: $--color-white) {
    color: mix($--color-white, $--color-primary, ($opacity * 100%));
    @each $name in map-keys($theme){
      [#{'data-theme=' +$name} ] & {
        color:  mix($--color-white, map-get($theme,$name), ($opacity * 100%));
      }
    }
  }

/* 背景主题色
 -------------------------- */
@mixin bg_color_primary( $opacity: 1, $color: $--color-primary) {
  background-color: rgba($color, $opacity);
  @each $name in map-keys($theme){
    [#{'data-theme=' +$name} ] & {
      background-color: rgba(map-get($theme,$name), $opacity);
    }
  }
}

/*
  背景混合主题色
  -------------------------- */
  @mixin bg_color_primary_mixin($opacity: 1, $color: $--color-white) {
    background-color: mix($--color-white, $--color-primary, ($opacity * 100%));
    @each $name in map-keys($theme){
      [#{'data-theme=' +$name} ] & {
        background-color: mix($--color-white,map-get($theme,$name), $opacity * 100%);
      }
    }
  }

/* 边框主题色
 -------------------------- */
 @mixin border_color_primary($opacity: 1, $position: null, $color: $--color-primary) {
  @if $position {
    border-#{$position}-color: rgba($color, $opacity); 
  } @else {
    border-color:rgba($color, $opacity); 
  }
  @each $name in map-keys($theme){
    [#{'data-theme=' +$name} ] & {
      @if $position {
        border-#{$position}-color: rgba(map-get($theme,$name), $opacity); 
      } @else {
        border-color:rgba(map-get($theme,$name), $opacity); 
      }
    }
  }
}

/*
  边框混合主题色
  -------------------------- */
  @mixin border_color_primary_mixin($opacity: 1, $color: $--color-white) {
    border-color: mix($--color-white, $--color-primary, ($opacity * 100%));
    @each $name in map-keys($theme){
      [#{'data-theme=' +$name} ] & {
        border-color:mix($--color-white, map-get($theme,$name), ($opacity * 100%));
      }
    }
  }

 /**
   描边主题色
  -------------------------- */
 @mixin stroke_color_primary( $opacity: 1, $color: $--color-primary) {
  stroke: rgba($color, $opacity);
  @each $name in map-keys($theme){
    [#{'data-theme=' +$name} ] & {
      stroke: rgba(map-get($theme,$name), $opacity);
    }
  }
}

/**边框
 -------------------------- */
 @mixin border_primary($width: 1px,$position: null, $type: solid, $opacity: 1, $color: $--color-primary) {
  @if $position {
    border-#{$position}: $width $type rgba($color, $opacity);
  } @else {
    border: $width $type rgba($color, $opacity);
  }
  @each $name in map-keys($theme){
    [#{'data-theme=' +$name} ] & {
      border-color:  map-get($theme,$name);
    }
  }
}

/* Break-points
 -------------------------- */
@mixin res($key, $map: $--breakpoints) {
  // 循环断点Map，如果存在则返回
  @if map-has-key($map, $key) {
    @media only screen and #{inspect(map-get($map, $key))} {
      @content;
    }
  } @else {
    @warn "Undefeined points: `#{$map}`";
  }
}

/* Scrollbar
 -------------------------- */
@mixin scroll-bar {
  $--scrollbar-thumb-background: #b4bccc;
  $--scrollbar-track-background: #fff;

  &::-webkit-scrollbar {
    z-index: 11;
    width: 6px;

    &:horizontal {
      height: 6px;
    }

    &-thumb {
      border-radius: 5px;
      width: 6px;
      background: $--scrollbar-thumb-background;
    }

    &-corner {
      background: $--scrollbar-track-background;
    }

    &-track {
      background: $--scrollbar-track-background;

      &-piece {
        background: $--scrollbar-track-background;
        width: 6px;
      }
    }
  }
}

/* Placeholder
 -------------------------- */
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }

  &::-moz-placeholder {
    @content
  }

  &:-ms-input-placeholder {
    @content
  }
}

/* BEM
 -------------------------- */
@mixin b($block) {
  $B: $namespace+'-'+$block !global;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

@mixin configurable-m($modifier, $E-flag: false) {
  $selector: &;
  $interpolation: '';

  @if $E-flag {
    $interpolation: $element-separator + $E-flag;
  }

  @at-root {
    #{$selector} {
      .#{$B+$interpolation+$modifier-separator+$modifier} {
        @content;
      }
    }
  }
}

@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
  $modifierCombo: '';

  @if $modifier {
    $modifierCombo: $modifier-separator + $modifier;
  }

  @at-root {
    #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
      @content
    }
  }
}

@mixin meb($modifier: false, $element: $E, $block: $B) {
  $selector: &;
  $modifierCombo: '';

  @if $modifier {
    $modifierCombo: $modifier-separator + $modifier;
  }

  @at-root {
    #{$selector} {
      .#{$block+$element-separator+$element+$modifierCombo} {
        @content
      }
    }
  }
}

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

@mixin extend-rule($name) {
  @extend #{'%shared-'+$name};
}

@mixin share-rule($name) {
  $rule-name: '%shared-'+$name;

  @at-root #{$rule-name} {
    @content
  }
}

@mixin pseudo($pseudo) {
  @at-root #{&}#{':#{$pseudo}'} {
    @content
  }
}