@use 'sass:list';
@use 'imports-default/imports' as colours;

@mixin dsFocusStyles($focusInset, $focusBoxShadowColor, $focusOutlineColor, $inset, $offsetMultiplier) {
  $boxShadowWidth: var(--ds-borderWidth-thin);
  $outlineOffset: var(--ds-borderWidth-thin);

  @if $inset {
    $boxShadowWidth: var(--ds-borderWidth-thick);
    $outlineOffset: calc(var(--ds-borderWidth-thin) * -1);
  }

  box-shadow: #{$focusInset} 0 0 0 $boxShadowWidth $focusBoxShadowColor;
  outline: var(--ds-borderWidth-thin) solid $focusOutlineColor;
  outline-offset: calc($outlineOffset * $offsetMultiplier);
}

@mixin dsFocusRing($inverted: false, $inset: false, $focusVisible: true, $focusWithin: false, $offsetMultiplier: 1) {
  $focusOutlineColor: colours.$dsBorderColorBlack;
  $focusBoxShadowColor: colours.$dsBorderColorWhite;
  $focusInset: '';

  @if $inverted {
    $focusOutlineColor: colours.$dsBorderColorWhite;
    $focusBoxShadowColor: colours.$dsBorderColorBlack;
  }

  @if $inset {
    $focusInset: inset;
  }

  $selectors: ();

  @if $focusVisible {
    $selectors: list.append($selectors, ':focus-visible');
  }

  @if $focusWithin {
    $selectors: list.append($selectors, ':focus-within');
  }

  @each $selector in $selectors {
    &#{$selector} {
      @include dsFocusStyles($focusInset, $focusBoxShadowColor, $focusOutlineColor, $inset, $offsetMultiplier);
    }
  }
}