/**
 * Nav Swap Icon Fix
 * Prevents any unwanted state changes or success messages
 */

/* Complete isolation for nav swap button */
#nav-swap-button,
#nav-swap-button *,
#nav-swap-button::before,
#nav-swap-button::after,
#nav-swap-button .nav-swap-text::before,
#nav-swap-button .nav-swap-text::after,
#nav-swap-button .nav-swap-icon::before,
#nav-swap-button .nav-swap-icon::after {
  /* Reset all potential success/active states */
  animation-name: none !important;
  animation-duration: 0s !important;
  animation-fill-mode: none !important;
  transition-property: transform, opacity !important;
  transition-duration: 0.35s !important;
}

/* Preserve only the hover rotation for icon */
#nav-swap-button:hover .nav-swap-icon {
  transform: rotate(180deg) !important;
}

/* Block any content injection */
#nav-swap-button::before,
#nav-swap-button::after,
#nav-swap-button .nav-swap-text::before,
#nav-swap-button .nav-swap-text::after {
  content: "" !important;
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Force original text to stay visible */
#nav-swap-button .nav-swap-text {
  font-size: 7px !important;
  color: var(--primary-light) !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  text-indent: 0 !important;
}

/* Prevent any class additions from changing appearance */
#nav-swap-button.active,
#nav-swap-button.clicked,
#nav-swap-button.success,
#nav-swap-button.complete,
#nav-swap-button.done,
#nav-swap-button:active,
#nav-swap-button:focus {
  background-color: var(--dark-accent-1) !important;
  border-color: var(--dark-accent-1) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Keep showing during animation */
#nav-swap-button.show {
  animation: swapButtonFadeIn 0.4s ease-out forwards !important;
}