// filled badge with label

.MuiChip-root.impact_badges_only_label_filled {
  height: 24px;
  background: $grayBadge;
  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: $whiteColor;
  }
  &.small-badge {
    height: 20px;
    .MuiChip-label {
      line-height: 16px;
    }
  }
  svg {
    width: 14px;
    height: 14px;
    cursor: default !important;
  }

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

.MuiChip-root.info-badge-filled {
  background: $primaryBadge;
  &:hover,
  &.Mui-focusVisible {
    background: $primaryBadge;
  }
}

.MuiChip-root.success-badge-filled {
  background: $greenBadge;
  &:hover,
  &.Mui-focusVisible {
    background: $greenBadge;
  }
}

.MuiChip-root.warning-badge-filled {
  background: $yellowBadge;
  &:hover,
  &.Mui-focusVisible {
    background: $yellowBadge;
  }
  .MuiChip-label {
    color: $mainFontColor;
  }
  & svg {
    color: $mainFontColor !important;
  }
}

.MuiChip-root.error-badge-filled {
  background: $redBadge;
  &:hover,
  &.Mui-focusVisible {
    background: $redBadge;
  }
}
