@use 'sass:list';
@use '../helpers';
@use './wrap-if' as mixins;

$_allowed-types: ('action', 'negative');
$_size: helpers.space(0.5);
$_color-size: $_size - helpers.space(0.25);

@mixin with-outer-focus($type, $target: null) {
  @if not list.index($_allowed-types, $type) {
    @error '$type must be one of (#{$_allowed-types})';
  }

  @include mixins.wrap-if($target) {
    outline: none;
  }

  &:focus #{$target} {
    box-shadow: //
      0 0 0 $_color-size helpers.color('border-focus-inner'),
      0 0 0 $_size helpers.color('border-#{$type}-focus');
  }
}