@use 'sass:color';
// Base classes
.label,
.badge {
  display: inline-block;
  padding: 2px 4px;
  font-size: $font-size-base * 0.846;
  font-weight: $font-weight-semi-bold;
  line-height: 14px; // ensure proper line-height if floated
  color: $white;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: $gray-1;
}

// Labels & Badges
.label-tag {
  background-color: $purple;
  color: color.adjust($white, $lightness: -5%);
  white-space: nowrap;
  border-radius: 3px;
  text-shadow: none;
  font-size: 12px;
  padding: 0px 6px;
  line-height: 20px;
  height: 20px;

  svg {
    margin-bottom: 0;
  }

  .icon-tag {
    position: relative;
    top: 1px;
    padding-right: 4px;
  }

  &.muted {
    opacity: 0.85;
    background-color: color.adjust($purple, $lightness: -10%);
    color: $text-muted;
  }

  &:hover {
    opacity: 0.85;
    background-color: color.adjust($purple, $lightness: -10%);
  }

  &--gray {
    opacity: 0.85;
    background-color: $gray-1;
    border-color: $gray-2;

    &:hover {
      background-color: $gray-1;
    }
  }
}
