/**
 * @declaration focus
 * @class :focus-visible
 * @summary The focus-outline system: the `--instui-focus-outline-*` custom properties (declared on `:root`) plus the `:focus-visible` ring every focusable gets, and opt-in tuning classes.
 * @modifier -focus-color-success — Success-coloured ring.
 * @modifier -focus-color-danger — Danger-coloured ring.
 * @modifier -focus-color-inverse — Inverse (on-dark) ring.
 * @modifier -focus-position-inset — Draw the ring inset, inside the element's edge.
 * @modifier -focus-within — Ring the element while a descendant is focused.
 * @modifier -without-focus-animation — Disable the ring's grow-in animation.
 * @cssproperty --instui-focus-outline-color — The ring colour once focus is visible (the themed info colour).
 * @cssproperty --instui-focus-outline-color-start — The resting, transparent ring colour the outline transitions from.
 * @cssproperty --instui-focus-outline-width — The outline width of the ring.
 * @cssproperty --instui-focus-outline-offset — The gap between the element's edge and the ring when focused.
 * @cssproperty --instui-focus-outline-radius — The ring's corner radius when focused.
 * @cssproperty --instui-focus-outline-style — The outline line style (solid).
 * @cssproperty --instui-focus-outline-transition — The transition that animates the ring's colour and offset in.
 * @cssproperty --instui-focus-outline-color-success — The ring colour for the `-focus-color-success` modifier.
 * @cssproperty --instui-focus-outline-color-danger — The ring colour for the `-focus-color-danger` modifier.
 * @cssproperty --instui-focus-outline-color-inverse — The ring colour for the `-focus-color-inverse` (on-dark) modifier.
 * @cssproperty --instui-focus-outline-inset — The outline offset used when `-focus-position-inset` draws the ring inside the edge.
 * @a11y Every focusable element gets a `:focus-visible` outline ring so keyboard users can see what's focused.
 * @example
 * <button class="instui-button -focus-color-danger">Delete</button>
 * @demo self:focus-outline
 */
:where(:root) {
  --instui-focus-outline-color: var(--instui-component-shared-tokens-focus-outline-info-color);
  --instui-focus-outline-color-start: transparent;
  --instui-focus-outline-width: var(--instui-component-shared-tokens-focus-outline-width);
  --instui-focus-outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);
  --instui-focus-outline-radius: var(--instui-border-radius-md);
  --instui-focus-outline-style: solid;
  --instui-focus-outline-transition: outline-color 0.2s, outline-offset 0.25s;
  --instui-focus-outline-color-success: var(--instui-component-shared-tokens-focus-outline-success-color);
  --instui-focus-outline-color-danger: var(--instui-component-shared-tokens-focus-outline-danger-color);
  --instui-focus-outline-color-inverse: var(--instui-component-shared-tokens-focus-outline-on-color);
  --instui-focus-outline-inset: 0rem;
}

:where(a, button, input, select, textarea, summary, [tabindex]) {
  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color-start);
  outline-offset: 0;
  transition: var(--instui-focus-outline-transition);
}
:where(a, button, input, select, textarea, summary, [tabindex]):where(:focus-visible) {
  outline-color: var(--instui-focus-outline-color);
  outline-offset: var(--instui-focus-outline-offset);
  border-radius: var(--instui-focus-outline-radius);
}
:where(.-focus-color-success):where(:focus-visible) { outline-color: var(--instui-focus-outline-color-success); }
:where(.-focus-color-danger):where(:focus-visible) { outline-color: var(--instui-focus-outline-color-danger); }
:where(.-focus-color-inverse):where(:focus-visible) { outline-color: var(--instui-focus-outline-color-inverse); }
:where(.-focus-position-inset):where(:focus-visible) { outline-offset: var(--instui-focus-outline-inset); }
:where(.-focus-within):where(:focus-within) {
  outline-color: var(--instui-focus-outline-color);
  outline-offset: var(--instui-focus-outline-offset);
  border-radius: var(--instui-focus-outline-radius);
}
:where(.-without-focus-animation) { transition: none; }