@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;


.slider-container {
    padding: 20px 0;
    width: 100%;
}

.slider {
    position: relative;
    width: 100%;
    height: 2px;

    &__track {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1px;
    }

    .thumb {
        position: absolute;
        width: 16px;
        height: 16px;
        cursor: grab;
        background: $secondaryColor;
        border-radius: 50%;
        outline: none;
        top: 50%;
        transform: translate(0, -50%);
        transition: box-shadow 0.2s ease;

        &:hover {
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

        &:active {
            cursor: grabbing;
        }

        // Remove default styling
        -webkit-appearance: none;
        pointer-events: all;

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: $secondaryColor;
            border: 2px solid $secondaryColor;
            cursor: grab;
            pointer-events: all;
        }

        &::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: $secondaryColor;
            border: 2px solid $secondaryColor;
            cursor: grab;
            pointer-events: all;
        }

        &--left {
            z-index: 3;
            margin-top: 5px;
        }

        &--right {
            z-index: 4;
            margin-top: 5px;
        }
    }
}

.multi-range {
    position: relative;
    // height: 50px;
    width: 100%;
    // padding: 24px 0;

    .bar-pattern {
        position: absolute;
        width: 100%;
        height: 100%;
        // background: repeating-linear-gradient(to right,
        //         rgba(255, 126, 103, 0.15) 0px 2px,
        //         transparent 2px 10px);
    }

    .slider-track {
        position: absolute;
        width: calc(100% - 30px);
        height: 2px;
        top: 48%;
        transform: translateY(-50%);
        text-align: center;
        margin-left: 15px;
        pointer-events: none;
        background: $secondaryColor !important;
    }

    .thumb {
        position: absolute;
        height: 2px;
        background-color: rgb(0 0 0 / 3%) !important;
        width: 100%;
        outline: none;
        background: none;
        pointer-events: none;
        -webkit-appearance: none;

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            pointer-events: all;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: $secondaryColor;
            cursor: grab;
            margin-top: 0px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.2s ease;

            &:hover {
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
            }

            &:active {
                cursor: grabbing;
            }
        }

        &::-moz-range-thumb {
            pointer-events: all;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: $secondaryColor;
            cursor: grab;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.2s ease;

            &:hover {
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
            }

            &:active {
                cursor: grabbing;
            }
        }

    }

    .thumb--left {
        z-index: 0;
        top: -1px;
        // margin-top: 5px;
    }

    .thumb--right {
        z-index: 0;
        top: -1px;
        // margin-top: 5px;
    }
}

.MainRangeBox {
    padding: 10px 0px 15px 0px;
    background: transparent;
    border-radius: 8px;
}