@use "../../../styles/tokens/color";
@use "../../../styles/tools/generate";
@use "./config";
@use "./mixins";
@use "sass:map";

@layer components {
  .pill {
    @include mixins.base();
    @include mixins.sizes();

    &.surface-primary,
    &.surface-subtle,
    &.surface-moderate,
    &.surface-accent,
    &.fill-accent6 {
      color: var(--color-text-default);
    }

    &.surface-secondary,
    &.surface-tertiary,
    &.fill-moderate,
    &.fill-disabled {
      color: color.$white;
    }

    &.transparent {
      background-color: rgba(#ffffff, 0.5);
      color: var(--color-text-default);
    }
  }
}