@import (once) "../../include/vars";
@import (once) "../../include/mixins";

:root {
    --slider-thumb-size: 18px;
    --slider-thumb-color: var(--color-blue);
    --slider-bar-color: #191919;
    --slider-buffer-color: #fefefe;
    --slider-back-color: #d5d5d5;
    --slider-fill-color: var(--color-cyan);
    --slider-thumb-border-color: var(--color-light-cyan);
}

.dark-side {
    --slider-thumb-color: var(--color-crimson);
    --slider-bar-color: #191919;
    --slider-buffer-color: #fefefe;
    --slider-back-color: #4e5055;
    --slider-fill-color: #ff145c;
    --slider-thumb-border-color: #ffffff;
}

.slider {
    display: block;
    position: relative;
    height: 2.125rem;
    background: transparent;
    cursor: default;
    width: 100%;
    border-radius: 4px;
}

.slider {
    input {
        width: 1px;
        height: 1px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }
}

.slider {
    .backside, .complete, .buffer, .marker {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 4px;
    }

    .marker {
        border-radius: 50%;
        padding: 0;
        transition: none;
        width: var(--slider-thumb-size);
        height: var(--slider-thumb-size);
        background: var(--slider-thumb-color);
        z-index: 4;
        outline: none;
        border: 2px solid var(--slider-thumb-border-color);
        cursor: pointer;
        overflow: visible;

        &:focus {
            .focus-show(@light-gray);
        }

        &:active {
            .halo();
        }

        &.left-knob {
            left: 0;
        }

        &.right-knob {
            left: auto;
            right: 0;
        }
    }
    
    &.hidden-button {
        .marker {
            opacity: 0;
            transition: opacity .3s ease-in-out;
        }
        @media (hover: hover) {
            &:hover .marker {
                opacity: 1;
            }
        }
    }
    
    .backside {
        background-color: var(--slider-back-color);
        width: 100%;
        z-index: 1;
        height: .6rem;
    }

    .buffer {
        z-index: 2;
        height: .3rem;
        background-color: var(--slider-buffer-color);
    }

    .complete {
        z-index: 3;
        height: .6rem;
        background-color: var(--slider-fill-color);
    }

    .hint {
        display: none;
        position: absolute;
        z-index: 5;
        width: auto!important;
        height: auto!important;
        padding: .25rem .5rem;
        background-color: @dark-gray;
        color: @white;
        white-space: nowrap;

        &::before {
            display: block;
            position: absolute;
            content: "";
            width: 6px;
            height: 6px;
            background-color: inherit;
        }

        &.top-side {
            top: 0;
            left: 50%;
            transform: translateY(-100%) translateX(-50%);
            margin-top: -8px;

            &::before {
                top: 100%;
                left: 50%;
                transform: rotate(45deg) translateX(-50%);
                margin-top: -1px;
            }
        }

        &.bottom-side {
            left: 50%;
            transform: translateX(-50%);
            top: 100%;
            margin-top: 8px;

            &::before {
                top: 0;
                left: 50%;
                transform: rotate(45deg) translateX(-50%);
                margin-top: -1px;
            }
        }

        &.left-side {
            left: 0;
            top: 50%;
            transform: translateY(-50%) translateX(-100%) ;
            margin-left: -8px;

            &::before {
                top: 50%;
                right: 0;
                transform: translateY(-50%) rotate(45deg);
                margin-right: -3px;
            }
        }

        &.right-side {
            left: 100%;
            transform: translateY(-50%) ;
            top: 50%;
            margin-left: 8px;

            &::before {
                top: 50%;
                left: 0;
                transform: translateX(-50%) translateY(-50%) rotate(45deg);
            }
        }
    }

    &.range {
        .complete {
            width: 100%;
        }
    }

    &.thin {
        .backside, .complete, .buffer {
            height: 6px;
        }
    }
    &.ultra-thin {
        .backside, .complete, .buffer {
            height: 4px;
        }
        .marker {
            width: 12px;
            height: 12px;
        }
    }
    &.cycle-marker {
        .marker {
            border-radius: 50%;
        }
    }
}

.slider {
    &.vertical-slider {
        width: 2.125rem;
        height: 100px;

        .backside, .complete, .buffer, .marker {
            top: auto;
            left: 50%;
            transform: translateY(0) translateX(-50%);
        }

        .backside, .complete, .buffer {
            width: .5rem;
            bottom: 0;
        }

        .backside {
            height: 100%;
        }

        .buffer {
            width: .3rem;
        }

        .marker {
            top: 100%;
            transform: translateY(-100%) translateX(-50%);
        }

        &.hint {
            &.top-side {

            }
        }
    }
}

.slider {
    &.rounded {
        .backside, .complete, .buffer, .marker {
            border-radius: .25rem;
        }
    }
}

.slider {
    &.disabled {
        .marker {
            display: none;
        }
    }
}

.slider-min-max{
    display: block;
    position: relative;
    .clear();

    .slider-text-min, .slider-text-max {
        display: block;
    }

    .slider-text-min {
        float: left;
    }

    .slider-text-max {
        float: right;
    }
}