.hogi-video-controls{--video-controls-content: var(--neutral-content);--video-controls-content-a90: var(--neutral-content-a90);display:var(--hogi-video-controls-display, flex);position:absolute;inset:auto 0 0;z-index:10;flex-direction:column;justify-content:flex-end;align-items:center;box-sizing:border-box;padding:calc(12px * var(--hogi-video-controls-inv-zoom, 1)) calc(10px * var(--hogi-video-controls-inv-zoom, 1));border-radius:0 0 var(--thumb-border-radius, 12px) var(--thumb-border-radius, 12px);height:calc(56px * var(--hogi-video-controls-inv-zoom, 1));background:transparent;pointer-events:auto;color:var(--video-controls-content-a90)}.hogi-video-controls-content{display:flex;flex-direction:column;gap:10px;width:calc(100% / var(--hogi-video-controls-inv-zoom, 1));transform:scale(var(--hogi-video-controls-inv-zoom, 1));transform-origin:left bottom}.hogi-video-controls-row,.hogi-video-controls-left,.hogi-video-controls-right{display:flex;align-items:center}.hogi-video-controls-row{justify-content:space-between;gap:8px;height:16px}.hogi-video-controls-left{gap:8px;min-width:0}.hogi-video-controls-right{flex-shrink:0;gap:12px}.hogi-video-control-button.hogi-video-control-button{display:flex;justify-content:center;align-items:center;flex-shrink:0;padding:0;border:none;border-radius:0;width:16px;min-width:16px;height:16px;background:transparent;color:var(--video-controls-content-a90);transition:color var(--motion-normal)}.hogi-video-control-button.hogi-video-control-button:hover:not(:disabled){background:transparent;color:var(--video-controls-content)}.hogi-video-control-button>svg{display:block;width:16px;height:16px}.hogi-video-controls-loader{animation:hogi-video-controls-spin 1s linear infinite}.hogi-video-controls-time{overflow:hidden;flex-shrink:1;-webkit-user-select:none;user-select:none;text-overflow:ellipsis;font-variant-numeric:tabular-nums;color:var(--neutral-overlay-inverse-strong);white-space:nowrap}.hogi-video-controls-current{color:var(--video-controls-content)}.hogi-video-controls-large{padding:16px;height:66px}.hogi-video-controls-large .hogi-video-controls-row{height:20px}.hogi-video-controls-large :is(.hogi-video-controls-left,.hogi-video-controls-right){gap:16px}.hogi-video-controls-large .hogi-video-control-button{width:20px;min-width:20px;height:20px}.hogi-video-controls-large .hogi-video-control-button>svg{width:20px;height:20px}.hogi-video-controls-progress{position:relative;flex-shrink:0;height:6px;cursor:pointer;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}.hogi-video-controls-track,.hogi-video-controls-band,.hogi-video-controls-fill{position:absolute;left:0;top:50%;border-radius:101px;height:2px;transform:translateY(-50%);transition:height .12s ease,background-color .12s ease}.hogi-video-controls-track{width:100%;background:var(--neutral-overlay-inverse-medium);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hogi-video-controls-band{z-index:1;background:var(--neutral-overlay-inverse-medium)}.hogi-video-controls-fill{z-index:2;background:var(--neutral-overlay-inverse-strong);opacity:.8}.hogi-video-controls-progress:hover :is(.hogi-video-controls-track,.hogi-video-controls-band,.hogi-video-controls-fill){height:6px}.hogi-video-controls-progress:hover .hogi-video-controls-fill{background:var(--neutral-overlay-inverse-stronger)}.hogi-video-controls-progress:has(:focus-visible){outline:2px solid var(--neutral-overlay-inverse-stronger);outline-offset:2px}.hogi-video-controls-progress input[type=range]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;margin:0;width:100%;height:6px;opacity:0;cursor:pointer}.hogi-video-controls-progress>div:has(>input[type=range]){position:absolute;top:0;right:0;bottom:0;left:0}@keyframes hogi-video-controls-spin{to{transform:rotate(360deg)}}:root[data-theme=light] .hogi-video-controls:not(:where(.hogi-media-dark *)){--video-controls-content: var(--neutral-content-inverse);--video-controls-content-a90: var(--neutral-content-inverse-a90)}
