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

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

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

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

.lio-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(var(--space-zero), 1fr) auto;
  width: min(100%, calc(var(--size-lg) * 40));
  max-height: calc(100dvh - (var(--space-xl4) * 2));
  padding: var(--space-lg);
  background: var(--surface);
  color: var(--text);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  animation: lio-dialog-panel-in 150ms ease both;
}

.lio-dialog[data-size="sm"] {
  width: min(100%, calc(var(--control-h-lg) * 10));
}

.lio-dialog[data-size="lg"] {
  width: min(100%, calc(var(--size-lg) * 50));
}

.lio-dialog__close.lio-btn {
  position: absolute;
  inset-block-start: var(--space-base);
  inset-inline-end: var(--space-base);
  inline-size: var(--control-h-sm);
  min-height: var(--control-h-sm);
  padding-inline: var(--space-zero);
}

.lio-dialog__header {
  display: grid;
  gap: var(--space-xs);
  padding-inline-end: var(--space-xl3);
}

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

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

.lio-dialog__body {
  min-height: var(--space-zero);
  margin-top: var(--space-base);
  overflow: auto;
  color: var(--text-secondary);
  font: var(--body-m);
}

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

.lio-dialog--prompt .lio-dialog__body {
  overflow: visible;
}

.lio-dialog__prompt-form {
  display: grid;
  gap: var(--space-xs2);
}

.lio-dialog__prompt-validation {
  margin: var(--space-zero);
  color: var(--error-text);
  font: var(--body-s);
}

.lio-dialog__prompt-validation[hidden] {
  display: none;
}