@mixin hover($color: $input-hover-border-color) {
  border-color: #5196ff;
}

@mixin active($color: $input-hover-border-color) {
  border-color: #5196ff;
  outline: 0;
  box-shadow: $mixin-input-active-box-shadow;
}

@mixin hover-error() {
  border-color: $error-color;
}

@mixin active-error() {
  border-color: #f36f7d;//************
  box-shadow: $mixin-input-active-error-box-shadow;
}

@mixin clearActive( ) {
  border-color: inherit;
  outline: inherit;
  box-shadow: inherit;
}

@mixin HS2020ScrollBar {    //滚动条
  //    &::-webkit-scrollbar {
  //     /*滚动条整体样式*/
  //     width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  //     height: 10px;
  //     }
  //     &::-webkit-scrollbar-thumb {
  //     /*滚动条里面小方块*/
  //     border-radius: 10px;
  //     box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  //     background   : #535353;
  //     }
  //     &::-webkit-scrollbar-track {
  //     /*滚动条里面轨道*/
  //     box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  //     border-radius: 10px;
  //     background   : #ededed;
  //     }
}
//选中样式统一管理，新增mixin
@mixin selectionStyle {
  &::selection {
    background-color: #dce9ff;
  }

  &::-moz-selection {
    background-color: #dce9ff;
  }
}

@mixin select-item($size-class, $item-class) {
  .#{$item-class} {
    margin: 0;
    line-height: normal;
    padding: 7px 12px;
    // margin-right: 5px;
    clear: both;
    color: $text-color;
    font-size: $mixin-select-item-font-size;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    transition: background $transition-time $ease-in-out;

    &:hover {
      background: $background-color-select-hover;
    }

    &-focus {
      background: $background-color-select-hover;
    }

    &-disabled {
      color: $btn-disable-color;
      cursor: $cursor-disabled;

      &:hover {
        color: $btn-disable-color;
        background-color: #fff;
        cursor: $cursor-disabled;
      }
    }

    &-selected,
    &-selected:hover {
      color: $selected-color;
      // color: #fff;
      // background: $selected-color;
    }

    &-selected &-focus {
      background: shade($selected-color, 10%);
    }

    &-divided {
      margin-top: 5px;
      border-top: 1px solid $border-color-split;

      &::before {
        content: "";
        height: 5px;
        display: block;
        //margin: 0 -16px;
        background-color: #fff;
        position: relative;
        top: -7px;
      }
    }
  }
  .#{$item-class}-checkbox {
    margin-right: 8px;//*******************************************
  }

  .#{$size-class}-large .#{$item-class} {
    padding: 7px 16px 8px;
    font-size: $font-size-base;
  }
}

@mixin content-header() {
  border-bottom: 1px solid #ededed;//*****************
  padding: $mixin-content-header-padding;
  line-height: 1;

  p,
  &-inner {
    display: inline-block;
    width: 100%;
    height: 14px;//****************
    line-height: 14px;//*******************
    font-size: 14px;//*******************
    color: $mixin-content-header-color;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
// for select and input like component's arrow
@mixin inner-arrow() {
  position: absolute;
  top: 50%;
  right: 8px;
  line-height: 1;
  margin-top: -5px;
  font-size: $font-size-base;
  color: $arrow-color;
  transition: all $transition-time $ease-in-out;
}