// ==========================================================================
// FOCUS VISIBLE UTILITIES
// ==========================================================================
// Focus management styles using semantic tokens
// ==========================================================================

@use '../tokens/a11y-tokens' as tokens;

// Base focus visible styles
.focus-visible,
:focus-visible {
  outline: tokens.$a11y-focus-trap-outline-width tokens.$a11y-focus-trap-outline-style tokens.$a11y-focus-outline-color;
  outline-offset: tokens.$a11y-focus-trap-outline-offset;
  transition: outline-color tokens.$a11y-focus-transition-duration tokens.$a11y-focus-transition-timing;
}

// Remove default focus outline for mouse users
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

// Focus ring for interactive elements
.focus-ring {
  position: relative;
  
  &:focus-visible::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: tokens.$a11y-focus-ring-width solid tokens.$a11y-focus-color;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity tokens.$a11y-focus-transition-duration tokens.$a11y-focus-transition-timing;
    opacity: 1;
  }
  
  &:not(:focus-visible)::after {
    opacity: 0;
  }
}

// Focus styles for buttons
.btn-focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: tokens.$a11y-focus-trap-outline-width solid tokens.$a11y-focus-color;
  outline-offset: 2px;
  box-shadow: tokens.$a11y-focus-shadow;
}

// Focus styles for form inputs
.input-focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: tokens.$a11y-focus-color;
  box-shadow: tokens.$a11y-focus-shadow;
  outline: none;
}

// Focus styles for links
.link-focus-visible,
a:focus-visible {
  outline: tokens.$a11y-focus-trap-outline-width solid tokens.$a11y-focus-color;
  outline-offset: 2px;
  text-decoration: underline;
}

// High contrast mode support
@media (prefers-contrast: high) {
  .focus-visible,
  :focus-visible {
    outline-color: tokens.$a11y-high-contrast-focus-color;
    outline-width: 3px;
  }
  
  .focus-ring:focus-visible::after {
    border-color: tokens.$a11y-high-contrast-focus-color;
    border-width: 3px;
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .focus-visible,
  :focus-visible,
  .focus-ring::after {
    transition-duration: tokens.$a11y-reduced-motion-duration;
    transition-timing-function: tokens.$a11y-reduced-motion-easing;
  }
}

// Focus trap container styles
.focus-trap-container {
  position: relative;
  
  &.focus-trap-active {
    isolation: isolate;
  }
  
  // Visual indicator for focus trap (dev mode)
  &.focus-trap-debug {
    &::before {
      content: 'Focus Trap Active';
      position: absolute;
      top: -20px;
      left: 0;
      font-size: 12px;
      color: tokens.$a11y-focus-color;
      background: tokens.$a11y-skip-link-bg;
      padding: 2px 6px;
      border-radius: 3px;
      z-index: 1000;
    }
  }
}

// Skip to content on focus trap
.focus-trap-skip {
  position: absolute;
  top: -40px;
  left: 0;
  background: tokens.$a11y-skip-link-bg;
  color: tokens.$a11y-skip-link-color;
  padding: tokens.$a11y-skip-link-padding-y tokens.$a11y-skip-link-padding-x;
  text-decoration: none;
  border: 1px solid tokens.$a11y-skip-link-border;
  border-radius: tokens.$a11y-skip-link-border-radius;
  z-index: tokens.$a11y-skip-link-z-index;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all tokens.$a11y-focus-transition-duration tokens.$a11y-focus-transition-timing;
  
  &:focus {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    box-shadow: tokens.$a11y-skip-link-shadow;
  }
}