@layer component {
  .paragraph--video {
    position: relative;
    box-shadow: 0 0 10px 0 var(--color-shadow-100);
    margin-block: var(--layout-component-block-space);

    & video {
      display: block;
      max-inline-size: 100%;
      height: auto;
      margin-inline: auto;
    }

    & .video__controls {
      position: absolute;
      inset-inline-end: 1rem;
      inset-block-end: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    & button {
      background-color: var(--gray-50);
      border-radius: 50%;
      inline-size: 2.125rem;
      block-size: 2.125rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0.5;
      position: relative;
      padding: 0.25rem;
    }

    & button:hover,
    & button:focus-visible {
      background-color: var(--gray-100);
      opacity: 1;
    }

    /* Play/pause toggle hidden for most users. */
    & button.video__play {
      display: none;
    }

    /* Pause "icon" */
    & .video__play:not(.active) > .icon::before,
    & .video__play:not(.active) > .icon::after {
      content: '';
      display: inline-block;
      border: none;
      background-color: var(--gray-600);
      inline-size: 0.25rem;
      block-size: 1.5rem;
    }

    /* Play "icon" */
    & .video__play.active > .icon::before {
      content: '';
      display: inline-block;
      border-style: solid;
      border-width: 0.625rem 0 0.625rem 1rem;
      border-color: transparent transparent transparent var(--gray-600);
      margin-inline-start: 0.125rem;
    }
    & .video__play.active > .icon::after {
      content: none;
    }
  }

  .paragraph--video .video__mute.active {
    &::before,
    &::after {
      content: '';
      display: inline-block;
      inline-size: 100%;
      block-size: 4px;
      background-color: var(--color-ui-error-dark);
      position: absolute;
      top: calc(50% - 3px);
      left: 0;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }
  }

  @media screen and (min-width: 48rem) {
    .paragraph--video .video__controls {
      inset-inline-end: 1.875rem;
      inset-block-end: 1.75rem;

      & > button {
        inline-size: 3.75rem;
        block-size: 3.75rem;
        padding: 0;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Play/pause button displayed for users who prefer reduced motion. */
    .paragraph--video button.video__play {
      display: block;

      & > .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.375rem;
      }
    }
  }
}