@if ($enable-classes and $enable-transitions) {
  $animation-duration: 0.2s;

  :where(.modal-is-opening, .modal-is-closing) {
    dialog,
    dialog > article {
      animation-duration: $animation-duration;
      animation-timing-function: ease-in-out;
      animation-fill-mode: both;
    }

    dialog {
      animation-duration: ($animation-duration * 4);
      animation-name: fadeIn;

      > article {
        animation-delay: $animation-duration;
        animation-name: slideInDown;
      }
    }
  }