: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))); --_menu-bg: rgb(20 20 30 / .8); background: var(--media-menu-background, var(--media-control-background, var(--media-secondary-color, var(--_menu-bg)))); border-radius: var(--media-menu-border-radius); border: var(--media-menu-border, none); visibility: var(--media-menu-visibility, visible); opacity: var(--media-menu-opacity, 1); max-height: var(--media-menu-max-height, var(--_menu-max-height, 300px)); transform: var(--media-menu-transform-in, translateY(0) scale(1)); flex-direction: column; min-height: 0px; position: relative; bottom: var(--_menu-bottom); box-sizing: border-box; display: var(--media-menu-display, inline-flex) !important; transition: var(--media-menu-transition-in,
          visibility 0s,
          opacity .2s ease-out,
          transform .15s ease-out,
          left .2s ease-in-out,
          min-width .2s ease-in-out,
          min-height .2s ease-in-out
        ) !important; }
:host([hidden]) { visibility: var(--media-menu-hidden-visibility, hidden); opacity: var(--media-menu-hidden-opacity, 0); max-height: var(--media-menu-hidden-max-height,
          var(--media-menu-max-height, var(--_menu-max-height, 300px))); transform: var(--media-menu-transform-out, translateY(2px) scale(.99)); pointer-events: none; transition: var(--media-menu-transition-out,
          visibility .15s ease-in,
          opacity .15s ease-in,
          transform .15s ease-in
        ) !important; }
:host([slot="submenu"]) { background: none; width: 100%; min-height: 100%; position: absolute; bottom: 0px; right: -100%; }
#container { display: flex; flex-direction: column; min-height: 0px; transition: transform 0.2s ease-out; transform: translate(0px, 0px); }
#container.has-expanded { transition: transform 0.2s ease-in; transform: translate(-100%, 0px); }
button { background: none; color: inherit; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; font: inherit; outline: inherit; display: inline-flex; align-items: center; }
slot[name="header"][hidden] { display: none; }
slot[name="header"] > *, slot[name="header"]::slotted(*) { padding: 0.4em 0.7em; border-bottom: 1px solid rgba(255, 255, 255, 0.25); cursor: var(--media-cursor, default); }
slot[name="header"] > button[part~="back"], slot[name="header"]::slotted(button[part~="back"]) { cursor: var(--media-cursor, pointer); }
svg[part~="back"] { height: var(--media-menu-icon-height, var(--media-control-height, 24px)); fill: var(--media-icon-color, var(--media-primary-color, rgb(238 238 238))); display: block; margin-right: 0.5ch; }
slot:not([name]) { gap: var(--media-menu-gap); flex-direction: var(--media-menu-flex-direction, column); overflow: var(--media-menu-overflow, hidden auto); display: flex; min-height: 0px; }
:host([role="menu"]) slot:not([name]) { padding-block: 0.4em; }
slot:not([name])::slotted([role="menu"]) { background: none; }
media-chrome-menu-item > span { margin-right: 0.5ch; max-width: var(--media-menu-item-max-width); text-overflow: ellipsis; overflow: hidden; }
:host { }