/* Dialog Component
   ========================================================================== */

:is(.dialog) {
  --speed: 150ms;

  container-type: inline-size;
  /* font-size: var(--font-small-responsive); */

  border: 0;
  opacity: 0;
  /* position: fixed; */
  inset: 0;
  margin: auto;
  width: calc(100vw - 2rem);
  max-width: 800px;
  max-height: 80vh;
  min-height: 200px;
  overflow-y: auto;
  transform: translateY(50%);
  transition:
    display var(--speed) allow-discrete,
    opacity var(--speed),
    overlay var(--speed) allow-discrete,
    transform var(--speed);

  &::backdrop {
    background-color: rgba(107, 114, 128, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition:
      display var(--speed) allow-discrete,
      opacity var(--speed),
      overlay var(--speed) allow-discrete;
  }

  &[open] {
    opacity: 1;
    transform: translateY(0);

    &::backdrop {
      opacity: 1;
    }
  }

  @starting-style {
    &[open] {
      opacity: 0;
      transform: translateY(50%);
    }

    &[open]::backdrop {
      opacity: 0;
    }
  }
}

.dialog__cancel-btn {
  position: absolute;
  top: 0.1rem;
  right: 0.5rem;

  i {
    font-size: 2rem;
  }
}

.dialog--wide {
  max-width: 1000px;
}

/* Lock body scroll when any dialog is open while preserving scroll position */
body:has(dialog[open]) {
  overflow: hidden;
  position: fixed;
  width: 100%;
}