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

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

  // Static
  --pill-padding-x: #{$pill-padding-x};
  --pill-padding-y: #{$pill-padding-y};
  --pill-border-width: 1px;
  --pill-border-style: solid;
  --pill-font-weight: #{$pill-font-weight};
  --pill-font-size: #{$pill-font-size};

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

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

.pills {
  @include make-group-row;

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

  &.pills--grouped {
    @include make-grouped-row(".pill");
  }
}