import { makeStyles, tokens } from '@fluentui/react-components'

/**
 * One focus-visible ring for every hand-rolled interactive element (UI29).
 *
 * Fluent's own controls draw their own focus indicator; the app's bespoke
 * buttons, segmented controls, command-palette rows, and `role="button"` headers
 * previously fell back to the UA default (often invisible) or removed it
 * entirely. This gives them all the same visible, theme-aware keyboard focus.
 *
 * Apply with `mergeClasses(focus.focusRing, …)`. The ring is inset (negative
 * offset) so it never clips inside `overflow: hidden` containers and follows each
 * element's own border-radius; it shows only for `:focus-visible`, so pointer
 * clicks stay quiet.
 */
export const useFocusStyles = makeStyles({
  focusRing: {
    outlineStyle: 'none',
    ':focus-visible': {
      outlineWidth: '2px',
      outlineStyle: 'solid',
      outlineColor: tokens.colorStrokeFocus2,
      outlineOffset: '-2px'
    }
  }
})
