/* Range Slide Area Style
============================================*/
.price-slider {
    ::selection {
        color: $white;
        background: #17a2b8;
    }
    .field {
        input {
            width: 33px;
            height: 20px;;
            outline: none;
            font-size: 14px;
            margin-left: 0;
            border-radius: 5px;
            text-align: center;
            border: none;
            -moz-appearance: textfield;
            display: inline;
            padding: 0;
            height: 20px;
        }
    }
    input[type="number"] {
        &::-webkit-outer-spin-button {
            -webkit-appearance: none;
        }
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    }
    .slider {
        height: 5px;
        position: relative;
        background: #f8f8fb;
        border-radius: 0;
        .progress {
            height: 100%;
            left: 25%;
            right: 25%;
            position: absolute;
            border-radius: 0;
            background: $primary;
        }
    }
    .range-input {
        position: relative;
        input {
            position: absolute;
            width: 100%;
            height: 5px;
            top: -5px;
            background: none;
            pointer-events: none;
            -webkit-appearance: none;
            -moz-appearance: none;
        }
    }
    input[type="range"] {
        &::-webkit-slider-thumb {
            height: 10px;
            width: 10px;
            border-radius: 0;
            background: $primary;
            pointer-events: auto;
            -webkit-appearance: none;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
            cursor: pointer;
        }
        &::-moz-range-thumb {
            height: 10px;
            width: 10px;
            border: none;
            border-radius: 50%;
            background: $primary;
            pointer-events: auto;
            -moz-appearance: none;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
            cursor: pointer;
        }
    }
}

/* 
Dark Mode SCSS 
===================================================*/
[data-theme=dark] {
    .price-slider .slider {
        background-color: $dark-body-bg;
    }
}