/* Modal: dialog */

dialog {
  display: flex;
  z-index: 999;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  width: inherit;
  min-width: 100%;
  height: inherit;
  min-height: 100%;
  padding: 0;
  border: 0;
  backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
  background-color: var(--pico-modal-overlay-background-color);
  color: var(--pico-color);

  /* The dialog card is a raised surface: menu color and shadow, no header and footer bands */
  > article {
    --pico-block-spacing-vertical: 1.5rem;
    --pico-block-spacing-horizontal: 1.5rem;
    --pico-card-background-color: var(--pico-dropdown-background-color);
    --pico-card-box-shadow: var(--pico-dropdown-box-shadow);
    --pico-card-sectioning-background-color: transparent;
    width: 100%;
    max-height: calc(100vh - var(--pico-spacing) * 2);
    margin: var(--pico-spacing);
    overflow: auto;
    border-radius: calc(var(--pico-card-border-radius) * 4 / 3);

    @media (width >= 576px) {
      max-width: 510px;
    }

    @media (width >= 768px) {
      max-width: 700px;
    }

    > header > * {
      margin-bottom: 0;
    }

    > header .close,
    > header :is(a, button)[rel="prev"] {
      margin: -0.25rem 0;
      margin-inline-start: var(--pico-spacing);
      padding: 0;
      /* Physical value first for browsers without float: inline-end */
      float: right;
      float: inline-end;
    }

    > footer {
      text-align: end;

      button,
      [role="button"] {
        width: auto;
        margin-bottom: 0;
      }

      /* Not nested under the list above, which would lower to :is() and raise the specificity */
      button:not(:first-of-type),
      [role="button"]:not(:first-of-type) {
        margin-inline-start: calc(var(--pico-spacing) * 0.5);
      }
    }

    .close,
    :is(a, button)[rel="prev"] {
      display: block;
      width: 2rem;
      height: 2rem;
      margin-top: calc(var(--pico-spacing) * -0.5);
      margin-bottom: calc(var(--pico-spacing) * 0.5);
      margin-inline-start: auto;
      padding: 0;
      border: none;
      border-radius: var(--pico-border-radius);
      background-image: var(--pico-icon-close);
      background-position: center;
      background-size: auto 1rem;
      background-repeat: no-repeat;
      background-color: transparent;
      box-shadow: none;
      opacity: 0.6;
      transition:
        opacity var(--pico-transition),
        background-color var(--pico-transition);
    }

    .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
    :is(a, button)[rel="prev"]:is(
        [aria-current]:not([aria-current="false"]),
        :hover,
        :active,
        :focus
      ) {
      background-color: color-mix(in oklab, var(--pico-color) 8%, transparent);
      opacity: 1;
    }
  }

  &:not([open]),
  &[open="false"] {
    display: none;
  }
}

/* Class based flow, JavaScript toggles these on html */
.modal-is-open {
  padding-right: var(--pico-scrollbar-width, 0px);
  overflow: hidden;
  pointer-events: none;
  touch-action: none;

  dialog {
    pointer-events: auto;
    touch-action: auto;
  }
}

:where(.modal-is-opening, .modal-is-closing) {
  dialog,
  dialog > article {
    animation-duration: 0.15s;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
    animation-fill-mode: both;
  }

  dialog {
    animation-duration: 0.2s;
    animation-name: modal-overlay;
  }

  dialog > article {
    animation-delay: 0.05s;
    animation-name: modal;
  }
}

.modal-is-closing {
  dialog,
  dialog > article {
    animation-delay: 0s;
    animation-direction: reverse;
  }
}

@keyframes modal-overlay {
  from {
    backdrop-filter: none;
    background-color: transparent;
  }
}

@keyframes modal {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
}

/*
 * Open and close transitions for plain showModal() and close().
 * Off while html has a .modal-is-* class, so the class flow above is
 * the only thing that animates there.
 */
@supports (transition-behavior: allow-discrete) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.modal-is-open, .modal-is-opening, .modal-is-closing) {
      dialog {
        transition:
          background-color 0.2s ease-out,
          backdrop-filter 0.2s ease-out,
          overlay 0.2s allow-discrete,
          display 0.2s allow-discrete;

        &:not([open]) {
          backdrop-filter: none;
          background-color: transparent;
        }

        > article {
          transition:
            transform 0.15s cubic-bezier(0.2, 0, 0, 1),
            opacity 0.15s cubic-bezier(0.2, 0, 0, 1);
        }

        &:not([open]) > article {
          transform: scale(0.96);
          opacity: 0;
        }
      }
    }

    @starting-style {
      html:not(.modal-is-open, .modal-is-opening, .modal-is-closing) dialog[open] {
        backdrop-filter: none;
        background-color: transparent;

        > article {
          transform: scale(0.96);
          opacity: 0;
        }
      }
    }
  }
}