:root {
    --volume-slider-height: 8px;
    --volume-slider-fill-color: var(--highlight-bg-color-hover);
    --volume-slider-empty-color: #AAA;
}

.button-plugin-side-area.volume-button {
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

.button-plugin-container {
    height: 40px;
}

.volume-slider {
    width: 100px;
    height: 100%;
    display: flex;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.volume-slider .volume-slider-fill {
    height: var(--volume-slider-height);
    background-color: var(--volume-slider-fill-color);
    border-radius: 10px 0px 0px 10px;
    pointer-events: none;
}

.volume-slider .volume-slider-fill.fill-100 {
    border-radius: 10px 10px 10px 10px;
}

.volume-slider .volume-slider-empty {
    height: var(--volume-slider-height);
    background-color: var(--volume-slider-empty-color);
    border-radius: 0px 10px 10px 0px;
    pointer-events: none;
}

.volume-slider .volume-slider-empty.empty-100 {
    border-radius: 10px 10px 10px 10px;
}

@media (forced-colors: active) {
    .volume-slider {
        border: 4px solid white;
        box-sizing: border-box;
        margin-bottom: 3px;
    }

    .volume-slider .volume-slider-fill {
        border: 4px solid white;
        box-sizing: border-box;
    }

    .volume-slider .volume-slider-empty {
        border: 1px solid white;
        box-sizing: border-box;
    }
}