/**
 * Bengal SSG - Navigation Action Buttons
 *
 * Unified styling for compact action buttons in the navigation and action bars.
 * These buttons share a consistent neumorphic aesthetic inspired by the search trigger.
 *
 * Applies to:
 * - Theme dropdown trigger (.theme-dropdown__button)
 * - Action bar meta toggle (.action-bar-meta-toggle)
 * - Action bar share trigger (.action-bar-share-trigger)
 * - Search modal trigger (.nav-search-trigger) - defined in search-modal.css
 */

/* ============================================
   BASE ACTION BUTTON STYLES
   ============================================ */

/*
 * Shared action button class - can be applied alongside component-specific classes
 * for consistent styling across navigation action buttons.
 */
.nav-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem; /* Compact on desktop */
  font-size: var(--text-xs, 0.75rem);
  font-family: inherit;
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-secondary);
  background: linear-gradient(180deg,
      var(--color-surface, var(--color-bg-elevated)),
      var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-medium, 6px);
  box-shadow: var(--neumorphic-subtle);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s);
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-action-btn:hover {
  color: var(--color-text-primary);
  box-shadow: var(--neumorphic-hover);
  transform: translateY(-1px);
}

.nav-action-btn:active {
  box-shadow: var(--neumorphic-subtle-pressed);
  transform: translateY(0) scale(0.98);
}

/* Focus state for accessibility (WCAG AA - 3:1 contrast for UI components) */
.nav-action-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--color-border-focus) 20%, transparent),
    var(--neumorphic-hover);
}

@supports not (color: color-mix(in srgb, black, white)) {
  .nav-action-btn:focus-visible {
    box-shadow:
      0 0 0 4px rgba(33, 150, 243, 0.1),
      var(--neumorphic-hover);
  }
}

.nav-action-btn svg {
  flex-shrink: 0;
  width: var(--icon-size-sm, 14px);
  height: var(--icon-size-sm, 14px);
  opacity: 0.7;
}

.nav-action-btn:hover svg {
  opacity: 1;
}

/* ============================================
   ICON-ONLY VARIANT
   ============================================ */

.nav-action-btn--icon-only {
  padding: 0.25rem; /* Compact on desktop */
  gap: 0;
}

/* ============================================
   DARK MODE
   ============================================ */

/* Dark mode inherits via CSS variables:
   - --color-surface and --color-bg-secondary adapt automatically
   - --neumorphic-subtle/hover/pressed are redefined for dark mode
   No explicit overrides needed! */

/* ============================================
   RESPONSIVE
   ============================================ */

/* Mobile: enforce 44px touch targets */
@media (max-width: 768px) {
  .nav-action-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
  }

  .nav-action-btn--icon-only {
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
  }
}
