@import '@lightspeed/cirrus-tokens/index.scss';

.cr-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 $cr-spacing-1;
  font-size: $cr-text-xs;
  font-weight: $cr-bold;
  line-height: $cr-spacing-4;
  letter-spacing: $cr-letter-spacing-3;
  border-radius: $cr-radius-1;
  text-transform: uppercase;

  &--default {
    background-color: $cr-gray-200;
    color: $cr-night;
  }

  &--success {
    background-color: $cr-green;
    color: $cr-snow;
  }

  &--danger {
    background-color: $cr-maple-200;
    color: $cr-snow;
  }

  &--info {
    background-color: $cr-blue-200;
    color: $cr-snow;
  }

  &--important {
    background-color: $cr-blue;
    color: $cr-snow;
  }

  &--warning {
    background-color: $cr-orange-200;
  }

  &--small {
    font-size: $cr-text-xxs;
    line-height: $cr-spacing-3;
    letter-spacing: $cr-letter-spacing-2;
  }

  &--pill {
    // Apply very large border-radius for the "pill" effect
    border-radius: 10rem;

    &:not(.cr-badge--small) {
      padding-left: $cr-spacing-2;
      padding-right: $cr-spacing-2;
    }
  }
}