@mixin svg-fill($color) {
  fill: $color;
}

@mixin svg-fill-opacity($value) {
  fill-opacity: $value;
}

@mixin use-fill($color) {
  use {
    fill: $color;
  }
}

@mixin use-fill-opacity($value) {
  use {
    fill-opacity: $value;
  }
}

@mixin all-fill($color) {
  @include svg-fill($color);
  @include use-fill($color);
}

@mixin all-fill-opacity($value) {
  @include svg-fill-opacity($value);
  @include use-fill-opacity($value);
}

@mixin bp-fill($color) {
  @include all-fill($color);
}

@mixin bp-fill--hover($color) {
  &--hover:hover {
    @include all-fill($color);
  }
}

@mixin bp-fill--active($color) {
  &--active:active {
    @include all-fill($color);
  }
}

@mixin bp-fill--disabled($color) {
  &--disabled:disabled {
    @include all-fill($color);

    &:hover,
    &:active {
      @include all-fill($color);
    }
  }
}

@mixin bp-fill--all($color) {
  @include bp-fill($color);
  @include bp-fill--hover($color);
  @include bp-fill--active($color);
  @include bp-fill--disabled($color);
}