<style>
  :host {
    --_primary-color: var(--media-primary-color, #fff);
    --_secondary-color: var(--media-secondary-color, rgb(38 38 38 / 0.75));
    --_accent-color: var(--media-accent-color, #fff);
    --media-icon-color: var(--_primary-color);
    --media-control-background: #ccc;
    --media-control-hover-background: transparent;
    --media-control-height: 1.2em;
    --media-tooltip-display: none;
    image-rendering: pixelated;
    font-size: 16px;
    color: var(--_primary-color);
    container: media-theme-instaplay / inline-size;
    --_play-active-image: url('<%= await base64("./assets/play-active.png") %>');
    --_play-inactive-image: url('<%= await base64("./assets/play-inactive.png") %>');
    --_play-green-image: url('<%= await base64("./assets/play-green.png") %>');
    --_pause-active-image: url('<%= await base64("./assets/pause-active.png") %>');
    --_pause-inactive-image: url('<%= await base64("./assets/pause-inactive.png") %>');
    --_stop-active-image: url('<%= await base64("./assets/stop-active.png") %>');
    --_stop-inactive-image: url('<%= await base64("./assets/stop-inactive.png") %>');
    --_speaker-active-image: url('<%= await base64("./assets/speaker-active.png") %>');
    --_speaker-inactive-image: url('<%= await base64("./assets/speaker-inactive-2.png") %>');
    --_stop-green-image: url('<%= await base64("./assets/stop-green.png") %>');
    --_range-thumb-image: url('<%= await base64("./assets/range-thumb.png") %>');
    --_seek-image: url('<%= await base64("./assets/seek.png") %>');
    --_handle-image: url('<%= await base64("./assets/handle.png") %>');
    --_embossed: 0 -1px 0 0 #7b7b7b, /* Top part of top border */ 0 -2px 0 0 #000,
      /* Bottom part of top border */ -1px 0 0 0 #7b7b7b, /* Left border color */ 1px 0 0 0 white,
      /* Right border color */ 0 1px 0 0 white;
    /* Bottom border color */
  }

  .spacer {
    flex: 1;
  }

  media-controller {
    display: block;
    overflow: hidden;
  }

  div[slot='top-chrome'],
  media-control-bar {
    width: 100%;
  }

  media-control-bar {
    border-top: 1px solid #fff;
    box-shadow: 0 -1px 0 0 #7b7b7b;
  }

  media-control-bar {
    padding-left: 20px;
    background: #ccc 5px center var(--_handle-image) no-repeat;
  }

  media-time-range {
    width: 100%;
    --media-range-thumb-transform: translateX(-6px);
  }

  media-time-range[mediacurrenttime^='0'],
  media-time-range[mediacurrenttime^='1.'],
  media-time-range[mediacurrenttime^='2.'] {
    --media-range-thumb-transform: translateX(6px);
  }

  media-volume-range {
    --media-range-thumb-transform: translateX(-6px);
  }

  media-volume-range[mediavolume='0'],
  media-volume-range[mediavolume^='0.0'] {
    --media-range-thumb-transform: translateX(6px);
  }

  media-volume-range[mediavolume^='0.1'] {
    --media-range-thumb-transform: translateX(5px);
  }

  media-volume-range[mediavolume^='0.2'] {
    --media-range-thumb-transform: translateX(3px);
  }

  media-volume-range[mediavolume^='0.3'] {
    --media-range-thumb-transform: translateX(2px);
  }

  media-volume-range[mediavolume^='0.4'] {
    --media-range-thumb-transform: translateX(1px);
  }

  media-volume-range[mediavolume^='0.5'] {
    --media-range-thumb-transform: translateX(0px);
  }

  media-volume-range[mediavolume^='0.6'] {
    --media-range-thumb-transform: translateX(1px);
  }

  media-volume-range[mediavolume^='0.7'] {
    --media-range-thumb-transform: translateX(-2px);
  }

  media-volume-range[mediavolume^='0.8'] {
    --media-range-thumb-transform: translateX(-3px);
  }

  media-volume-range[mediavolume^='0.9'] {
    --media-range-thumb-transform: translateX(-4px);
  }

  media-volume-range,
  media-time-range {
    --media-range-track-background: linear-gradient(
          to right,
          #000 1px,
          transparent 1px,
          transparent 7px
        )
        7px 50% / 7px 3px repeat-x,
      #c6c6c6;

    --media-range-track-height: 13px;
    --media-range-track-border-radius: 0;
    --media-range-track-box-shadow: var(--_embossed);

    --media-range-thumb-transition: transform 0.1s;
    --media-range-thumb-background: 0 0 var(--_range-thumb-image);
    --media-range-thumb-width: 13px;
    --media-range-thumb-height: 13px;
    --media-range-bar-color: linear-gradient(to right, #000 1px, transparent 1px, transparent 7px)
        7px 50% / 7px 3px repeat-x,
      #008484;
    --media-range-thumb-border-radius: 0;
  }

  media-time-range::part(preview-box) {
    /* Add more space so thumb doesn't hide preview. */
    --media-preview-box-margin: 0 0 20px;
    display: grid;
  }

  media-time-range::part(appearance) {
    color: red;
  }

  media-preview-thumbnail,
  media-preview-time-display {
    grid-area: 1 / 1;
  }

  media-preview-time-display {
    place-self: end center;
    position: relative;
    line-height: 2;
  }

  media-play-button.play div[slot='play'] {
    width: 14px;
    height: 13px;
    background: 0 0 var(--_play-active-image);
  }

  media-play-button.play div[slot='pause'] {
    width: 14px;
    height: 13px;
    background: 0 0 var(--_play-inactive-image);
    cursor: not-allowed;
  }

  media-play-button.pause div[slot='play'] {
    width: 14px;
    height: 13px;
    background: 0 0 var(--_pause-inactive-image);
    cursor: not-allowed;
  }

  media-play-button.pause div[slot='pause'] {
    width: 14px;
    height: 13px;
    background: 0 0 var(--_pause-active-image);
  }

  media-play-button.stop div[slot='play'] {
    width: 14px;
    height: 13px;
    background: 0 0 var(--_stop-inactive-image);
    cursor: not-allowed;
  }

  media-play-button.stop div[slot='pause'] {
    width: 14px;
    height: 13px;
    background: 0 0 var(--_stop-active-image);
  }

  media-play-button.status {
    background-color: #000;
    margin-right: 3px;
    --media-button-padding: 1px;
  }

  media-play-button.status div[slot='play'] {
    width: 13px;
    height: 13px;
    background: 0 0 var(--_stop-green-image) no-repeat;
  }

  media-play-button.status div[slot='pause'] {
    width: 13px;
    height: 13px;
    background: 0 0 var(--_play-green-image);
  }

  media-seek-backward-button,
  media-seek-forward-button {
    --media-button-padding: 0;
  }

  media-seek-backward-button span[slot='icon'] {
    width: 4px;
    height: 7px;
    background: 0 0 var(--_seek-image);
  }

  media-seek-forward-button span[slot='icon'] {
    width: 4px;
    height: 7px;
    background: 0 0 var(--_seek-image);
    transform: rotate(180deg);
  }

  media-mute-button span[slot='off'] {
    width: 11px;
    height: 16px;
    background: 0 0 var(--_speaker-inactive-image);
  }

  media-mute-button span[slot='low'],
  media-mute-button span[slot='medium'],
  media-mute-button span[slot='high'] {
    width: 11px;
    height: 16px;
    background: 0 0 var(--_speaker-active-image);
  }

  media-time-display {
    background: black;
    color: #00ff00;
    --media-font-family: monaco;
    --media-font-weight: 300;
    --media-font-size: 13px;
    --media-control-padding: 0;
  }

  .bottom-bar {
    border-top: 1px solid #fff; /* Top pixel color */
    box-shadow: 0 -1px 0 0 #7b7b7b; /* Bottom pixel color */
    background: #ccc 5px center var(--_handle-image) no-repeat;
    width: 100%;
    padding: 4px 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    gap: 3px;
    font-family: monaco;
  }

  .bottom-bar > div {
    background: black;
    padding: 5px;
    align-self: stretch;
    box-shadow: var(--_embossed);
    color: #00ff00;
    font-size: 13px;
    display: flex;
    align-items: center;
  }

  .bottom-bar a {
    color: #00ff00;
  }

  .top-bar {
    font-family: monaco, sans-serif;
    height: 18px;
    width: 100%;
    background: linear-gradient(to right, #000084, #0884ce);
    color: #fff;
    line-height: 1;
    font-size: 11px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    box-sizing: border-box;
  }
</style>

<media-controller
  defaultsubtitles="{{defaultsubtitles}}"
  defaultduration="{{defaultduration}}"
  gesturesdisabled="{{disabled}}"
  hotkeys="{{hotkeys}}"
  nohotkeys="{{nohotkeys}}"
  defaultstreamtype="on-demand"
>
  <media-error-dialog slot="dialog"></media-error-dialog>

  <div slot="top-chrome">
    <div class="top-bar">
      <span>ReelPlay: Welcome!</span>
    </div>

    <media-control-bar>
      <media-play-button class="play" mediacontroller="controller">
        <div slot="play"></div>
        <div slot="pause"></div>
      </media-play-button>

      <media-play-button class="pause" mediacontroller="controller">
        <div slot="play"></div>
        <div slot="pause"></div>
      </media-play-button>

      <media-play-button class="stop" mediacontroller="controller">
        <div slot="play"></div>
        <div slot="pause"></div>
      </media-play-button>

      <media-seek-backward-button>
        <span slot="icon"></span>
      </media-seek-backward-button>

      <media-time-range noautohide>
        <media-preview-thumbnail slot="preview"></media-preview-thumbnail>
        <media-preview-time-display slot="preview"></media-preview-time-display>
      </media-time-range>

      <media-seek-forward-button>
        <span slot="icon"></span>
      </media-seek-forward-button>

      <div class="spacer"></div>
      <media-mute-button>
        <span slot="high"></span>
        <span slot="medium"></span>
        <span slot="low"></span>
        <span slot="off"></span>
      </media-mute-button>
      <media-volume-range></media-volume-range>
    </media-control-bar>
  </div>

  <div class="bottom-bar">
    <div>
      <media-play-button class="status" mediacontroller="controller">
        <div slot="play"></div>
        <div slot="pause"></div>
      </media-play-button>
      <span>32.1 Kbps</span>
    </div>

    <div>
      <media-time-display showduration></media-time-display>
    </div>

    <div>
      <span>Theme by @davekiss</span>
    </div>
    <div>
      <span>Powered by <a href="https://mux.com" title="Mux">Mux</a></span>
    </div>
  </div>
  <slot name="media" slot="media"></slot>
  <slot name="poster" slot="poster"></slot>

  <slot></slot>
</media-controller>
