// core
.p-badge {
  display: inline-block;
  border-radius: 10px;
  text-align: center;
  padding: 0 0.5rem;
}

.p-overlay-badge {
  position: relative;
}

.p-overlay-badge .p-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  transform-origin: 100% 0;
  margin: 0;
}

.p-badge.p-badge-dot {
  width: 0.5rem;
  min-width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  padding: 0;
}

.p-badge-no-gutter {
  padding: 0;
  border-radius: 50%;
}

// theme
.p-badge {
  background: $badgeBg;
  color: $badgeTextColor;
  font-size: $badgeFontSize;
  font-weight: $badgeFontWeight;
  min-width: $badgeMinWidth;
  height: $badgeHeight;
  line-height: $badgeHeight;

  &.p-badge-secondary {
    background-color: $secondaryButtonBg;
    color: $secondaryButtonTextColor;
  }

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

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

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

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

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

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

  &.p-badge-lg {
    font-size: 1.5 * $badgeFontSize;
    min-width: 1.5 * $badgeMinWidth;
    height: 1.5 * $badgeHeight;
    line-height: 1.5 * $badgeHeight;
  }

  &.p-badge-xl {
    font-size: 2 * $badgeFontSize;
    min-width: 2 * $badgeMinWidth;
    height: 2 * $badgeHeight;
    line-height: 2 * $badgeHeight;
  }
}