/* -------------------------------
   Modal
-------------------------------- */

/* Override these variables on the dialog element for case-specific sizing or spacing.
   Example:
   .my-modal {
     --modal-sheet-max-width: 520px;
     --modal-sheet-width-wide: 60vw;
   }
*/

.modal {
  --modal-padding: 1.6rem;
  --modal-color: var(--color-font-primary);
  --modal-backdrop: rgba(0, 0, 0, 0.45);
  --modal-sheet-width: 100%;
  --modal-sheet-width-wide: 75vw;
  --modal-sheet-max-width: 780px;
  --modal-sheet-radius: 8px;
  --modal-sheet-background: var(--color-surface-white);
  --modal-sheet-shadow: 0 2rem 7rem rgba(0, 0, 0, 0.24);
  --modal-sheet-padding: 1.6rem;
  --modal-actions-gap: 1rem;
  --modal-actions-margin-top: 2.8rem;

  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: var(--modal-padding);
  border: 0;
  background: transparent;
  color: var(--modal-color);
  overflow-x: hidden;
  overflow-y: auto;
}

.modal::backdrop {
  background: var(--modal-backdrop);
}

.modal[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
}

body:has(.modal[open]) {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.modal__sheet {
  display: block;
  width: var(--modal-sheet-width);
  max-width: var(--modal-sheet-max-width);
  padding: var(--modal-sheet-padding);
  overflow: visible;
  border-radius: var(--modal-sheet-radius);
  background: var(--modal-sheet-background);
  box-shadow: var(--modal-sheet-shadow);
}

@media (min-width: 650px) {
  .modal {
    --modal-sheet-padding: 2.8rem;
  }

  .modal__sheet {
    width: var(--modal-sheet-width-wide);
  }
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--modal-actions-gap);
  margin-top: var(--modal-actions-margin-top);
}