[data-component="video"] {
  position: relative;
  line-height: 0;
}

mux-player {
  --media-object-fit: cover;
  --media-object-position: center;
  --controls: none;
  [data-interacted] & { --controls: unset; }
}

mux-player::part(center play button) { display: none; }

mux-player, mux-player img, [slot="poster"], video {
  aspect-ratio: inherit;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-interacted] [data-video*="trigger"] { display: none; }

[data-video*="trigger"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: var(--spacing--sm);
  background-color: transparent;
  display: flex;
  align-items: end;
  justify-content: start;
  color: var(--_site-theme---video--primary-ui);

  &[data-video="trigger-play"] {
    background-color: oklch(from var(--_site-theme---video--overlay) l c h / var(--video-overlay-strength));
  }

  & > * {
    pointer-events: none;
  }
}

[data-video*="icon"] {
  background-color: oklch(from var(--_site-theme---video--overlay) l c h / var(--video-overlay-strength));
  backdrop-filter: blur(3px);
  border-radius: 100px;
  outline: solid 1px var(--_site-theme---video--primary-ui);
  flex-shrink: 1;
  flex-grow: 0;
  width: fit-content;
  height: fit-content;

  &[data-video="sound-icon"] {
    font-size: var(--paragraph-lg--font-size);
    padding: 0.75em;
    animation: iconPulse 1s linear infinite;
  }

  &[data-video="play-icon"] {
    font-size: var(--paragraph-xl--font-size);
    padding: 0.75em;
    margin-block: auto;
    margin-inline: auto;
  }
}

@keyframes iconPulse {
  0% { scale: 1; }
  50% { scale: 1.1; }
  100% { scale: 1; }
}