/* ================================
   Slider Prandiun
================================ */

/* Base */
.prandiun-range {
    height: 6px;
    cursor: pointer;
}

/* Track */
.prandiun-range::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(90deg,
            var(--color-primary) 0%,
            var(--color-primary-light) 100%);
    border-radius: 999px;
}

.prandiun-range::-moz-range-track {
    height: 6px;
    background: linear-gradient(90deg,
            var(--color-primary) 0%,
            var(--color-primary-light) 100%);
    border-radius: 999px;
}

/* Thumb */
.prandiun-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    margin-top: -6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    transition: transform .15s ease, box-shadow .15s ease;
}

.prandiun-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    transition: transform .15s ease, box-shadow .15s ease;
}

/* Hover / focus */
.prandiun-range:hover::-webkit-slider-thumb,
.prandiun-range:focus::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.prandiun-range:hover::-moz-range-thumb,
.prandiun-range:focus::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

/* Remove outline */
.prandiun-range:focus {
    outline: none;
}

.prandiun-number {
    text-align: center;
    font-weight: 500;
}