@import "./../../style-config/colors";

.carbon-pill {
  border-radius: 3px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 1px;
  padding: 2px 7px;
  text-align: center;
}

@mixin pill-theme($type, $color, $border, $background, $color-hover) {
  .carbon-pill--#{$type}--empty {
    border: 1px solid $color;
    color: $color;
  }

  .carbon-pill--#{$type}--fill {
    background-color: $color;
    color: $white;
  }
}

.carbon-pill--link {
  &:not([class*="disabled"]) {
    &:hover {
      background: $blue-dark;
      border-color: $blue-dark;
      color: white;
      cursor: pointer;
    }
  }
}

.carbon-pill--disabled--empty {
  border: 1px solid $grey-mid !important;
  color: $grey-mid !important;
}

.carbon-pill--disabled--fill {
  background-color: $grey-dark-blue-20 !important;
  border: 1px solid $grey-dark-blue-20 !important;
  color: $grey-dark-blue-60 !important;
}

@each $set in $colorIconSets {
  @include pill-theme($set...);
}