@use 'function' as *;
@use '../common/var' as *;
// forward mixins
@forward 'config';
@forward 'function';
@forward '_var';
@use 'config' as *;

// Break-points
@mixin res($key, $map: $breakpoints) {
  // loop breakpoint Map, return if present
  @if map-has-key($map, $key) {
    @media only screen and #{unquote(map-get($map, $key))} {
      @content;
    }
  } @else {
    @warn "Undefined points: `#{$map}`";
  }
}

@mixin scroll-bar2($width: 6px) {
  $scrollbar-width: $width;
  $scrollbar-thumb-background: #dce0e8;
  $scrollbar-track-background: getCssVar('fill-color', 'blank');
  $scrollbar-thumb-hover-color: #b5bdce;
  /*修改滚动条样式*/
  &::-webkit-scrollbar {
    z-index: 11;
    width: $scrollbar-width;

    &:horizontal {
      height: $scrollbar-width;
    }

    // 定义滚动条滑块的样式和背景颜色（里面装有Thumb）
    &-thumb {
      // 定义滚动条滑块 hover 的样式和背景颜色
      border-radius: calc($scrollbar-width - 1px);
      width: $scrollbar-width;
      background: $scrollbar-thumb-background;
      &:hover {
        background-color: $scrollbar-thumb-hover-color;
      }
    }

    // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
    &-button {
    }

    // 内层轨道，滚动条中间部分（除去）
    &-track-piece {
    }

    //边角，即两个滚动条的交汇处
    &-corner {
      background: $scrollbar-track-background;
    }

    /* 定义滚动条轨道 内阴影+圆角 */
    // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
    &-track {
      background: $scrollbar-track-background;
      &-piece {
        background: $scrollbar-track-background;
        width: $scrollbar-width;
      }
    }

    &-resizer {
    }
  }
}

// Scrollbar
@mixin scroll-bar {
  $scrollbar-thumb-background: getCssVar('text-color', 'disabled');
  $scrollbar-track-background: getCssVar('fill-color', 'blank');

  &::-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;
      }
    }
  }
}

// BEM
@mixin b($block) {
  $B: $namespace + $common-separator + $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 + $selector + $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} !optional;
}

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

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

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

@mixin picker-popper($background, $border, $box-shadow) {
  &.#{$namespace}-popper {
    background: $background;
    border: $border;
    box-shadow: $box-shadow;

    .#{$namespace}-popper__arrow {
      &::before {
        border: $border;
      }
    }

    @each $placement,
      $adjacency in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
    {
      &[data-popper-placement^='#{$placement}'] {
        .#{$namespace}-popper__arrow::before {
          border-#{$placement}-color: transparent;
          border-#{$adjacency}-color: transparent;
        }
      }
    }
  }
}

// dark
@mixin dark($block) {
  html.dark {
    @include b($block) {
      @content;
    }
  }
}

@mixin inset-input-border($color, $important: false) {
  @if $important == true {
    box-shadow: 0 0 0 1px $color inset !important;
  } @else {
    box-shadow: 0 0 0 1px $color inset;
  }
}