@use 'sass:map';
@use 'tokens';

/// Media query mobile-first: stili applicati da quel breakpoint in su.
/// @example @include mq.up(md) { … }
@mixin up($name) {
  $value: map.get(tokens.$breakpoints, $name);
  @if not $value {
    @error "Breakpoint sconosciuto: #{$name}";
  }
  @media (min-width: $value) {
    @content;
  }
}

/// Testo leggibile solo dagli screen reader.
@mixin visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/// Anello di focus visibile e coerente (solo da tastiera).
@mixin focus-ring {
  &:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
  }
}