@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

// 设置宽度
@mixin set-width($width-list) {
  @each $size in $width-list {
    .w#{$size} {
      width: #{$size}px !important;
    }
  }
}

// 设置宽度
@mixin set-fontSize($font-size-list) {
  @each $size in $font-size-list {
    .fs#{$size} {
      font-size: #{$size}px !important;
    }
  }
}

// 设置高度
@mixin set-height($width-list) {
  @each $size in $width-list {
    .h#{$size} {
      height: #{$size}px !important;
    }
  }
}

// 设置字体宽度
@mixin set-height($font-weight-list) {
  @each $size in $font-weight-list {
    .fw#{$size} {
      font-weight: #{$size}px !important;
    }
  }
}

// 设置圆角弧度
@mixin set-radius($radius) {
  @each $size in $radius {
    .radius#{$size} {
      border-radius: #{$size}px !important;
    }
  }
}

// 设置透明度
@mixin set-opacity($opacity) {
  @each $size in $opacity {
    .opacity#{$size*10} {
      opacity: #{$size} !important;
    }
  }
}

// 外边距
@mixin margin($size) {
  margin: $size !important;
}

@mixin margin-vertical($size) {
  margin-top: $size !important;
  margin-bottom: $size !important;
}

@mixin margin-horizontal($size) {
  margin-left: $size !important;
  margin-right: $size !important;
}

@mixin margin-top($size) {
  margin-top: $size !important;
}

@mixin margin-left($size) {
  margin-left: $size !important;
}

@mixin margin-bottom($size) {
  margin-bottom: $size !important;
}

@mixin margin-right($size) {
  margin-right: $size !important;
}

// 内边距
@mixin padding($size) {
  padding: $size !important;
}

@mixin padding-vertical($size) {
  padding-top: $size !important;
  padding-bottom: $size !important;
}

@mixin padding-horizontal($size) {
  padding-left: $size !important;
  padding-right: $size !important;
}

@mixin padding-top($size) {
  padding-top: $size !important;
}

@mixin padding-left($size) {
  padding-left: $size !important;
}

@mixin padding-bottom($size) {
  padding-bottom: $size !important;
}

@mixin padding-right($size) {
  padding-right: $size !important;
}

@mixin top($size) {
  top: $size !important;
}

@mixin left($size) {
  left: $size !important;
}

@mixin right($size) {
  right: $size !important;
}

@mixin bottom($size) {
  bottom: $size !important;
}

// 设置内外边距
@mixin set-distance($distance-class-list, $distance-list) {
  @each $class-name in $distance-class-list {
    @each $size in $distance-list {
      .#{$class-name}#{$size} {
        @if $class-name == m {
          @include margin(#{$size}px);
        }

        @if $class-name == mv {
          @include margin-vertical(#{$size}px);
        }

        @if $class-name ==mh {
          @include margin-horizontal(#{$size}px);
        }

        @if $class-name ==mt {
          @include margin-top(#{$size}px);
        }

        @if $class-name ==ml {
          @include margin-left(#{$size}px);
        }

        @if $class-name ==mr {
          @include margin-right(#{$size}px);
        }

        @if $class-name ==mb {
          @include margin-bottom(#{$size}px);
        }

        @if $class-name ==p {
          @include padding(#{$size}px);
        }

        @if $class-name ==pv {
          @include padding-vertical(#{$size}px);
        }

        @if $class-name ==ph {
          @include padding-horizontal(#{$size}px);
        }

        @if $class-name ==pt {
          @include padding-top(#{$size}px);
        }

        @if $class-name ==pl {
          @include padding-left(#{$size}px);
        }

        @if $class-name ==pr {
          @include padding-right(#{$size}px);
        }

        @if $class-name ==pb {
          @include padding-bottom(#{$size}px);
        }

        @if $class-name ==top {
          @include top(#{$size}px);
        }

        @if $class-name ==left {
          @include left(#{$size}px);
        }

        @if $class-name ==right {
          @include right(#{$size}px);
        }

        @if $class-name ==bottom {
          @include bottom(#{$size}px);
        }
      }
    }
  }
}

//// 设置内外边距
//@mixin set-distance($class-list, $multiple-list){
//  @each $class in $class-list {
//    @each $multiple in $multiple-list {
//      @include generate-spacing($class, $multiple);
//    }
//  }
//}
//
//// 根据倍数设置内外间距 class可以为 m, mv, mh, mt, ml, mr, mb, p, pv, ph, pt, pl, pr, pb
//@mixin generate-spacing($class, $multiple) {
//  $property: null;
//  $directions: (
//  );
//
//// 根据class首字母判断是margin还是padding
//@if str-index($class, 'm') {
//  $property: margin;
//}
//
//@else if str-index($class, 'p') {
//  $property: padding;
//}
//
//@if str-index($class, 'v') {
//  $directions: (
//    top,
//    bottom
//  );
//}
//
//@else if str-index($class, 'h') {
//  $directions: (
//    left,
//    right
//  );
//}
//
//@else if str-index($class, 't') {
//  $directions: (
//    top
//  );
//}
//
//@else if str-index($class, 'b') {
//  $directions: (
//    bottom
//  );
//}
//
//@else if str-index($class, 'l') {
//  $directions: (
//    left
//  );
//}
//
//@else if str-index($class, 'r') {
//  $directions: (
//    right
//  );
//}
//
//@else {
//  $directions: (
//    top,
//    right,
//    bottom,
//    left
//  );
//}
//
//// 生成对应的 class
//@each $direction in $directions {
//  .#{$class}-#{str-replace($multiple + 'x', '.', '_')} {
//    #{$property}-#{$direction}: $base-spacing * $multiple;
//  }
//}
//}

// 把间距class中名字中带 . 的替换成 _，避免class名字带点引起歧义和风险
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if($index) {
    @return str-slice($string, 1, $index - 1)+'_'+str-slice($string, $index + 1);
  }

  @return $string;
}

//单行省略
@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin horizontal-margin($size) {
  margin-left: $size ;
  margin-right: $size
}

@mixin border-radius($radius) {
  border-radius: $radius;
}

@mixin btn-sizes($btn-height, $font-size) {
  height: $btn-height;
  font-size: $font-size;
  //@include border-radius($btn-height/2);
}
