/// Used to generate selectors for pseudo states
///
/// @param {string} $state
@mixin pseudo-state($state) {
  $scope: &;
  $selector: ();

  @each $item in $scope {
    $chunk: '#{$item}:#{$state}';

    // pseudo-elements must be at the end
    @if str-index($chunk, ':before') and str-index($chunk, ':before') != (str-length($chunk) - 5) {
      $chunk: str-replace($chunk, ':before', '') + ':before';
    }
    @if str-index($chunk, ':after') and str-index($chunk, ':after') != (str-length($chunk) - 5) {
      $chunk: str-replace($chunk, ':after', '') + ':after';
    }

    $selector: append($selector, $chunk, comma);
  }

  @at-root #{$selector} {
    @content;
  }
}

/// Alias for `pseudo-state` mixin with $state: 'hover'
@mixin hover {
  @include pseudo-state('hover') {
    @content;
  }
}