@layer components {
  .video {
    --video-play-btn-size: 2.5rem;
    --video-play-btn-icon-size: 1rem;
    --video-poster-transition-duration: 400ms;
  }
  @media (min-width: 1024px) {
    .video {
      --video-play-btn-size: 3.5rem;
      --video-play-btn-icon-size: 1.5rem;
    }
  }
  .video {
    position: relative;
    overflow: hidden;
    border-radius: var(--video-radius, 0);
    width: 100%;
    background-color: var(--theme-surface-primary);
  }
  .video--ratio-16-9 {
    aspect-ratio: 16/9;
  }
  .video--ratio-4-3 {
    aspect-ratio: 4/3;
  }
  .video--ratio-1-1 {
    aspect-ratio: 1/1;
  }
  .video--background .video__player {
    pointer-events: none;
  }
  .video--standard .video__player {
    pointer-events: auto;
  }
  .video__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .video__poster {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video__poster picture,
  .video__poster img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .video__poster[data-visible=false] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .video__play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--video-play-btn-size);
    height: var(--video-play-btn-size);
    min-height: 0;
    padding: 0;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-property: opacity, visibility, background-color, transform;
    transition-duration: var(--video-poster-transition-duration);
  }
  .video__play-btn .icon {
    position: absolute;
    width: var(--video-play-btn-icon-size);
    height: var(--video-play-btn-icon-size);
  }
  .video__play-btn[data-visible=false] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .video__play-btn:hover {
    transform: scale(1.02);
  }
  .video__play-btn:active {
    transform: scale(0.98);
  }
  .video__play-btn.focus, .video__play-btn:focus-visible {
    outline: 0.125rem solid var(--theme-focus-primary);
    outline-offset: 0.25rem;
  }
  .video__control-btn {
    position: absolute;
    z-index: 10;
  }
  .video__control-btn[data-placement=top-right] {
    top: 1.5rem;
    right: 1.5rem;
  }
  .video__control-btn[data-placement=top-left] {
    top: 1.5rem;
    left: 1.5rem;
  }
  .video__control-btn[data-placement=bottom-right] {
    bottom: 1.5rem;
    right: 1.5rem;
  }
  .video__control-btn[data-placement=bottom-left] {
    bottom: 1.5rem;
    left: 1.5rem;
  }
  .video__control-btn[data-placement=top-right-inset] {
    top: 1.5rem;
    right: 3rem;
  }
  @media (min-width: 1024px) {
    .video__control-btn[data-placement=top-right-inset] {
      right: 5rem;
    }
  }
  .video__control-btn[data-placement=top-left-inset] {
    top: 1.5rem;
    left: 3rem;
  }
  @media (min-width: 1024px) {
    .video__control-btn[data-placement=top-left-inset] {
      left: 5rem;
    }
  }
  .video__control-btn[data-placement=bottom-right-inset] {
    bottom: 1.5rem;
    right: 3rem;
  }
  @media (min-width: 1024px) {
    .video__control-btn[data-placement=bottom-right-inset] {
      right: 5rem;
    }
  }
  .video__control-btn[data-placement=bottom-left-inset] {
    bottom: 1.5rem;
    left: 3rem;
  }
  @media (min-width: 1024px) {
    .video__control-btn[data-placement=bottom-left-inset] {
      left: 5rem;
    }
  }
  .video--error .video__player {
    display: none;
  }
  .video--error .video__play-btn {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .video__poster {
      transition-duration: 0ms;
    }
    .video__play-btn {
      transition-duration: 0ms;
    }
    .video__play-btn:hover {
      transform: none;
    }
    .video__control-btn {
      display: none;
    }
  }
  @media (forced-colors: active) {
    .video__play-btn {
      border: 2px solid ButtonText;
      background: ButtonFace;
    }
    .video__play-btn .icon {
      background-color: ButtonText;
    }
    .video__play-btn:hover {
      background: Highlight;
    }
  }
}