/* Sound Wing: a tapered level indicator on the native linear volume slider. */
#vesper-player .volume-slider{--sound-color:var(--accent);--wing-fill:var(--media-slider-fill,100%);position:relative;width:54px;height:44px;min-height:44px;margin-right:7px}
#vesper-player .volume-slider[data-dragging]{--wing-fill:var(--media-slider-pointer,0%)}
#vesper-player .volume-slider .slider-track{visibility:hidden}
#vesper-player .volume-wing{position:absolute;inset:0;pointer-events:none;color:var(--sound-color)}
#vesper-player .volume-wing>svg{opacity:.22}
#vesper-player .volume-wing svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
#vesper-player .volume-wing>span{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--wing-fill)) 0 0)}
#vesper-player .volume-wing>span>svg{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--sound-color) 15%,transparent))}
#vesper-player .volume-slider .slider-thumb{left:var(--wing-fill);top:50%;width:5px;height:20px;translate:-50% -50%;transform:none;border-radius:4px;border:1px solid #bdd9ec99;background:linear-gradient(90deg,#adcff080,#cee6fa99,#6fa1c480);box-shadow:0 1px 5px #0005}
#vesper-player .volume-level{position:absolute;left:var(--wing-fill);bottom:calc(100% - 1px);translate:-50% 0;z-index:5;padding:5px 7px;min-width:34px;border-radius:7px;background:var(--panel);border:1px solid #bbd8eb30;color:var(--white);font-size:10px;line-height:1.2;text-align:center;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none}
#vesper-player .volume-slider:is(:hover,:focus-within,[data-dragging]) .volume-level{opacity:1;visibility:visible}
@container film (min-width:760px){#vesper-player .workspace:is([data-dock=bottom],[data-dock=top]) .volume-slider{display:block}}
#vesper-player .workspace.tv-mode .volume-slider{display:none}
#vesper-player .volume-slider[hidden],#vesper-player .volume-slider[data-hidden]{display:none!important}
#vesper-player .workspace.higher-contrast .volume-wing>span>svg{filter:none}
@media(prefers-contrast:more),(forced-colors:active){
 #vesper-player .volume-wing{display:none}
 #vesper-player .volume-slider .slider-track{visibility:visible}
 #vesper-player .volume-slider .slider-thumb{background:Highlight;border-color:Highlight;box-shadow:none}
 #vesper-player .volume-level{color:CanvasText;background:Canvas;border-color:CanvasText}
}