.ssn-navbar {
  transition: transform var(--ssn-transition-ms, 280ms) ease, opacity var(--ssn-transition-ms, 280ms) ease !important;
  will-change: transform, opacity;
}

.ssn-navbar.ssn-navbar--visible {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.ssn-navbar.ssn-navbar--hidden {
  transform: translateY(calc(-100% - 12px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .ssn-navbar {
    transition: none !important;
  }
}