@mixin tag-variant(
  $base-color,
  $background: shift-color($base-color, $tag-bg-scale),
  $border: shift-color($base-color, $tag-border-scale),
  $color: color-contrast($background),
  $hover-background: shift-color($base-color, $tag-hover-bg-scale),
  $hover-border: shift-color($base-color, $tag-hover-border-scale),
  $hover-color: $color
) {
  --tag-bg: #{$background};
  --tag-border-color: #{$border};
  --tag-color: #{$color};

  --tag-hover-bg: #{$hover-background};
  --tag-hover-border-color: #{$hover-border};
  --tag-hover-color: #{$hover-color};
}

.tag {
  --tag-padding-y: 0.25rem;
  --tag-padding-x: 6px;

  --tag-border-width: 0.325rem;
  --tag-border-radius: 0.25rem;

  --tag-font-size: 0.8rem;
  --tag-font-weight: normal;
  --tag-line-height: 1.1;

  --tag-bg: #{shift-color($primary, $tag-bg-scale)};
  --tag-border-color: #{rgba(black, 0.25)};
  --tag-color: white;

  --tag-hover-border-color: #{rgba(black, 0.35)};

  display: inline-block;
  padding: var(--tag-padding-y) var(--tag-padding-x) var(--tag-padding-y) calc(var(--tag-padding-x) - var(--tag-border-width) / 2);

  font-size: var(--tag-font-size);
  font-weight: var(--tag-font-weight);
  line-height: var(--tag-line-height);

  white-space: nowrap;

  border-left: var(--tag-border-width) solid var(--tag-border-color);
  border-radius: var(--tag-border-radius);

  background-color: var(--tag-bg);
  color: var(--tag-color);

  @at-root a#{&} {
    color: var(--tag-color);
    font-weight: inherit;

    &:hover, &:focus {
      text-decoration: none;

      background-color: var(--tag-hover-bg, var(--tag-bg));
      border-color: var(--tag-hover-border-color, var(--tag-border-color));
      color: var(--tag-hover-color, var(--tag-color));
    }
  }
}

@each $state, $value in $theme-colors {
  .tag-#{$state} {
    @include tag-variant($value);
  }
}

.tag-list {
  --tag-spacing-y: #{$tag-spacing-y};
  --tag-spacing-x: #{$tag-spacing-x};

  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--tag-spacing-y) var(--tag-spacing-x);

  list-style: none;
  margin: 0;
  padding: 0;
}