autoplay-video {
  position: relative;
  display: block;
  cursor: pointer;
}

autoplay-video:focus-visible {
  border-radius: 8px;
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.autoplay-video-feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.78);
  opacity: 0;
  pointer-events: none;
  place-items: center;
  transform: translate(-50%, -50%) scale(0.82);
}

.autoplay-video-feedback::before {
  content: '';
  display: block;
  color: #fff;
}

.autoplay-video-feedback[data-action='play']::before {
  width: 26px;
  height: 30px;
  margin-left: 5px;
  background: currentcolor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.autoplay-video-feedback[data-action='pause']::before {
  width: 22px;
  height: 30px;
  border-right: 7px solid currentcolor;
  border-left: 7px solid currentcolor;
}

.autoplay-video-feedback.is-visible {
  animation: autoplay-video-feedback 500ms ease-out;
}

@keyframes autoplay-video-feedback {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .autoplay-video-feedback.is-visible {
    animation-name: autoplay-video-feedback-reduced-motion;
  }
}

@keyframes autoplay-video-feedback-reduced-motion {
  0%,
  80% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}