.badge {
  background: $palette-blue-500;
  display: inline-flex;
  padding: 6px 10px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  height: 24px;
  max-width: 100%;

  @include rounded($rounded);
}

.badge__label {
  @extend %ellipsis;
}

@include badge-color('cyan');
@include badge-color('green');
@include badge-color('yellow');
@include badge-color('red');
@include badge-color('magenta');
@include badge-color('purple');
@include badge-color('neutral');

.badge--small {
  padding: 4px 8px;
  font-size: 10px;
  height: 20px;
}

.badge--large {
  padding: 4px 10px;
  gap: 8px;
  font-size: 13px;
  height: 28px;
}

.badge--rounded {
  @include rounded($rounded-2xl);
}

.badge__indicator {
  width: 5px;
  height: 5px;
  flex-shrink: 0;

  @include rounded($rounded-3xl);
}

.badge--bold {
  font-weight: bold;
}