@import "../../../style/index.less";

@ui-prefix-slider:yyui-slider;
@slider-prefix-cls: ant-slider;
.@{ui-prefix-slider}{
  .@{slider-prefix-cls} {
    &-track {
      background-color: tint(@primary-color, 20%);
    }
    &:hover {
      background-color: #e1e1e1;
      .@{slider-prefix-cls}-handle {
        border-color: tint(@primary-color, 30%);
      }
    }
    &:hover &-track {
      background-color: tint(@primary-color, 30%);
    }
    &-handle {
      border: solid 2px tint(@primary-color, 20%);
      background-color: #fff;
      transition: border-color 0.3s ease;
      &:hover {
        border-color: tint(@primary-color, 25%);
      }
      &:active {
        box-shadow: 0 0 0 2px fadeout(@primary-color,50%);
      }
    }
    &-dot {
      border: 2px solid tint(@primary-color, 40%);
      //background-color: #fff;
      //cursor: pointer;
      //border-radius: 50%;
      //vertical-align: middle;
      //&:first-child {
      //  margin-left: -4px;
      //}
      //&:last-child {
      //  margin-left: -4px;
      //}
      &-active {
        border-color: tint(@primary-color, 50%);
      }
    }
  }
}
.@{slider-prefix-cls} {
  &:hover &-track {
    background-color: tint(@primary-color, 30%);
  }
}