@use './focus';

/* Button */
button {
  &:focus-visible {
    @include focus.gux-focus-ring;
  }
}

/* Input */
input {
  &:focus-visible {
    @include focus.gux-focus-ring;
  }
}

/* Helper classes */
.gux-focus-ring-focused {
  &:focus {
    @include focus.gux-focus-ring;
  }
}

.gux-focus-ring-focused-within {
  &:focus-within {
    @include focus.gux-focus-ring;
  }
}

.gux-focus-ring-focused-visible {
  &:focus-visible {
    @include focus.gux-focus-ring;
  }
}

.gux-focus-ring-small-focused {
  &:focus {
    @include focus.gux-focus-ring-small;
  }
}

.gux-focus-ring-small-focused-within {
  &:focus-within {
    @include focus.gux-focus-ring-small;
  }
}

.gux-focus-ring-small-focused-visible {
  &:focus-visible {
    @include focus.gux-focus-ring-small;
  }
}

.gux-focus-ring {
  @include focus.gux-focus-ring;
}

.gux-focus-ring-small {
  @include focus.gux-focus-ring-small;
}