@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/breakpoints' as breakpoints;

.tag {
  $tag: &;

  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  border-width: 1px;
  border-style: solid;
  background-color: transparent;

  // komponenten bruker ekstra liten font-size og line-height
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: 600;
  border-radius: 4px;

  $colors: 'blueberry', 'neutral', 'cherry', 'banana', 'kiwi', 'plum';

  @each $color in $colors {
    &--#{$color},
    // Sørg for at fargene overstyrer dersom tag har type=button
    &--#{$color}[type='button'] {
      // banana og kiwi har unntak fra hovedregelen
      @if $color == 'banana' {
        color: map.get(palette.$palette-map, #{$color}800);
        border-color: map.get(palette.$palette-map, #{$color}700);
      } @else if $color == 'kiwi' {
        color: map.get(palette.$palette-map, #{$color}900);
        border-color: map.get(palette.$palette-map, #{$color}700);
      } @else {
        color: map.get(palette.$palette-map, #{$color}800);
        border-color: map.get(palette.$palette-map, #{$color}800);
      }

      &#{$tag}--emphasised {
        background-color: map.get(palette.$palette-map, #{$color}50);
      }
    }
  }

  &--medium {
    padding: 0 spacers.getSpacer(2xs);
    min-height: 1.625rem;

    &#{$tag}--has-icon {
      padding: 0 spacers.getSpacer(2xs) 0 0.375rem;
    }

    #{$tag}__icon {
      margin-right: spacers.getSpacer(4xs);
    }
  }

  &--large {
    padding: 0 spacers.getSpacer(xs);
    min-height: 1.875rem;

    &#{$tag}--has-icon {
      padding: spacers.getSpacer(4xs) spacers.getSpacer(xs) spacers.getSpacer(4xs) 0.375rem;
    }

    #{$tag}__icon {
      margin-right: spacers.getSpacer(4xs);
    }
  }
}