@use 'sass:color';
@use 'sass:map';
@use '../../styles/mixins';
@use '../../styles/typography';

$status-badge-colors: (
  'success': #00b579,
  'warning': #ffaa00,
  'error': #f43841,
  'info': #019fd1,
  'neutral': #787878,
  'financial': #19457e,
  'waiting': #dc8338,
  'stage': #5992e1,
  'recovery': #00d68f,
  'alert': #f680ba,
  'special': #7c63d7,
);

:host {
  display: inline-block;

  .status-badge {
    @include mixins.flexCentering;
    @include typography.text-xs;
    font-weight: map.get(typography.$font-weights, semibold);
    box-sizing: border-box;
    min-height: 20px;
    max-height: 20px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
  }

  @each $name, $badge-color in $status-badge-colors {
    .status-badge--#{$name} {
      color: color.scale($badge-color, $lightness: -20%);
      background-color: rgba($badge-color, 0.15);
      border-color: $badge-color;
    }
  }
}