// ==========================================================================
// SCREEN READER UTILITIES
// ==========================================================================
// Screen reader specific styles using semantic tokens
// ==========================================================================

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

// Screen reader only - visually hidden but accessible
.sr-only {
  position: tokens.$a11y-sr-only-position;
  width: tokens.$a11y-sr-only-width;
  height: tokens.$a11y-sr-only-height;
  padding: tokens.$a11y-sr-only-padding;
  margin: tokens.$a11y-sr-only-margin;
  overflow: tokens.$a11y-sr-only-overflow;
  clip: tokens.$a11y-sr-only-clip;
  white-space: nowrap;
  border: tokens.$a11y-sr-only-border;
}

// Screen reader only that becomes visible on focus
.sr-only-focusable {
  @extend .sr-only;
  
  &:focus,
  &:active {
    position: static;
    width: auto;
    height: auto;
    padding: tokens.$a11y-skip-link-padding-y tokens.$a11y-skip-link-padding-x;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: tokens.$a11y-skip-link-bg;
    color: tokens.$a11y-skip-link-color;
    border: 1px solid tokens.$a11y-skip-link-border;
    border-radius: tokens.$a11y-skip-link-border-radius;
    box-shadow: tokens.$a11y-skip-link-shadow;
    z-index: tokens.$a11y-skip-link-z-index;
  }
}

// Live region for screen reader announcements
.live-region {
  position: tokens.$a11y-live-region-position;
  left: tokens.$a11y-live-region-left;
  width: tokens.$a11y-live-region-width;
  height: tokens.$a11y-live-region-height;
  overflow: tokens.$a11y-live-region-overflow;
}

// Status message styling
.status-message {
  @extend .sr-only;
  
  &.status-visible {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    padding: tokens.$a11y-skip-link-padding-y tokens.$a11y-skip-link-padding-x;
    margin: 4px 0;
    background: tokens.$a11y-skip-link-bg;
    border-left: 4px solid tokens.$a11y-focus-color;
    border-radius: 0 tokens.$a11y-skip-link-border-radius tokens.$a11y-skip-link-border-radius 0;
  }
  
  &.status-error {
    border-left-color: tokens.$a11y-error-color;
  }
  
  &.status-success {
    border-left-color: tokens.$a11y-success-color;
  }
  
  &.status-warning {
    border-left-color: tokens.$a11y-warning-color;
  }
}

// Screen reader instructions
.sr-instructions {
  @extend .sr-only;
  
  // Common instruction patterns
  &.sr-required::after {
    content: ' (required)';
  }
  
  &.sr-optional::after {
    content: ' (optional)';
  }
  
  &.sr-expanded::after {
    content: ' (expanded)';
  }
  
  &.sr-collapsed::after {
    content: ' (collapsed)';
  }
  
  &.sr-selected::after {
    content: ' (selected)';
  }
  
  &.sr-current::after {
    content: ' (current)';
  }
}

// Accessible hide/show with transitions
.a11y-hide {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  transition: opacity tokens.$a11y-animation-fade-duration tokens.$a11y-focus-transition-timing,
              transform tokens.$a11y-animation-scale-duration tokens.$a11y-focus-transition-timing;
  
  // Still accessible to screen readers when hidden
  &:not(.a11y-hide-completely) {
    position: absolute;
    left: -9999px;
  }
  
  // Completely hidden including from screen readers
  &.a11y-hide-completely {
    display: none;
  }
}

.a11y-show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity tokens.$a11y-animation-fade-duration tokens.$a11y-focus-transition-timing,
              transform tokens.$a11y-animation-scale-duration tokens.$a11y-focus-transition-timing;
}

// High contrast mode adjustments
@media (prefers-contrast: high) {
  .sr-only-focusable:focus,
  .sr-only-focusable:active {
    background: tokens.$a11y-high-contrast-bg-color;
    color: tokens.$a11y-high-contrast-text-color;
    border-color: tokens.$a11y-high-contrast-border-color;
  }
  
  .status-message.status-visible {
    background: tokens.$a11y-high-contrast-bg-color;
    color: tokens.$a11y-high-contrast-text-color;
    border-color: tokens.$a11y-high-contrast-border-color;
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .a11y-hide,
  .a11y-show,
  .sr-only-focusable {
    transition-duration: tokens.$a11y-reduced-motion-duration;
    transition-timing-function: tokens.$a11y-reduced-motion-easing;
  }
}