$ods-badge-height-sm: 19px;
$ods-badge-height-md: 26px;
$ods-badge-height-lg: 28px;

@mixin ods-badge() {
  box-sizing: border-box;
  display: inline-flex;
  flex-flow: row;
  grid-gap: 0.25rem;
  align-items: center;
  border-radius: var(--ods-border-radius-sm);
  color: var(--ods-color-primary-900);
}

@mixin ods-badge-color($color) {
  @if $color == 'alpha' {
    background-color: var(--ods-color-alpha);
    color: var(--ods-color-primary-900);
  } @else if $color == 'beta' {
    background-color: var(--ods-color-beta);
    color: var(--ods-color-primary-900);
  } @else if $color == 'critical' {
    background-color: var(--ods-color-critical-100);
    color: var(--ods-color-critical-900);
  } @else if $color == 'information' {
    background-color: var(--ods-color-information-100);
    color: var(--ods-color-information-900);
  } @else if $color == 'neutral' {
    background-color: var(--ods-color-neutral-100);
    color: var(--ods-color-neutral-700);
  } @else if $color == 'new' {
    background-color: var(--ods-color-new);
    color: var(--ods-color-primary-900);
  } @else if $color == 'promotion' {
    background-color: var(--ods-color-promotion);
    color: var(--ods-color-neutral-000);
  } @else if $color == 'success' {
    background-color: var(--ods-color-success-100);
    color: var(--ods-color-success-900);
  } @else if $color == 'warning' {
    background-color: var(--ods-color-warning-100);
    color: var(--ods-color-warning-900);
  }
}

@mixin ods-badge-size($size) {
  @if $size == 'sm' {
    padding: 2px 6px;
    height: $ods-badge-height-sm;
    font-size: 0.75rem;
  } @else if $size == 'md' {
    padding: 4px 8px;
    height: $ods-badge-height-md;
    font-size: 0.875rem;
  } @else if $size == 'lg' {
    padding: 4px 10px;
    height: $ods-badge-height-lg;
    font-size: 1rem;
  }
}