@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;
@use 'sass:selector';

.ui-badge {
  @include txt-s-m;

  display: inline-flex;
  align-items: center;

  gap: 4px;
  padding: 4.5px 8.73px;
  border-radius: 8px;
  color: var(--badge-color);
  background-color: var(--badge-background);
  white-space: nowrap;

  @include element-variant('badge', 'neutral', (
          'color': $clr-cyan-500,
          'background': $clr-grey-300,
  ));

  @include element-variant('badge', 'positive', (
          'color': $clr-green-500,
          'background': $clr-green-100,
  ));

  @include element-variant('badge', 'warning', (
          'color': $clr-warn-500,
          'background': $clr-warn-200,
  ));

  @include element-variant('badge', 'negative', (
          'color': $clr-red-500,
          'background': $clr-red-100,
  ));

  @include element-variant('badge', 'marketing', (
          'color': $clr-white,
          'background': $clr-cyan-300,
  ));

  @include element-variant('badge', 'extended', (
          'color': $clr-cyan-500,
          'background': $clr-white,
  ));
}