body:has(dialog[open]) {
  overflow: hidden;
}

.dialog {
  flex-direction: column;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: clip;
  transform: translate(-50%, -50%);
  width: var(--dialog-width);
  max-height: var(--dialog-max-height);
  border-color: var(--dialog-border-color);
  border-style: var(--dialog-border-style);
  border-width: var(--dialog-border-width);
  border-radius: var(--dialog-border-radius);
  background: var(--dialog-background-color);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dialog::backdrop {
  background: var(--color-transparent);
  transition: background 0.2s ease;
}
.dialog[open] {
  display: flex;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
.dialog.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.dialog.show::backdrop {
  background: var(--dialog-backdrop-background);
}

.dialog-sm {
  width: var(--dialog-width-sm);
  max-height: var(--dialog-max-height-sm);
}

.dialog-md {
  width: var(--dialog-width-md);
  max-height: var(--dialog-max-height-md);
}

.dialog-lg {
  width: var(--dialog-width-lg);
  max-height: var(--dialog-max-height-lg);
}

.dialog-header {
  padding-inline: var(--dialog-header-padding-x);
  padding-block: var(--dialog-header-padding-y);
}

.dialog-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-inline: var(--dialog-body-padding-x);
  padding-block: var(--dialog-body-padding-y);
}

.dialog-footer {
  padding-inline: var(--dialog-footer-padding-x);
  padding-block: var(--dialog-footer-padding-y);
}

.dialog-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--content-on-primary);
}

.dialog-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--content-on-secondary);
}

.dialog-tertiary {
  background-color: var(--color-tertiary);
  border-color: var(--color-tertiary);
  color: var(--content-on-tertiary);
}

.dialog-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--content-on-success);
}

.dialog-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--content-on-info);
}

.dialog-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--content-on-warning);
}

.dialog-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--content-on-danger);
}

.dialog-neutral {
  background-color: var(--color-neutral);
  border-color: var(--color-neutral);
  color: var(--content-on-neutral);
}

.dialog-light {
  background-color: var(--color-light);
  border-color: var(--color-light);
  color: var(--content-on-light);
}

.dialog-dark {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--content-on-dark);
}

.dialog-white {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--content-on-white);
}

.dialog-black {
  background-color: var(--color-black);
  border-color: var(--color-black);
  color: var(--content-on-black);
}

.dialog-primary-ghost {
  background-color: var(--color-primary-ghost);
  border-color: var(--color-primary-ghost);
  color: var(--content-on-primary-ghost);
}

.dialog-secondary-ghost {
  background-color: var(--color-secondary-ghost);
  border-color: var(--color-secondary-ghost);
  color: var(--content-on-secondary-ghost);
}

.dialog-tertiary-ghost {
  background-color: var(--color-tertiary-ghost);
  border-color: var(--color-tertiary-ghost);
  color: var(--content-on-tertiary-ghost);
}

.dialog-success-ghost {
  background-color: var(--color-success-ghost);
  border-color: var(--color-success-ghost);
  color: var(--content-on-success-ghost);
}

.dialog-info-ghost {
  background-color: var(--color-info-ghost);
  border-color: var(--color-info-ghost);
  color: var(--content-on-info-ghost);
}

.dialog-warning-ghost {
  background-color: var(--color-warning-ghost);
  border-color: var(--color-warning-ghost);
  color: var(--content-on-warning-ghost);
}

.dialog-danger-ghost {
  background-color: var(--color-danger-ghost);
  border-color: var(--color-danger-ghost);
  color: var(--content-on-danger-ghost);
}

.dialog-neutral-ghost {
  background-color: var(--color-neutral-ghost);
  border-color: var(--color-neutral-ghost);
  color: var(--content-on-neutral-ghost);
}

.dialog-light-ghost {
  background-color: var(--color-light-ghost);
  border-color: var(--color-light-ghost);
  color: var(--content-on-light-ghost);
}

.dialog-dark-ghost {
  background-color: var(--color-dark-ghost);
  border-color: var(--color-dark-ghost);
  color: var(--content-on-dark-ghost);
}

.dialog-white-ghost {
  background-color: var(--color-white-ghost);
  border-color: var(--color-white-ghost);
  color: var(--content-on-white-ghost);
}

.dialog-black-ghost {
  background-color: var(--color-black-ghost);
  border-color: var(--color-black-ghost);
  color: var(--content-on-black-ghost);
}