@use "../../common/utils" as *;
@use "../../common/mixins" as *;

.price-facet {
    &__slider {
        position: relative;
    }

    &__input {
        position: absolute;
        pointer-events: none;
        appearance: none;
        z-index: 20;
        height: calc-rem(10px);
        border: 1px solid blue;
        width: 100%;
        opacity: 0;
        cursor: pointer;
    }

    &__bar {
        position: relative;
        z-index: 10;
        height: calc-rem(10px);
        margin-top: calc-rem(10px);
        margin-bottom: calc-rem(20px);
        border-radius: calc-rem(10px);
    }

    &__bar-background {
        position: absolute;
        z-index: 10;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        border-radius: calc-rem(10px);
        background-color: rgba(var(--color-secondary), .4);
    }

    &__bar-active {
        position: absolute;
        z-index: 30;
        top: 0;
        bottom: 0;
        border-radius: calc-rem(10px);
        background-color: rgba(var(--color-secondary), 1);
        border: 1px solid rgba(var(--color-secondary), 1);
        margin-top: 0;
        height: calc-rem(10px);
    }

    &__handle {
        position: absolute;
        z-index: 40;
        top: 0;
        margin-top: calc-rem(-3px);
        width: calc-rem(16px);
        height: calc-rem(16px);
        border-radius: 9999%;
        background: rgba(var(--color-secondary), 1);
        border: 2px solid #fff;
        box-shadow: 0 0 3px rgba(0, 0, 0, .2);

        &--left {
            left: 0;
        }

        &--right {
            right: 0;
        }
    }

    &__form {
        display: flex;
        align-items: center;
        justify-content: space-between;

        input {
            height: calc-rem(40px);
            text-align: center;
            appearance: none;
            min-width: calc-rem(70px);
            width: calc-rem(100px);
            border-radius: calc-rem(5px);
            border: 1px solid rgba(var(--color-border), 1);
            font-size: calc-rem(14px);
            color: rgba(var(--color-secondary), 1);

            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }
    }

    input[type=range]::-webkit-slider-thumb {
        pointer-events: all;
        appearance: none;
        width: calc-rem(16px);
        height: calc-rem(16px);
        border-radius: 9999%;
        background: blue;
        border: 2px solid #000;
    }
}
