@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 180ms; }

  html { scroll-behavior: smooth; }

  button:not(:disabled),
  a.btn,
  a.admin-btn,
  a.primary-button,
  a.secondary-button {
    transition: transform 160ms ease, filter 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  }

  button:not(:disabled):active,
  a.btn:active,
  a.admin-btn:active,
  a.primary-button:active,
  a.secondary-button:active { transform: scale(.98); }

  .overlay:not([hidden]),
  .admin-modal:not([hidden]),
  .store-order-actions:not([hidden]),
  #all-country-content:not([hidden]),
  #login-verify-form:not([hidden]),
  #register-verify-panel:not([hidden]),
  #forgot-code-panel:not([hidden]),
  #new-password-panel:not([hidden]) { animation: dataon-fade-in 180ms ease-out both; }

  .drawer:not([hidden]) { animation: dataon-drawer-in 220ms ease-out both; }

  @supports (transition-behavior: allow-discrete) {
    .overlay,
    .admin-modal,
    .drawer {
      animation: none !important;
      opacity: 1;
      transition: opacity 180ms ease, transform 220ms ease, display 220ms allow-discrete;
    }

    .overlay[hidden],
    .admin-modal[hidden],
    .drawer[hidden] { opacity: 0; pointer-events: none; }
    .drawer[hidden] { transform: translateX(100%); }

    @starting-style {
      .overlay:not([hidden]),
      .admin-modal:not([hidden]),
      .drawer:not([hidden]) { opacity: 0; }
      .drawer:not([hidden]) { transform: translateX(100%); }
    }
  }
}

@keyframes dataon-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dataon-drawer-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
