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

$group-size: (
  'md': (
    font: abstract.rem(token.$font-size-0),
    gap: 8px,
  ),
  'lg': (
    font: abstract.rem(token.$font-size-1),
    gap: 12px,
  ),
);

.cds-badge-group {
  $this: &;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px 3px 4px;
  border: 1px solid;
  font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);

  @each $name, $info in $group-size {
    &--#{$name} {
      font-size: map.get($info, 'font');
      gap: map.get($info, 'gap');
    }
  } // group-size each

  @each $color-type, $color in badge-color.$color-map {
    $group-color: map.get($color, 'group');

    @if ($group-color) {
      &--#{$color-type} {
        color: map.get($color, 'color');
        background-color: map.get($group-color, 'bg');
        border-color: map.get($group-color, 'border');

        .cds-badge {
          border-color: map.get($group-color, 'hover-border');
          background-color: map.get($group-color, 'bg');
        }

        @at-root &.is-invert .cds-badge {
          background-color: map.get($group-color, 'invert-color');
          color: token.$base-white;
        }

        &:hover {
          background-color: map.get($group-color, 'hover-bg');
          border-color: map.get($group-color, 'hover-border');
        }
      }
    }
  } // type-color each

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

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

    border-radius: 10px;
    border-color: map.get($neutral-group-color, 'border');
    background-color: nth(map.get($color-neutral, 'bg'), 2);
    color: map.get($color-neutral, 'color');

    .cds-badge {
      background-color: nth(map.get($color-neutral, 'bg'), 2);
    }

    &:hover {
      background-color: nth(map.get($color-neutral, 'bg'), 1);
    }
  } // type-color each

  &__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}