/**
 * @name Accessibility Utilities
 * @group utilities
 * @description
 * Helpers for content that must reach assistive technology without being
 * visible, and for the keyboard affordances that go with them.
 */

/// Visually hidden, still announced by screen readers.
///
/// Use it to label icon-only controls -- a toolbar button whose only content is
/// an emoji or a glyph has no accessible name without one.
///
/// @example html
///   <button class="retro-btn">💾<span class="retro-sr-only">Save</span></button>
.retro-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  // clip-path is the modern form; clip is kept for older engines.
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/// Hidden until focused -- the standard "Skip to content" pattern.
.retro-sr-only-focusable {
  &:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  &:focus {
    position: static;
    z-index: var(--retro-z-index-fixed);
    padding: var(--retro-spacing-sm) var(--retro-spacing-md);
    background: var(--retro-bg);
    color: var(--retro-text);
    border: var(--retro-border-width-thick) solid var(--retro-border-dark);
    box-shadow: var(--retro-box-shadow-outset-button);
  }
}