@mixin bug-icon-style($icon-class, $icon-color) {
  .icon-bug-reproduction.#{$icon-class} {
    color: $icon-color;
  }
  .icon-bug-fix-confirmation.#{$icon-class} {
    color: $icon-color;
  }
  .icon-review-bug-check.#{$icon-class} {
    color: $icon-color;
  }
  .icon-#{$icon-class},
  .bug-#{$icon-class},
  .icon-bug-fix-confirmation-#{$icon-class} {
    color: $icon-color;
    &.deselected {
      color: $input-bg-disabled;
    }
  }

  .btn-icon-#{$icon-class} {
    color: $petrol;
    background-color: $white;
    .icon-#{$icon-class} {
      color: $petrol;
    }
    &.active {
      border-color: $white;
      color: $white;
      .icon-#{$icon-class}{
        color: $white;
      }
    }
    &.disabled {
      .icon-#{$icon-class} {
        color: $input-bg-disabled;
      }
    }
  }
}

@include bug-icon-style('low', $low);
@include bug-icon-style('high', $high);
@include bug-icon-style('critical', $critical);
@include bug-icon-style('functional', $red);
@include bug-icon-style('spelling', $gray-light);
@include bug-icon-style('suggestion', $petrol);
@include bug-icon-style('content', $blue-dark);
@include bug-icon-style('visual', $orange);
@include bug-icon-style('user-story', $black);

.icon-user-outline-check.success,
.icon-user-story-check.success {
  color: $success;
}

.icon-user-outline-cross.danger,
.icon-user-outline-blocked.danger,
.icon-user-story-cross.danger {
  color: $danger;
}

.icon.success {
  color: $success;
}

.icon.danger {
  color: $danger;
}