@use 'sass:map';
@use '../utilities/functions' as *;
@use '../utilities/tokens.map' as *;
@use '../utilities/mixins' as *;

%tag-base {
  width: fit-content;
  line-height: line-height(body);
  display: inline-flex;
  align-items: center;
  gap: fluid(4);
}

.tag-sm,
.tag-md,
.tag-lg {
  @extend %tag-base;
}

@mixin tag-size($py, $px, $font, $radius) {
  padding: $py $px;

  @include font-scale($font);

  border-radius: $radius;
}

.tag-- {
  &sm {
    @include tag-size(fluid(2), fluid(8), body--sm, radius(sm));
  }

  &md {
    @include tag-size(fluid(4), fluid(8), body--md, radius(md));
  }

  &lg {
    @include tag-size(fluid(8), fluid(12), body--lg, radius(lg));
  }

  &circle {
    border-radius: radius(circle) !important;
  }
}

$variants: (
  surface: (
    primary: (
      text: text(body),
      bg: bg(surface, primary),
    ),
    caution: (
      text: text(body),
      bg: bg(surface, caution),
    ),
    danger: (
      text: text(body),
      bg: bg(surface, danger),
    ),
    success: (
      text: text(body),
      bg: bg(surface, success),
    ),
    neutral: (
      text: text(body),
      bg: bg(surface, neutral),
    ),
  ),
  container: (
    primary: (
      text: text(inverse),
      bg: bg(container, primary),
    ),
    caution: (
      text: text(inverse),
      bg: bg(container, caution),
    ),
    danger: (
      text: text(inverse),
      bg: bg(container, danger),
    ),
    success: (
      text: text(inverse),
      bg: bg(container, success),
    ),
    neutral: (
      text: text(body),
      bg: bg(container, neutral),
    ),
  ),
);

@each $type in (surface, container) {
  @each $name, $colors in map.get($variants, $type) {
    .tag--#{$type}-#{$name} {
      display: inline-flex;
      color: map.get($colors, text);
      background: map.get($colors, bg);
    }
  }
}