@use 'styles/variables.scss' as *;
@use './theme.scss' as *;

$badge: 'badge';

.#{$badge} {
  @include badge-theme-modifiers();

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 1px;

  &--primary {
    background: badge-theme-color('primary-background');
    border: 1px solid badge-theme-color('tertiary-border');
    color: badge-theme-color('primary-color');
  }

  &--secondary {
    background: badge-theme-color('secondary-background');
    border: 1px solid badge-theme-color('secondary-border');
    color: badge-theme-color('secondary-color');
  }

  &--tertiary {
    background: badge-theme-color('tertiary-background');
    border: 1px solid badge-theme-color('tertiary-border');
    color: badge-theme-color('tertiary-color');
  }

  &--quaternary {
    background: badge-theme-color('quaternary-background');
    border: 1px solid badge-theme-color('tertiary-border');
    color: badge-theme-color('tertiary-color');
  }

  &--quinary {
    background: badge-theme-color('quinary-background');
    border: 1px solid badge-theme-color('quinary-border');
    color: badge-theme-color('quinary-color');
  }
}