@mixin utils-user-select($value) {
  -moz-user-select: $value;
  -webkit-user-select: $value;
  -ms-user-select: $value;
}

@mixin utils-clearfix {
  $selector: &;

  @at-root {
    #{$selector}::before,
    #{$selector}::after {
      display: table;
      content: "";
    }
    #{$selector}::after {
      clear: both;
    }
  }
}

@mixin utils-vertical-center {
  $selector: &;

  @at-root {
    #{$selector}::after {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle;
    }
  }
}

@mixin utils-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 伪类替换颜色 */
@mixin trans-peudo-class-color($color, $hover-color) {
  &::before,
  &::after {
    background-color: $color;
  }

  &:hover {
    &::before,
    &::after {
      background-color: $hover-color;
    }
  }
}

/* 
* css 画关闭按钮
*/
@mixin close-btn($width, $padding, $top, $right, $size) {
  width: $width;
  height: $width;
  padding: $padding;
  position: absolute;
  box-sizing: border-box;
  top: $top;
  right: $right;
  cursor: pointer;

  &::before,
  &::after {
    content: "";
    position: absolute;
    height: $size;
    width: 1px;
    left: $width / 2;
  }

  &::before {
    transform: rotate(45deg);
  }

  &::after {
    transform: rotate(-45deg);
  }
}