/**
 * Automatic video modal component styles
 */

/* ---------- Video link ---------- */

/* Thumbnail play button */
a.video-modal-link:has(img) {
  position: relative;
  display: block;
  max-inline-size: fit-content;

  /* Icon */
  &::after {
    content: "" / "Play";
    display: block;
    position: absolute;
    z-index: 1;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    block-size: 64px;
    inline-size: 64px;
    background-color: rgb(0 0 0 / 0.15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM384 256L176 384V128L384 256z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 50% 50%;
    opacity: 0.85;
    border-radius: 100%;
    box-shadow: 0 0 2px rgb(0 0 0 / 0.1);
    transition: scale 200ms ease-out,
                opacity 200ms ease-out;
  }
  &:hover::after {
    opacity: 0.95;
    scale: 1.15;
  }

  /* Auto-generated thumbnail image: Show in 16×9 ratio */
  img.auto-thumb {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

.card-image a.video-modal-link:has(img) {
  position: unset;
}


/* ---------- Video modal ---------- */

.dwn-modal.modal-video {
  --modal-max-fixed-block-size: 1280px;
  --modal-max-fixed-inline-size: 1280px;

  /* Allow alternate ratio */
  aspect-ratio: var(--aspect-ratio, 16 / 9);
  inline-size: 100%;
  background: black;
  color: white;
}