:host {
  z-index: 1;
  --md-dialog-container-color: var(--md-sys-color-surface-container-high);
  --md-dialog-container-radius: 1.75rem;
  --md-dialog-container-support-text-color: var(
    --md-sys-color-on-surface-variant
  );
  --md-dialog-scrim-color: color-mix(
    in oklch,
    transparent,
    var(--md-sys-color-scrim) 32%
  );

  height: fit-content;
}

.dialog:not([open]) {
  pointer-events: none;
  opacity: 0;
}

.dialog::backdrop {
  transition: backdrop-filter 0.4s ease;
  background-color: var(--md-dialog-scrim-color);
}

.dialog {
  margin: auto;
  padding: 0;
  position: fixed;
  inset: 0;
  z-index: 2;

  padding: 1.5rem;
  max-inline-size: min(90vw, 60ch);
  max-block-size: min(80vh, 100%);
  overflow: hidden;

  background-color: var(--md-dialog-container-color);
  border-radius: var(--md-dialog-container-radius);
  color: var(--md-dialog-container-support-text-color);

  align-content: start;
  border: none;
  box-sizing: border-box;
  row-gap: 1rem;
}

.dialog__headline {
  margin: 0;
  padding: 0;
}

.dialog__header {
  min-height: 14px;
}

.dialog__body {
  display: flex;
  flex: 1 auto;
  overflow: hidden;
}

.dialog__footer {
  flex: 1 auto;
}

@media (max-width: 768px) {
  dialog[modal-mode="mega"] {
    margin-block-end: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .dialog[open] {
    animation: slide-in-up 0.2s cubic-bezier(0.25, 0, 0.3, 1) forwards;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .dialog {
    animation: scale-down 0.2s 200ms forwards;
    animation-timing-function: cubic-bezier(0.5, -0.5, 0.1, 1.5);
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
  .dialog[modal-mode="mega"] {
    animation: slide-out-down 0.2s cubic-bezier(0.25, 0, 0.3, 1) forwards;
    animation-timing-function: cubic-bezier(0.5, -0.3, 0.1, 1.5);
  }
}

@keyframes slide-in-up {
  0% {
    transform: translateY(100%);
  }
}

@keyframes scale-down {
  to {
    transform: scale(0.75);
  }
}