@use "sass:math";

// core
.p-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.p-tag-icon,
.p-tag-value,
.p-tag-icon.pi {
  line-height: 1.5;
}

.p-tag.p-tag-rounded {
  border-radius: 10rem;
}

// theme
.p-tag {
  background: $badgeBg;
  color: $badgeTextColor;
  font-size: $badgeFontSize;
  font-weight: $badgeFontWeight;
  padding: $tagPadding;
  border-radius: $borderRadius;

  &.p-tag-success {
    background-color: $successButtonBg;
    color: $successButtonTextColor;
  }

  &.p-tag-info {
    background-color: $infoButtonBg;
    color: $infoButtonTextColor;
  }

  &.p-tag-warning {
    background-color: $warningButtonBg;
    color: $warningButtonTextColor;
  }

  &.p-tag-danger {
    background-color: $dangerButtonBg;
    color: $dangerButtonTextColor;
  }

  @if variable-exists(secondaryMessageBg) {
    &.p-tag-secondary {
      background-color: $secondaryButtonBg;
      color: $secondaryButtonTextColor;
    }

    &.p-tag-contrast {
      background-color: $contrastButtonBg;
      color: $contrastButtonTextColor;
    }
  }

  .p-tag-icon {
    font-size: $badgeFontSize;

    &:not(:last-child) {
      margin-right: math.div($inlineSpacing, 2);
    }

    &.p-icon {
      width: $badgeFontSize;
      height: $badgeFontSize;
    }
  }
}
