bs-pill {
  display: inline-block;
  /* ------------------------------ Button and Link Styles ------------------------------ */
  /* ------------------------------ Background Colors ------------------------------ */
  /* ------------------------------ Status Styles ------------------------------ */
  /* ----- Status Colors ----- */
  /* ------------------------------ Filter Styles ------------------------------ */
  /* ----- Filter Add Styles ----- */
  /* Black + */
  /* White + */
  /* ----- Filter Remove Styles ----- */
  /* Black X */
  /* White X */
  /* Dark Red X */
  /* Light Red X */
  /* ----- Filter Active Styles ----- */
  /* White X */
  /* Black X */
  /* ------------------------------ Live Now Styles ------------------------------ */
  /* ----- Disabled Styles ----- */
}
bs-pill .bs-pill {
  --pill-background: var(--bs-bg-medium);
  --pill-border: transparent;
  --pill-text: var(--bs-royal-base);
  --pill-gap: var(--bs-space-2);
  align-items: center;
  appearance: none;
  background-color: var(--pill-background);
  border: 1px solid var(--pill-border);
  border-radius: 4px;
  color: var(--pill-text);
  display: inline-flex;
  font-size: var(--bs-text-xs);
  gap: var(--pill-gap);
  line-height: 1.33;
  padding: 4px 6px;
  text-decoration: none;
  vertical-align: middle;
}
bs-pill :where(.bs-pill > svg) {
  height: 1rem;
}
bs-pill :is(a, button).bs-pill {
  color: var(--pill-text);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
bs-pill :is(a, button).bs-pill:is(:hover, :focus) {
  --pill-border: var(--bs-royal-400);
  color: var(--pill-text);
  outline: transparent;
}
bs-pill :where(.dark) :is(a, button).bs-pill:is(:hover, :focus) {
  --pill-border: var(--bs-royal-200);
}
bs-pill :where(.box, [class*="bg-"]:not([class~="bg-white"])) .bs-pill:where(:not([data-variant^="live"], [data-active])) {
  --pill-background: var(--bs-bg-base);
}
bs-pill :where(.box[data-invert]) .bs-pill {
  --pill-background: var(--bs-bg-invert-base-subtle);
  --pill-text: var(--bs-gray-100);
}
bs-pill :where(.box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
  --pill-border: var(--bs-gray-100);
}
bs-pill :where(.dark .box[data-invert]) .bs-pill {
  --pill-text: var(--bs-royal-400);
}
bs-pill :where(.dark .box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {
  --pill-border: var(--bs-royal-400);
}
bs-pill .bs-pill:where([data-status]) {
  --status-color: var(--bs-blue-base);
}
bs-pill .bs-pill:where([data-status])::before {
  background-color: var(--status-color);
  border-radius: 100%;
  content: "";
  height: 12px;
  width: 12px;
}
bs-pill .bs-pill:where([data-status^="active"]) {
  --status-color: var(--bs-blue-base);
}
bs-pill .bs-pill:where([data-status^="complete"]) {
  --status-color: var(--bs-purple-400);
}
bs-pill .bs-pill:where([data-status^="inactive"]) {
  --status-color: var(--bs-gray-300);
}
bs-pill .bs-pill:where([data-status^="error"]) {
  --status-color: var(--bs-red-400);
}
bs-pill .bs-pill:where([data-status^="positive"]) {
  --status-color: #16986D;
}
bs-pill .bs-pill:where([data-status^="warning"]) {
  --status-color: var(--bs-orange-warning);
}
bs-pill .bs-pill:where([data-variant^="filter"]) {
  --pill-background: var(--bs-bg-base);
  --pill-border: var(--bs-border);
  --pill-text: var(--bs-ink-base);
}
bs-pill .bs-pill:where([data-variant^="filter"]):is(:hover, :focus) {
  --pill-border: var(--bs-border);
}
bs-pill :is(a, button).bs-pill:where([data-variant^="filter"]):is(:hover, :focus) {
  --pill-border: var(--bs-ink-base);
}
bs-pill .bs-pill:where([data-variant^="filter"][data-variant*="add"])::after {
  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%230A0B19'/%3E%3C/svg%3E");
}
bs-pill :where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="add"]):not(:disabled, [aria-disabled=true])::after {
  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
bs-pill .bs-pill:where([data-variant^="filter"][data-variant*="remove"])::after {
  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%230A0B19'/%3E%3C/svg%3E%0A");
}
bs-pill :where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):not(:disabled, [aria-disabled=true])::after {
  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}
bs-pill .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):hover::after {
  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23D91214'/%3E%3C/svg%3E%0A");
}
bs-pill :where(.dark) .bs-pill:where([data-variant^="filter"][data-variant*="remove"]):hover::after {
  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23F15355'/%3E%3C/svg%3E%0A");
}
bs-pill .bs-pill:where([data-variant^="filter"][data-active]) {
  --pill-background: var(--bs-blue-base);
  --pill-border: transparent;
  --pill-text: var(--bs-white);
}
bs-pill .bs-pill:where([data-variant^="filter"][data-active]):is(:hover, :focus) {
  --pill-border: transparent;
}
bs-pill :is(a, button).bs-pill:where([data-variant^="filter"][data-active]):is(:hover, :focus) {
  --pill-background: var(--bs-blue-500);
  --pill-border: transparent;
}
bs-pill .bs-pill:where([data-variant^="filter"][data-active])::after {
  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23fff'/%3E%3C/svg%3E");
}
bs-pill .bs-pill:where([data-variant^="filter"][data-active]):where(:disabled, [aria-disabled="true"])::after {
  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%230A0B19'/%3E%3C/svg%3E%0A");
}
bs-pill .bs-pill:where([data-variant^="live"]) {
  --pill-background: var(--bs-royal-400);
  --pill-text: var(--bs-white);
  --pill-gap: var(--bs-space-1);
  text-transform: uppercase;
}
bs-pill .bs-pill:where([data-variant^="live"]):hover {
  --pill-border: transparent;
}
bs-pill .bs-pill:where([data-variant^="live"])::before {
  background-color: var(--bs-red-400);
  border: 3px solid var(--bs-white);
  border-radius: 100%;
  content: "";
  height: 12px;
  width: 12px;
}
bs-pill .bs-pill:is(:disabled, [aria-disabled=true]) {
  pointer-events: none;
  color: var(--bs-ink-disabled);
  background-color: var(--bs-bg-disabled);
}
bs-pill .bs-pill:where([data-variant^="filter"]):not([data-active]):is(:disabled, [aria-disabled=true]) {
  --pill-border: var(--bs-gray-400);
}