$slider-bg: #007bff;
$slider-bar-bg: #f0f0f0;
$slider-text-color: #000;

.slider-container {
    
    width: 200px;

    .slider-bar {
        width: 100%;
        height: 35px;
        background-color: $slider-bar-bg;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;

        &:hover {
            .fill {
                background-color: darken($slider-bg, 10%);
            }
        }

        &:active {
            .fill {
                background-color: darken($slider-bg, 20%);
            }
            sound-in: "button-click";
        }
    }

    gap: 5px;

    .fill {
        height: 100%;
        background-color: $slider-bg;
        pointer-events: none;
    }
    .value {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-shadow: none;
        font-family: "Roboto";
        font-size: 20px;
        color: $slider-text-color;
        pointer-events: none;
    }

    .slider-reset {
        padding: 5px;
        cursor: pointer;
        
        &:hover {
            color: yellow;
        }
    }
}