@use 'sass:map';
@use 'sass:list';
@use '../../base/token';
@use '../../base/variable';
@use '../../abstract';
@use './badge-color';

$badge-size: (
  'sm': (
    'font': abstract.rem(token.$font-size-0),
    'padding': 2px 10px,
    'height': 22px,
  ),
  'md': (
    'font': abstract.rem(token.$font-size-1),
    'padding': 1px 10px,
    'heigh': 25px,
  ),
  'lg': (
    'font': abstract.rem(token.$font-size-1),
    'padding': 4px 10px,
    'height': 29px,
  ),
);

.cds-badge {
  $this: &;
  $color-neutral: map.get(badge-color.$color-map, 'neutral');

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

  color: map.get($color-neutral, 'color');
  border-color: nth(map.get($color-neutral, 'border'), 1);
  font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);

  // size
  // ==============================================
  @each $size, $info in $badge-size {
    &--#{$size} {
      height: map.get($info, 'height');
      font-size: map.get($info, 'font');
      padding: map.get($info, 'padding');
    }
  } // sizes each

  &__icon {
    display: inline-flex;
    margin-inline-end: 2px;
  }

  // color
  // pill, square common color
  // ==================================
  @each $color-type, $color-info in badge-color.$color-map {
    &--#{$color-type} {
      color: map.get($color-info, 'color');
      background-color: nth(map.get($color-info, 'bg'), 1);
      border: 1px solid nth(map.get($color-info, 'border'), 1);

      &#{$this}--pill-outline {
        background-color: nth(map.get($color-info, 'bg'), 2);
        border: 1px solid nth(map.get($color-info, 'border'), 2);
      }
    }

    &__icon--#{$color-type} {
      color: map.get($color-info, 'color');
    }
  }

  // dark color
  // pill, square common color
  // ==================================
  @each $color-type, $color-info in badge-color.$dark-color-map {
    &--dark-#{$color-type} {
      color: map.get($color-info, 'color');
      background-color: nth(map.get($color-info, 'bg'), 1);
      border: 1px solid nth(map.get($color-info, 'border'), 1);
    }

    &__icon--dark-#{$color-type} {
      color: map.get($color-info, 'color');
    }
  }

  &--pill {
    border-radius: 16px;
  }

  &--square {
    border-radius: 6px;
  }

  &--pill-outline {
    border-radius: 16px;
  }

  &--square-outline {
    border-radius: 6px;
    border-color: var(--gray-200);
    background-color: var(--base-white);
  }

  &--disabled {
    $disabled: map.get(badge-color.$color-map, 'disabled');
    color: map.get(badge-color.$color-disabled, 'color');
    background-color: map.get(badge-color.$color-disabled, 'bg');
    border: 1px solid map.get(badge-color.$color-disabled, 'border');
  }

  &.has-icon {
    padding-inline-start: 8px;
  }

  svg {
    margin-inline-end: 4px;
  }
}