body.has-lio-dialog {
  overflow: hidden;
}

.lio-alert-dialog-layer {
  position: fixed;
  inset: var(--space-zero);
  z-index: 7000;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  color: var(--text);
  font-family: var(--font-geist);
}

.lio-alert-dialog-layer[hidden] {
  display: none;
}

.lio-alert-dialog__overlay {
  position: absolute;
  inset: var(--space-zero);
  background: var(--overlay);
  animation: lio-dialog-overlay-in 150ms ease both;
}

.lio-alert-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  inline-size: min(100%, calc(var(--control-h-lg) * 10));
  gap: var(--space-lg);
  padding: var(--space-lg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-2xl);
  animation: lio-dialog-panel-in 150ms ease both;
}

.lio-alert-dialog__header {
  display: grid;
  gap: var(--space-xs);
}

.lio-alert-dialog__title {
  margin: var(--space-zero);
  color: var(--text);
  font: var(--heading-l);
}

.lio-alert-dialog__description,
.lio-alert-dialog__body {
  margin: var(--space-zero);
  color: var(--text-secondary);
  font: var(--body-m);
}

.lio-alert-dialog__body {
  display: grid;
  gap: var(--space-sm);
}

.lio-alert-dialog__body > :first-child {
  margin-block-start: var(--space-zero);
}

.lio-alert-dialog__body > :last-child {
  margin-block-end: var(--space-zero);
}

.lio-alert-dialog__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

@media (max-width: 520px) {
  .lio-alert-dialog-layer {
    align-items: end;
    padding: var(--space-base);
  }

  .lio-alert-dialog {
    inline-size: 100%;
  }

  .lio-alert-dialog__footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .lio-alert-dialog__footer .lio-btn {
    inline-size: 100%;
  }
}