dialog[data-dialog] {
  --dialog-space: 1.5rem;

  color-scheme: light;
  width: min(100% - 2rem, 30rem);
  border: 0;
  border-radius: var(--dialog-space);
  padding: var(--dialog-space);
  color: var(--black);
  background: var(--white);
  opacity: 0;
  translate: 0 0.5rem;
  transition:
    opacity var(--transition-duration) ease,
    translate var(--transition-duration) ease,
    display var(--transition-duration) allow-discrete,
    overlay var(--transition-duration) allow-discrete;

  &:open {
    opacity: 1;
    translate: 0;
  }

  &::backdrop {
    background: color-mix(in oklch, var(--black) 72%, transparent);
    opacity: 0;
    transition:
      opacity var(--transition-duration) ease,
      display var(--transition-duration) allow-discrete,
      overlay var(--transition-duration) allow-discrete;
  }

  &:open::backdrop {
    opacity: 1;
  }

  @starting-style {
    &:open {
      opacity: 0;
      translate: 0 0.5rem;
    }

    &:open::backdrop {
      opacity: 0;
    }
  }
}
