@mixin unfocused-style {
  @content;

  &:focus:not(:focus-visible, :hover) {
    @content;
  }
}

@mixin focused-style {
  &:hover,
  &:focus {
    @content;
  }

  &:focus-visible {
    @content;
  }
}

@mixin visible-for-screenreader-only {
  display: block;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  visibility: visible;
  clip: rect(0 0 0 0);
  padding: 0;
  position: absolute;
}