.dialog {
  --translate-distance: 0.5rem;

  flex-direction: column;
  max-width: var(--container--base);
  width: calc(100% - var(--space--base));
  height: auto;
  padding: 0;

  background-color: var(--color--background-light);
  border: var(--border--base);
  border-radius: var(--border-radius--base);
  box-shadow: var(--shadow-01);

  opacity: 0;
  transform: translateY(var(--translate-distance));

  @media screen and (prefers-reduced-motion: no-preference) {
    transition: opacity var(--transition-duration--base) var(--transition-timing--base) allow-discrete,
      transform var(--transition-duration--base) var(--transition-timing--base) allow-discrete,
      display var(--transition-duration--base) var(--transition-timing--base) allow-discrete;
  }

  &::backdrop {
    background-color: color-mix(in srgb,
        var(--color--background-inverse),
        transparent 30%);

    opacity: 0;

    @media screen and (prefers-reduced-motion: no-preference) {
      transition: opacity var(--transition-duration--base) var(--transition-timing--base) allow-discrete,
        transform var(--transition-duration--base) var(--transition-timing--base) allow-discrete,
        display var(--transition-duration--base) var(--transition-timing--base) allow-discrete;
    }
  }

  &[open] {
    opacity: 1;
    transform: none;
    display: flex;

    &::backdrop {
      opacity: 1;
    }
  }

  @starting-style {
    &[open] {
      opacity: 0;
      transform: translateY(var(--translate-distance));

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

.dialog--iteration {
  max-width: var(--container--large);
  width: calc(100% - var(--space--medium) * 2);

  background-color: var(--color--background-inverse);
  color: var(--color--text-inverse);
  border: none;
}