@import (reference) '../theme/variables/antdVariables.less';

@slider-prefix-cls: ~'@{ant-prefix}-slider';
@sliderPrefix: slider;

.@{sliderPrefix}_wrap {
  display: flex;
  align-items: center;
  min-width: 150px;

  .@{slider-prefix-cls} {
    flex: 1;
    
    .@{slider-prefix-cls}-track {
      background-color: @primary-color;
    }
    .@{slider-prefix-cls}-handle {
      border-color: @primary-color;
    }
  }
  
  .@{slider-prefix-cls}:hover {
    .@{slider-prefix-cls}-track {
      background-color: @primary-color;
    }
    .@{slider-prefix-cls}-handle {
      border-color: @primary-color;
      &:not(@{ant-prefix}-open) {
        border-color: @primary-color;
      }
    }
  }
  
  .@{slider-prefix-cls}-vertical {
    margin: 0;
  }

  .@{sliderPrefix}-inputbox {
    flex: 1;
    display: flex;
  }

  .@{sliderPrefix}_inputNumber {
    display: flex;
    align-items: center;
    max-width: 35%;
    .@{sliderPrefix}_line {
      width: 12px;
      height: 1px;
      margin: 0 4px;
      background-color: rgba(28,36,46,0.25);
    }
  }
}

.@{sliderPrefix}_wrap_vertical {
  height: 300px;
  flex-direction: column;
}

.@{sliderPrefix}_wrap_icon {
  .@{sliderPrefix}-inputbox {
    padding: 0 12px;
  }
  .@{sliderPrefix}_inputNumber {
    padding-right: 12px;
    padding-left: 8px;
  }
}
.@{sliderPrefix}_wrap_vertical_icon {
  .@{sliderPrefix}-inputbox {
    padding: 12px 0;
  }
  .@{sliderPrefix}_inputNumber {
    padding-bottom: 12px;
    padding-top: 8px;
  }
}