@layer components {
  .modal {
    align-items: center;
    background: none;
    border: none;
    display: none;
    height: 100%;
    left: 0;
    margin: 0;
    overflow: auto;
    padding: var(--space-md);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
  }

  .modal[open] {
    display: grid;
  }

  .modal:modal {
    max-height: none;
    max-width: none;
  }

  .modal::backdrop {
    background: none;
  }

  .modal__backdrop {
    backdrop-filter: blur(0.7em);
    background: rgb(0 0 0 / 40%);
    inset: 0;
    position: fixed;
    user-select: none;
  }

  .modal__container {
    display: grid;
    position: relative;
  }

  .modal__video {
    position: absolute;
    top: calc(100% / 2);
    left: calc(100% / 2);
    translate: calc(100% / 2 * -1) calc(100% / 2 * -1);
    width: min(100%, var(--max-reach-lg-x6));
  }

  .modal__image {
    position: absolute;
    top: calc(100% / 2);
    left: calc(100% / 2);
    translate: calc(100% / 2 * -1) calc(100% / 2 * -1);
    width: min(95vw, var(--max-reach-lg-x6));

    & img {
      background-color: rgb(255 255 255 / 100%);
    }
  }

  .modal__info {
    position: absolute;
    top: calc(100% / 2);
    left: calc(100% / 2);
    translate: calc(100% / 2 * -1) calc(100% / 2 * -1);
    width: min(100%, var(--max-reach-lg-x3));
    box-shadow: var(--shadow-4);
    background: var(--bg-image-paper-texture);
    padding-block: var(--space-md);
    padding-inline: var(--space-md);

    h2 {
      font-size: var(--font-size-lg-x2);
      font-weight: var(--font-weight-bold);
      text-align: center;
      letter-spacing: var(--letter-spacing-wide);
      color: var(--color-primary-6);
    }

    p {
      text-align: center;
    }

    svg {
      display: inline;
      width: var(--length-6);
      height: var(--length-6);
      vertical-align: sub;
    }

    hr {
      border: 0;
      border-top: var(--border-width-2) solid var(--color-neutral-3);
      margin-inline: auto;
      margin-block: var(--space-md);
      width: min(60%, var(--max-reach-lg-x3));
    }

    footer {
      display: flex;
      justify-content: center;
      margin-top: var(--space-lg-x1);
    }
  }

  .modal__button {
    margin-inline: auto;
    margin-top: var(--space-sm-x1);
  }

  .modal__message-with-icon {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x3);

    svg {
      display: inline;
      width: 1em;
      height: 1em;
      vertical-align: -0.125em;
    }
  }

  .modal__message-with-icon--warning {
    color: var(--color-yellow-6);
  }

  @media (width >= 64em) {
    .modal {
      padding: var(--space-lg-x1);
    }
  }
}