@use "sass:color";
@use "./../helpers" as *;
@use "./../variables" as *;
@use "./../functions" as *;
@use "./../mixins/colors" as *;
@use "./../mixins/group" as *;

.tag {
  --tag-color: var(--html-color);
  --tag-border-color: var(--border-color-main);
  --tag-background: var(--white);

  // Static
  --tag-padding-x: #{$tag-padding-x};
  --tag-padding-y: #{$tag-padding-y};
  --tag-border-width: 1px;
  --tag-border-style: solid;
  --tag-border-radius: var(--border-radius-medium);
  --tag-round-border-radius: var(--border-radius-round);
  --tag-font-weight: #{$tag-font-weight};
  --tag-font-size: #{$tag-font-size};

  color: var(--tag-color);
  padding: var(--tag-padding-y) var(--tag-padding-x);
  border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
  border-radius: var(--tag-border-radius);
  background: var(--tag-background);
  font-weight: var(--tag-font-weight);
  font-size: var(--tag-font-size);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  justify-content: center;
  height: auto;
  min-width: var(--spacer);
  outline: 0;

  &.tag--rounded {
    border-radius: var(--tag-round-border-radius);
  }

  &.tag--square {
    border-radius: 0;
  }
}

@each $key, $value in $all-colors {
  .tag--#{$key} {
    --tag-color: #{color-flip($key, $value, $tag-color-flip-threshold, $tag-color-flip-l)};
    --tag-background: var(--#{$key});
    --tag-border-color: color-mix(in oklab, var(--#{$key}), #000 #{$border-shade-percentage});
  }
}

.tags {
  @include make-group-row;

  & .tag {
    &:empty {
      align-self: stretch;
    }
  }

  &.tags--grouped {
    @include make-grouped-row(".tag");
  }
}