@use './a11y';
@use './helpers';
@use './typo';

@mixin chip-label-variables--color-milk {
  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
  --sbb-chip-label-background-color: var(--sbb-background-color-3);
}

@mixin chip-label-variables--color-charcoal {
  --sbb-chip-label-color: var(--sbb-color-2-inverted);
  --sbb-chip-label-background-color: var(--sbb-background-color-2-inverted);
}

@mixin chip-label-variables--color-white {
  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
  --sbb-chip-label-background-color: var(--sbb-background-color-1);
}

@mixin chip-label-variables--color-granite {
  --sbb-chip-label-color: var(--sbb-color-2-inverted);
  --sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));
}

@mixin chip-label-variables--size-xxs {
  --sbb-chip-label-padding-block: 0em;
  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
  --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
}

@mixin chip-label-variables--size-xs {
  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);
  --sbb-chip-label-font-size: var(--sbb-text-font-size-xs);
}

@mixin chip-label-variables--size-s {
  --sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);
  --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);
  --sbb-chip-label-font-size: var(--sbb-text-font-size-s);
}

@mixin chip-label-rules {
  // We need an even value to make it work smoothly in Safari
  line-height: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(
    var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) +
      var(--sbb-chip-label-padding-block) * 2
  );
  background-color: var(--sbb-chip-label-background-color);
  padding-inline: var(--sbb-chip-label-padding-inline);
  border-radius: var(--sbb-border-radius-infinity);
  color: var(--sbb-chip-label-color);
  font-size: var(--sbb-chip-label-font-size);
  letter-spacing: var(--sbb-typo-letter-spacing-text);

  // Overflow hidden needed because line-height can be taller than height which can cause weird layout shifting
  overflow: hidden;

  @include a11y.if-forced-colors {
    outline: var(--sbb-border-width-1x) solid CanvasText;
    outline-offset: calc(-1 * var(--sbb-border-width-1x));
  }
}

@mixin chip-label-rules-ellipsis {
  @include helpers.ellipsis;

  display: inline-block;
}

@mixin chip($color: milk, $size: xxs) {
  @if $color == milk {
    @include chip-label-variables--color-milk;
  } @else if $color == charcoal {
    @include chip-label-variables--color-charcoal;
  } @else if $color == white {
    @include chip-label-variables--color-white;
  } @else if $color == granite {
    @include chip-label-variables--color-granite;
  }

  @if $size == xxs {
    @include chip-label-variables--size-xxs;
  } @else if $size == xs {
    @include chip-label-variables--size-xs;
  } @else if $size == s {
    @include chip-label-variables--size-s;
  }

  @include chip-label-rules;
}