/* Style for the wind arrow */
#wind-arrow {
    transform-origin: center;
}

/* Hides the default thumb across browsers */
input[type="range"].custom-slider-track::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    background: transparent;
    border: none;
}

input[type="range"].custom-slider-track::-moz-range-thumb {
    width: 0;
    height: 0;
    background: transparent;
    border: none;
}

/* Add the gradient colors for the slider track */
.custom-slider-track::-webkit-slider-runnable-track {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            #2c3e50 0%,
            /* Night */
            #f39c12 25%,
            /* Sunrise/Sunset */
            #f1c40f 50%,
            /* Day */
            #f39c12 75%,
            /* Sunrise/Sunset */
            #2c3e50 100%
            /* Night */
        );
    border-radius: 9999px;
    /* opacity is already handled by the 'opacity-60' class on the input */
}

.custom-slider-track::-moz-range-track {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right,
            #2c3e50 0%,
            #f39c12 25%,
            #f1c40f 50%,
            #f39c12 75%,
            #2c3e50 100%);
    border-radius: 9999px;
    /* opacity is already handled by the 'opacity-60' class on the input */
}