:host { font: var(--media-font,
          var(--media-font-weight, normal)
          var(--media-font-size, 14px) /
          var(--media-text-content-height, var(--media-control-height, 24px))
          var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif)); color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238))); background: var(--media-text-background, var(--media-control-background, var(--media-secondary-color, rgb(20 20 30 / .7)))); padding: var(--media-control-padding, 10px); display: var(--media-control-display, var(--media-time-display-display, inline-flex)); justify-content: center; align-items: center; vertical-align: middle; box-sizing: border-box; text-align: center; pointer-events: auto; }
:host(:focus-visible) { box-shadow: rgba(27, 127, 204, 0.9) 0px 0px 0px 2px inset; outline: 0px; }
:host(:where(:focus)) { box-shadow: none; outline: 0px; }
:host(:hover:not([notoggle])) { cursor: var(--media-cursor, pointer); background: var(--media-control-hover-background, rgba(50 50 70 / .7)); }