/// When we want to give an element some ‘attention’. Event wrapper to set
/// `:hover`, `:focus`, and `:active` pseudo-classes all at once with one
/// selector group. Will also set the style of the element it is applied to,
/// along with the `:link`, and `:visited` pseudo-classes if anything but `null`
/// or `false` is passed to the only argument.
///
/// @param {Bool | *} $self [false] - If this is set to `true`, the selector used
/// for the content directiive will include the element itself, plus `&:link`,
/// and `&:visited` in addition to the `&:hover`, `&:focus` and `&:active`
/// selectors which are always applid by default.
///
/// @link https://twitter.com/csswizardry/status/478938530342006784
/// @content [ Write the style rules you want to apply to the event selectors,
/// and they will be added within the content directive ]
///
/// @group Utilities
@mixin on-event($self: false) {
  @if $self {
    &,
    &:link,
    &:visited,
    &:hover,
    &:focus,
    &:active {
      @content;
    }
  } @else {
    &:hover,
    &:focus,
    &:active {
      @content;
    }
  }
}

/// When we give an element some ‘attention’. Event wrapper to set all events
/// with one selector group.
///
/// @param {Bool} $self [false] - If this is set to `true`, the selector used
/// for the content directiive will include the element itself, plus `&:link`,
/// and `&:visited` in addition to the `&:hover`, `&:focus` and `&:active`
/// selectors which are always applid by default.
///
/// @link https://twitter.com/csswizardry/status/478938530342006784
/// @content [ Write the style rules you want to apply to the event selectors,
/// and they will be added within the content directive ]
///
/// @group Utilities
///
/// @alias on-event
@mixin attention($self: false) {
  @include on-event($self) {
    @content;
  }
}

/// When we give an element some ‘attention’. Event wrapper to set all events
/// with one selector group.
///
/// @param {Bool} $self [false] - If this is set to `true`, the selector used
/// for the content directiive will include the element itself, plus `&:link`,
/// and `&:visited` in addition to the `&:hover`, `&:focus` and `&:active`
/// selectors which are always applid by default.
///
/// @link https://twitter.com/csswizardry/status/478938530342006784
/// @content [ Write the style rules you want to apply to the event selectors,
/// and they will be added within the content directive ]
///
/// @group Utilities
///
/// @alias on-event
@mixin one-event($self: false) {
  @include on-event($self) {
    @content;
  }
}