/* stylelint-disable max-nesting-depth */

@import "mixins/mixins";
@import "mixins/utils";
@import "input-number";
@import "tooltip";
@import "common/var";

@include b(slider) {
    @include utils-clearfix;

    @include e(runway) {
        width: 100%;
        height: $--slider-height;
        margin: $--slider-margin;
        background-color: $--slider-runway-background-color;
        border-radius: $--slider-border-radius;
        position: relative;
        cursor: pointer;
        vertical-align: middle;

        &.show-input {
            margin-right: 160px;
            width: auto;
        }

        &.disabled {
            cursor: default;

            .el-slider__bar {
                background-color: $--slider-disable-color;
            }

            .el-slider__button {
                border-color: $--slider-disable-color;
            }

            .el-slider__button-wrapper {
                &:hover,
                &.hover {
                    cursor: not-allowed;
                }

                &.dragging {
                    cursor: not-allowed;
                }
            }

            .el-slider__button {
                &:hover,
                &.hover,
                &.dragging {
                    transform: scale(1);
                }

                &:hover,
                &.hover {
                    cursor: not-allowed;
                }

                &.dragging {
                    cursor: not-allowed;
                }
            }
        }
    }

    @include e(input) {
        float: right;
        margin-top: 3px;
        width: 130px;

        &.el-input-number--mini {
            margin-top: 5px;
        }

        &.el-input-number--medium {
            margin-top: 0;
        }

        &.el-input-number--large {
            margin-top: -2px;
        }
    }

    @include e(bar) {
        height: $--slider-height;
        background-color: $--slider-main-background-color;
        border-top-left-radius: $--slider-border-radius;
        border-bottom-left-radius: $--slider-border-radius;
        position: absolute;
    }

    @include e(button-wrapper) {
        height: $--slider-button-wrapper-size;
        width: $--slider-button-wrapper-size;
        position: absolute;
        z-index: 1001;
        top: $--slider-button-wrapper-offset;
        transform: translateX(-50%);
        background-color: transparent;
        text-align: center;
        user-select: none;
        line-height: normal;
        @include utils-vertical-center;

        .el-tooltip {
            vertical-align: middle;
            display: inline-block;
        }

        &:hover,
        &.hover {
            cursor: grab;
        }

        &.dragging {
            cursor: grabbing;
        }
    }

    @include e(button) {
        width: $--slider-button-size;
        height: $--slider-button-size;
        border: solid 2px $--slider-main-background-color;
        background-color: $--color-white;
        border-radius: 50%;
        transition: .2s;
        user-select: none;

        &:hover,
        &.hover,
        &.dragging {
            transform: scale(1.2);
        }

        &:hover,
        &.hover {
            cursor: grab;
        }

        &.dragging {
            cursor: grabbing;
        }
    }

    @include e(stop) {
        position: absolute;
        height: $--slider-height;
        width: $--slider-height;
        border-radius: $--border-radius-circle;
        background-color: $--slider-stop-background-color;
        transform: translateX(-50%);
    }

    @include when(vertical) {
        position: relative;
        .el-slider__runway {
            width: $--slider-height;
            height: 100%;
            margin: 0 16px;
        }
        .el-slider__bar {
            width: $--slider-height;
            height: auto;
            border-radius: 0 0 3px 3px;
        }
        .el-slider__button-wrapper {
            top: auto;
            left: $--slider-button-wrapper-offset;
            transform: translateY(50%);
        }
        .el-slider__stop {
            transform: translateY(50%);
        }
        &.el-slider--with-input {
            padding-bottom: #{$--input-medium-height + 22px};
            .el-slider__input {
                overflow: visible;
                float: none;
                position: absolute;
                bottom: 22px;
                width: 36px;
                margin-top: 15px;
                .el-input__inner {
                    text-align: center;
                    padding-left: 5px;
                    padding-right: 5px;
                }
                .el-input-number__decrease,
                .el-input-number__increase
        {
                    top: $--input-small-height;
                    margin-top: -1px;
                    border: $--input-border;
                    line-height: 20px;
                    box-sizing: border-box;
                    transition: $--border-transition-base;
                }
                .el-input-number__decrease {
                    width: 18px;
                    right: 18px;
                    border-bottom-left-radius: $--input-border-radius;
                }
                .el-input-number__increase {
                    width: 19px;
                    border-bottom-right-radius: $--input-border-radius;
                    & ~ .el-input .el-input__inner {
                        border-bottom-left-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
                &:hover {
                    .el-input-number__decrease,
                    .el-input-number__increase
          {
                        border-color: $--input-hover-border;
                    }
                }
                &:active {
                    .el-input-number__decrease,
                    .el-input-number__increase
          {
                        border-color: $--input-focus-border;
                    }
                }
            }
        }
    }
}