dialog {
  flex-direction: column;
  gap: var(--space--base);
  width: calc(100% - var(--space--base));
  max-width: var(--container--base);
  color: var(--color--text);
  background-color: var(--color--bg-base);
  border: var(--border--base);
  border-radius: var(--border-radius--base);
  &[open] { display: flex; }

  &[open]::backdrop {
    background-color: color-mix(
      in srgb,
      #000000,
      transparent 75%
    );
  }
}

dialog button[data-dialogClose] { align-self: flex-end; }

dialog.slide-in {
  margin-bottom: 0;
  transform: translateY(100%);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  &[open] {
    transform: translateY(0);
    @starting-style {
      transform: translateY(100%);
      &::backdrop { background-color: transparent; }

      @media screen and (prefers-reduced-motion: reduce) { transform: translateY(0); }
    }
  }
}