@media (prefers-reduced-motion: reduce) {
  // mentions body for higher priority
  body {
    *,
    ::before,
    ::after {
      background-attachment: initial !important;
      scroll-behavior: auto !important;
    }

    // Do not need transition in this case
    * {
      --#{$CSS_VAR_PFX}simple-transition: 0s !important;
      --#{$CSS_VAR_PFX}long-transition: 0s !important;
      --#{$CSS_VAR_PFX}bouncing-transition: 0s !important;
    }

    // Fade instead of custom animations
    // Fade In
    .dropdown,
    .modal,
    .tab-panel {
      &.show {
        animation-name: flatify-fade-in !important;
      }
    }

    .menu-item {
      &:focus-within > .submenu,
      &:hover > .submenu {
        animation-name: flatify-fade-in !important;
      }
    }

    .two-layer-button {
      --#{$CSS_VAR_PFX}two-layer-button-animation-show: flatify-fade-in 0.3s ease-in-out !important;
    }

    // accordion fade in/out
    .accordion-collapse {
      transition: none !important;

      &.show .accordion-body {
        animation-name: flatify-fade-in !important;
      }
      &.accordion-will-be-hidden .accordion-body {
        animation-name: flatify-fade-out !important;
      }
    }

    // toast fade in/out
    .toast {
      &:not(.toast-will-be-removed) {
        animation-name: flatify-fade-in !important;
      }
      &.toast-will-be-removed {
        animation-name: flatify-fade-out !important;
      }
    }

    // alert fade in/out
    .alert {
      &:not(.alert-will-be-removed) {
        animation-name: flatify-fade-in !important;
      }
      &.alert-will-be-removed {
        animation-name: flatify-fade-out !important;
      }
    }

    // Fade in out like a fresh breath
    .loading {
      animation: flatify-fade-in-out 2s infinite !important;

      &:before,
      &:after {
        opacity: 1 !important;
        animation: none !important;
      }
    }

    .progress-bar:before {
      filter: opacity(60%);
      animation: flatify-fade-in-out 3s infinite !important;
    }

    // Fade Out
    .show {
      &.dropdown-will-be-hidden,
      &.modal-will-be-hidden,
      &.tab-will-be-hidden {
        animation-name: flatify-fade-out !important;
      }
    }

    // limit steps for to have a simple animation
    .spinner:before {
      animation-timing-function: steps(4, end) !important;
      animation-duration: 2s !important;
    }
  }

  // Custom pulse animation
  @keyframes flatify-pulse {
    0%,
    100% {
      transform: scale(1.25);
      opacity: 0.2;
    }
    40% {
      transform: scale(1.25);
      opacity: 0.5;
    }
  }
}