/**
 * DWN content, video, and image modal styles
 */

/* ---------- Dialog element ---------- */

.dwn-modal {
  --close-button-size: 28px;
  --icon-close: url("data:image/svg+xml,%3Csvg viewBox='0 0 31 31' width='30' height='30' fill='none' stroke='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke-linecap='round' stroke-width='4' transform='translate(2 2)'%3E%3Cpath d='m0 27 27-27' transform='matrix(-1 0 0 1 27 0)'/%3E%3Cpath d='m0 27 27-27'/%3E%3C/g%3E%3C/svg%3E");

  --modal-max-fixed-block-size: 800px;
  --modal-max-fixed-inline-size: 800px;

  /* Portrait orientation */
  --modal-max-block-size: min(100dvh - var(--close-button-size) * 4, var(--modal-max-fixed-block-size));
  --modal-max-inline-size: min(100dvw - 2rem, var(--modal-max-fixed-inline-size));

  max-block-size: var(--modal-max-block-size);
  max-inline-size: var(--modal-max-inline-size);
  padding: 0;
  border: none;
  background: var(--color-background, white);
  color: var(--color-text, black);
  box-shadow: 0 0 0.5rem 0.1rem rgb(0 0 0 / 0.25);
  overflow: visible;
}

@media (orientation: landscape) {
  /* Push away from close button */
  .dwn-modal {
    --modal-max-block-size: min(100dvh - 2rem, var(--modal-max-fixed-block-size));
    --modal-max-inline-size: min(100dvw - var(--close-button-size) * 4, var(--modal-max-fixed-inline-size));
  }
}

/* Backdrop */
.dwn-modal::backdrop {
  background: rgb(0 0 0 / 0.8);
  backdrop-filter: blur(2px);
}


/* Fade animation */
@keyframes modal-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Slide animation */
  @keyframes modal-show {
    from {
      transform: translateY(20dvh);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes modal-hide {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(20dvh);
      opacity: 0;
    }
  }
}

/* Show dialog */
.dwn-modal[open] {
  animation: modal-show 300ms ease-out;
}
.dwn-modal[open]::backdrop {
  animation: fadein 300ms ease-out;
}

/* Animation before hiding */
.dwn-modal.modal-close {
  animation: modal-hide 200ms ease-in;
}
.dwn-modal.modal-close::backdrop {
  animation: fadeout 200ms ease-in;
}


/* ---------- Close button ---------- */

.dwn-modal > .close-button {
  -webkit-appearance: none;
  appearance: none;
  display: block;

  position: absolute;

  /* Portrait */
  top: calc(var(--close-button-size) * -1.5);
  right: 0;

  inline-size: var(--close-button-size);
  block-size: var(--close-button-size);
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  background: transparent;
}

@media (orientation: landscape) {
  .dwn-modal > .close-button {
    /* Move to right edge on landscape */
    top: 0;
    right: calc(var(--close-button-size) * -1.5);
  }
}

.dwn-modal > .close-button::after {
  /* Use ::after so focus ring does not get hidden by mask */
  content: "" / "Close";
  display: block;
  block-size: 100%;
  inline-size: 100%;

  background-color: var(--gray-3); /* Use mask to change color on hover */
	-webkit-mask: var(--icon-close) no-repeat 0 50% / 100% auto;
	mask: var(--icon-close) no-repeat 0 50% / 100% auto;
  transition: background-color 200ms;
}

.dwn-modal > .close-button:is(:hover, :active, :focus-visible)::after {
  background-color: var(--white);
}


/* ---------- Contents ---------- */

/* ----- Single iframe ----- */

.dwn-modal > iframe {
  --aspect-ratio: 16 / 9;

  display: block;
  block-size: 100%;
  max-block-size: none;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  border: none;
}


/* ----- Single image ----- */

.dwn-modal.modal-image {
  background-color: transparent;
}

.dwn-modal.modal-image a {
  display: block;
}
.dwn-modal.modal-image a:focus-visible {
  outline: none;
}

.dwn-modal.modal-image img {
  max-block-size: var(--modal-max-block-size);
  max-inline-size: var(--modal-max-inline-size);
  inline-size: auto;
}


/* ----- Content area ----- */

/* Set modal size */
.dwn-modal:has(.modal-content) {
  --modal-block-size: 68dvh;
  --modal-inline-size: 72dvw;

  block-size: var(--modal-block-size, 75vh);
  inline-size: var(--modal-inline-size, 75vw);
}

@media (max-width: 1023px) and (orientation: landscape) {
  .dwn-modal:has(.modal-content) {
    --modal-block-size: 64dvh;
    --modal-inline-size: 75dvw;
  }
}
@media (max-width: 1023px) and (orientation: portrait) {
  .dwn-modal:has(.modal-content) {
    --modal-block-size: 64dvh;
    --modal-inline-size: 72dvw;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .dwn-modal:has(.modal-content) {
    --modal-block-size: 72dvh;
    --modal-inline-size: 80dvw;
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  .dwn-modal:has(.modal-content) {
    --modal-block-size: 68dvh;
    --modal-inline-size: 80dvw;
  }
}

.dwn-modal .modal-content {
  --modal-padding: clamp(1.5rem, 4vw, 2rem);
  block-size: calc(100% - var(--modal-padding) * 2);
  inline-size: calc(100% - var(--modal-padding) * 2);
  overflow-x: visible;
  overflow-y: auto;
  padding: var(--modal-padding);
  margin-trim: block-end;
}

.dwn-modal .modal-content:focus-visible {
  outline: none; /* Hide focus ring */
}

.dwn-modal .modal-content > *:last-child,
.dwn-modal .modal-content > *:last-child > *:last-child {
  margin-block-end: 0;
}