.MuiChip-root.impact_badges_only_label_subtle {
  height: 24px;
  background: $subtleDefaultColor;
  padding: 2px 8px;
  max-width: max-content;
  cursor: default;
  .MuiChip-label {
    padding: 0px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    font-family: $fontFamily;
    color: $grayBadge;
  }
  &.small-badge {
    height: 20px;
    .MuiChip-label {
      line-height: 16px;
    }
  }
  svg {
    width: 14px;
    height: 14px;
    cursor: default !important;
  }

  &:hover,
  &.Mui-focusVisible {
    background: $subtleDefaultColor;
  }
}

.MuiChip-root.info-badge-subtle {
  background: $subtleInfoColor;
  .MuiChip-label {
    color: $primaryBadge;
  }
  &:hover,
  &.Mui-focusVisible {
    background: $subtleInfoColor;
  }
}

.MuiChip-root.success-badge-subtle {
  background: $subtleSuccessColor;
  .MuiChip-label {
    color: $subtleSuccessFontColor;
  }
  &:hover,
  &.Mui-focusVisible {
    background: $subtleSuccessColor;
  }
}

.MuiChip-root.warning-badge-subtle {
  background: $subtleWarningColor;
  .MuiChip-label {
    color: $yellowBadgeOutlined;
  }
  &:hover,
  &.Mui-focusVisible {
    background: $subtleWarningColor;
  }
}

.MuiChip-root.error-badge-subtle {
  background: $subtleErrorColor;
  .MuiChip-label {
    color: $subtleErrorFontColor;
  }
  &:hover,
  &.Mui-focusVisible {
    background: $subtleErrorColor;
  }
}
