.videoPlayer {
  position: relative;
  width: 100%;
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;

  &.inline {
    border-radius: var(--Corner-Radius-md);
    overflow: hidden;
  }

  &.hero {
    height: 100%;

    .overlay {
      display: contents;
    }
    .playButton {
      position: absolute;
      bottom: var(--Space-x2);
      right: var(--Space-x2);
    }
  }

  &.hasOverlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(31, 28, 27, 0.25) 48.08%,
      rgba(31, 28, 27, 0.8) 100%
    );
  }

  &.hasError .video {
    aspect-ratio: 16 / 9;
  }
}

.video {
  width: 100%;
  height: 100%;

  &:not(:fullscreen) {
    object-fit: cover;
  }
}

.playButton {
  position: absolute;
  z-index: 1;
}

.muteButton {
  position: absolute;
  top: var(--Space-x2);
  right: var(--Space-x2);
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .videoPlayer {
    &.hero .playButton {
      bottom: var(--Space-x4);
      right: var(--Space-x4);
    }

    &.hasOverlay::after {
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(31, 28, 27, 0.25) 53.8%,
        rgba(31, 28, 27, 0.74) 97.6%
      );
    }
  }
}