.media-video{position:relative}.media-video video{width:100%;height:100%;display:block}.media-video{-webkit-tap-highlight-color:transparent}.media-video:focus:not(:focus-visible){outline:none}.media-video:active .media-video-controls,.media-video:focus-visible .media-video-controls,.media-video:hover .media-video-controls{opacity:1}.media-video-controls{--controls-color:var(--color-charcoal);color:var(--controls-color);opacity:0;z-index:2;align-items:center;gap:.125rem;padding:.75rem 1rem;transition:opacity .3s;display:flex;position:absolute}.media-video-controls>*{flex:auto}.media-video-controls.center{gap:.75rem;width:100%;padding-left:.25rem;bottom:0;left:0}.media-video-controls.center .media-video-slider{display:flex}.media-video-controls.top-left,.media-video-controls.top-right{top:0}.media-video-controls.bottom-left,.media-video-controls.bottom-right{bottom:0}.media-video-controls.bottom-left,.media-video-controls.top-left{left:0}.media-video-controls.bottom-right,.media-video-controls.top-right{right:0}.media-video-controls.variant-inverse{--controls-color:var(--color-white)}.media-video-controls label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.media-video-controls input[type=range]{appearance:none;cursor:pointer;opacity:.4;-webkit-tap-highlight-color:transparent;background:currentColor;width:100%;height:.25rem;transition:opacity .3s}.media-video-controls input[type=range]:focus:not(:focus-visible){outline:none}.media-video-controls input[type=range]:active,.media-video-controls input[type=range]:focus-visible,.media-video-controls input[type=range]:hover{opacity:.7}.media-video-controls input[type=range]::-webkit-slider-thumb{box-shadow:none;-webkit-appearance:none;background:#fff;border:none;outline:none;width:5px;height:15px}.media-video-controls button{opacity:.4;padding:.25rem;transition:transform .3s,opacity .3s}.media-video-controls button svg{padding:.1875rem;display:block}.media-video-controls button{-webkit-tap-highlight-color:transparent}.media-video-controls button:focus:not(:focus-visible){outline:none}.media-video-controls button:active,.media-video-controls button:focus-visible,.media-video-controls button:hover{opacity:.7;transform:scale(1.1)}.media-video-controls button .icon-on{display:none}.media-video-controls button .icon-off,.media-video-controls button.on .icon-on{display:block}.media-video-controls button.on .icon-off{display:none}.media-video-controls .media-video-slider{align-items:center;display:none}.media-video-controls .media-video-slider.progress{width:100%}.media-video-controls .media-video-slider.volume{flex-shrink:0;width:5rem}