@use "sass:map";
@use "variables" as *;

// NOTE: retro-border, retro-hover, retro-active, retro-transition and
// retro-z-index used to live here. None of them was called from anywhere in
// the framework -- they were five ways to write a declaration nobody wrote.
// Their values are all reachable directly as custom properties
// (--retro-border-dark, --retro-border-sunken, --retro-z-index-modal, ...),
// which is what the components actually use.

@mixin retro-box-shadow($type: raised) {
  @if $type == raised {
    box-shadow: var(--retro-border-raised);
  } @else if $type == sunken {
    box-shadow: var(--retro-border-sunken);
  }
}

/// The framework's focus policy, in one place.
///
/// :focus-visible rather than :focus, so the ring appears for keyboard and
/// assistive-tech users but not on every mouse click. Browsers still match
/// :focus-visible for text inputs on click, so fields keep their ring.
/// The :focus fallback keeps a visible ring on engines without the selector.
@mixin retro-focus($style: dotted, $offset: -4px) {
  &:focus {
    outline: 1px $style var(--retro-text);
    outline-offset: $offset;
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 1px $style var(--retro-text);
    outline-offset: $offset;
  }
}

/// Stronger ring for elements that sit on a filled surface.
@mixin retro-focus-ring($color: var(--retro-primary), $width: 2px, $offset: 2px) {
  &:focus {
    outline: $width solid $color;
    outline-offset: $offset;
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: $width solid $color;
    outline-offset: $offset;
  }
}

// Breakpoint mixin
@mixin retro-breakpoint($breakpoint) {
  @if map.has-key($retro-breakpoints, $breakpoint) {
    @media (min-width: map.get($retro-breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Invalid breakpoint: #{$breakpoint}. Available breakpoints are: #{map.keys($retro-breakpoints)}";
  }
}