// Only apply hover effect if it's supported
@mixin hover {
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }
}

@mixin hover-and-focus {
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }

  &:focus {
    @content;
  }
}