dialog {
  transform: translateY(-20px);

  &,
  &::backdrop {
    transition: display 1s allow-discrete, overlay 1s allow-discrete,
      opacity 1s ease, transform 1s ease;
    opacity: 0
  }

  &[open] {
    opacity: 1;
    transform: translateY(0);

    &::backdrop {
      opacity: 0.8;
    }
  }

  @starting-style {
    &[open],
    &[open]::backdrop {
      opacity: 0;
    }

    &[open] {
      transform: translateY(20px);
    }
  }
}