@import "../variate.less";
.@{elNamespace}-slider{
   --el-slider-button-wrapper-size: 22px;
   --el-slider-button-wrapper-offset: -9px;
   --el-slider-main-bg-color: var(--el-color-primary);
   --el-slider-runway-bg-color: var(--el-fill-color);
   --el-slider-disabled-color: var(--el-text-color-disabled);
   height: 18px;
   .@{elNamespace}-slider__button{
        width: 18px;
        height: 18px;
        box-shadow: var(--el-box-shadow-lighter);
        &:hover{
            transform: unset;
            width: 22px;
            height: 22px;
        }
   }
   .@{elNamespace}-slider__stop {
        display: none;
    }
   .@{elNamespace}-slider__marks{
    .@{elNamespace}-slider__marks-text{
        margin-top: 14px;
        color: var(--el-text-color-secondary);
        transform: unset;
        height: 18px;
        line-height: 18px;
        &:last-of-type {
            transform: translateX(-100%);
        }
    }
   }
   .@{elNamespace}-slider__runway.is-disabled{
        background-color: var(--el-fill-color-light);
    }
    .@{elNamespace}-input{
        --el-input-border-color: var(--el-border-color);
    }
    .@{elNamespace}-slider__runway.show-input{
        margin-right: 16px;
    }
    .@{elNamespace}-slider__input{
        width: 60px;
        height: 32px;
        .@{elNamespace}-input__wrapper{
            padding: 0;
            .@{elNamespace}-input__inner{
                text-align: left;
                color: var(--el-text-color);
                line-height: 22px;
                height: 22px;
                padding: 5px 12px;
                box-sizing: content-box;
            }
        }
        .@{elNamespace}-input-number__decrease{
            display: none;
        }
        .@{elNamespace}-input-number__increase{
            display: none;
        }
    }
}

.@{elNamespace}-slider-tooltips__expand-class{
    padding: 5px 8px;
    line-height: 22px;
    .@{elNamespace}-popper__arrow{
        transform: translate(10px, 0px);
    }
}