@import "variables";

@mixin slider($name, $color, $height: 6px){
  .slider-#{$name}{
    .el-slider__bar {
      height: $height;
      background-color: var($color);
    }
    .el-tooltip{
      border: none;
    }
    .el-slider__button{
      &.hover,
      &:hover,
      &.dragging {
        filter: brightness(0.8);
      }
      background-color: var($color);
      height: $height * 3;
      width: $height * 3;
    }
  }
}

@include slider('info', --info-color);
@include slider('primary', --primary-color);
@include slider('success', --success-color);
@include slider('warning', --warning-color);
@include slider('danger', --danger-color);