/* Custom play/pause overlay for videos inside rich text. */

.rich-text-data video {
  position: relative;
}

.video-toggle {
  position: absolute;
  top: 52.2%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  padding: 0;
  cursor: pointer;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border: none;
  box-shadow: none;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}

.video-toggle:hover {
  background-color: transparent;
}

.video-toggle:focus-visible {
  outline: none;
}

.video-toggle svg {
  display: block;
  width: 62px;
  height: 62px;
  @media (max-width: 767px) {
    width: 48px;
    height: 48px;
  }
}

/* Play is the default state; pause replaces it while the video plays. */
.video-toggle-icon--pause {
  display: none;
}

.video-toggle.is-playing .video-toggle-icon--play {
  display: none;
}

.video-toggle.is-playing .video-toggle-icon--pause {
  display: block;
}

/* While playing, hide the toggle and show it again only on hover over the video. */
.video-toggle.is-playing {
  opacity: 0;
  pointer-events: none;
}

.rich-text-data video:hover + .video-toggle.is-playing,
.rich-text-data video:focus-visible + .video-toggle.is-playing,
.video-toggle.is-playing:hover,
.video-toggle.is-playing:focus-visible {
  opacity: 1;
  pointer-events: auto;
}