:where(.focus-ring:focus-visible, .focus-ring--forced, .focus-ring--within:where(:focus-within)) {
  position: relative;
}

/* proxy variant — the ring paints on a visual stand-in of a visually-hidden
   input (radio dot, checkbox box, rating star). Mark the hidden input with
   `proxyTarget()` and the visual element with `root({ proxy: true })`; the
   ring shows while the input is keyboard-focused. The trigger input must
   come BEFORE the ring host in the DOM — sibling combinators only look
   forward. A host that precedes its input needs a component-local rule. */
$proxy-focused-input: ':where(.focus-ring__proxy-target:focus-visible)';

/* host is the input's later sibling, or lives inside one */
#{$proxy-focused-input} ~ .focus-ring--proxy,
#{$proxy-focused-input} ~ :where(:not(.focus-ring)) .focus-ring--proxy {
  position: relative;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: var(--wds-outline-focus-outer, 3px solid #116dff);
  outline-offset: 1px;
}

#{$proxy-focused-input} ~ .focus-ring--proxy::before,
#{$proxy-focused-input} ~ :where(:not(.focus-ring)) .focus-ring--proxy::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: var(--wds-outline-focus-inner, 1px solid #ffffff);
}

.focus-ring {
  &:where(:not(#{&}--pseudo)):focus-visible,
  &:where(:not(#{&}--pseudo))#{&}--forced,
  &:where(:not(#{&}--pseudo))#{&}--within:where(:focus-within) {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-outer, 3px solid #116dff);
    outline-offset: 1px;
  }

  &:where(:not(#{&}--pseudo)):focus-visible::before,
  &:where(:not(#{&}--pseudo))#{&}--forced::before,
  &:where(:not(#{&}--pseudo))#{&}--within:where(:focus-within)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-inner, 1px solid #ffffff);
  }

  /* pseudo variant: for hosts whose own outline is their border (Button) —
     ring on ::before, band on ::after, both overlay boxes. */
  &--pseudo:focus-visible::before,
  &--pseudo#{&}--forced::before,
  &--pseudo#{&}--within:where(:focus-within)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-outer, 3px solid #116dff);
    outline-offset: 1px;
  }

  &--pseudo:focus-visible::after,
  &--pseudo#{&}--forced::after,
  &--pseudo#{&}--within:where(:focus-within)::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-inner, 1px solid #ffffff);
  }

  &--inset:focus-visible,
  &--inset#{&}--forced,
  &--inset#{&}--within:where(:focus-within) {
    outline-offset: -4px;
  }

  &--inset:focus-visible::before,
  &--inset#{&}--forced::before,
  &--inset#{&}--within:where(:focus-within)::before {
    inset: 1px;
  }
}