body.light-theme .audio-preview-visualization-wrapper{--audio-visualizer-low-color:#cecece;--audio-visualizer-high-color:black}body.dark-theme .audio-preview-visualization-wrapper{--audio-visualizer-low-color:#2e2e2e;--audio-visualizer-high-color:white}.audio-preview-visualization-wrapper{flex-grow:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.audio-preview-visualization-wrapper .audio-preview-icon{opacity:.6;z-index:1;font-size:8em;position:relative}.audio-preview-visualization-wrapper .audio-visualizer-canvas{z-index:0;pointer-events:none;width:100%;height:50%;position:absolute;bottom:0;left:0}.media-preview-controls{flex-direction:column;gap:.5em;padding:1.25em;display:flex}.media-preview-controls .media-buttons-row{display:flex}.media-preview-controls .media-buttons-row>*{flex:1;align-items:center;gap:.5em;display:flex}.media-preview-controls .media-buttons-row .spacer{width:var(--icon-button-size,32px);height:var(--icon-button-size,32px)}.media-preview-controls .media-buttons-row .center{justify-content:center}.media-preview-controls .media-buttons-row .right{justify-content:flex-end;display:flex}.media-preview-controls .media-buttons-row .play-button{--icon-button-size:48px}.media-preview-controls .media-seekbar-row{align-items:center;gap:.5em;display:flex}.media-preview-controls .media-seekbar-row .media-time{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.85em}.media-preview-controls .media-seekbar-row .media-trackbar{cursor:pointer;flex:1}.media-preview-controls .media-volume-row{align-items:center;gap:.25em;display:flex}.media-preview-controls .media-volume-row .media-volume-slider{cursor:pointer;width:80px}.media-preview-controls .speed-dropdown{position:relative}.media-preview-controls .speed-dropdown .tn-icon{transform:translateY(-10%)}.media-preview-controls .speed-dropdown .media-speed-label{text-align:center;font-variant-numeric:tabular-nums;font-size:.6rem;position:absolute;bottom:0;left:0;right:0;transform:translateY(15%)}.play-mode-dropdown .dropdown-item{align-items:center;gap:.6em;display:flex}.play-mode-dropdown .play-mode-check{margin-left:auto}.audio-preview-wrapper{flex-direction:column;width:100%;height:100%;display:flex}.media-compact .media-preview-controls{padding:.5em}.media-compact .media-compact-row{align-items:center;gap:.5em;display:flex}.media-compact .media-compact-row .play-button{--icon-button-size:36px}.media-compact .media-compact-row .media-seekbar-row{flex:1;min-width:0}.media-compact .media-compact-row .media-trackbar{min-width:0}.media-compact .media-compact-row .media-volume-row{flex-shrink:0}.media-compact .media-compact-row .waveform-canvas{height:28px}.audio-preview-wrapper.media-compact .audio-preview-visualization-wrapper{min-height:8rem}.audio-preview-wrapper.media-compact .audio-visualizer-canvas{width:calc(100% - 24px);height:calc(100% - 12px);left:12px}.waveform-seekbar{--waveform-played-color:var(--quick-search-result-highlight-color);--waveform-unplayed-color:#5a5a5a;--waveform-silence-color:#333}.waveform-seekbar .waveform-canvas{cursor:pointer;touch-action:none;border-radius:4px;flex:1;min-width:0;height:42px;display:block}.waveform-seekbar .waveform-canvas:focus-visible{outline:2px solid var(--waveform-played-color);outline-offset:2px}.media-proxy{--media-proxy-icon-size:6rem;justify-content:center;align-items:center;width:100%;height:100%;min-height:8rem;display:flex;position:relative;overflow:hidden}.media-proxy .media-proxy-icon{font-size:var(--media-proxy-icon-size);opacity:.15;position:absolute}.media-proxy .media-proxy-play{--icon-button-size:56px;position:relative}.video-preview-wrapper{background-color:#000;width:100%;height:100%;position:relative}.video-preview-wrapper .video-preview{background-color:#000;width:100%;height:100%;display:block}.video-preview-wrapper.controls-hidden{cursor:pointer}.video-preview-wrapper.controls-hidden .media-preview-controls,.video-preview-wrapper.controls-hidden .media-hint-button{opacity:0;pointer-events:none}.video-preview-wrapper .media-preview-controls{--icon-button-hover-color:white;--icon-button-hover-background:#fff3;opacity:1;backdrop-filter:blur(6px);color:#fff;background:#00000080;transition:opacity .3s;position:absolute;bottom:0;left:0;right:0}
