[data-component="tag"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: fit-content;
  height: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 88%, transparent);
  color: var(--muted-foreground);
  font-size: 0.625rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 0 0.5rem;
  white-space: nowrap;
}

[data-component="tag"][data-tone="brand"] {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-foreground);
}

[data-component="tag"][data-tone="success"] {
  border-color: transparent;
  background: color-mix(in oklab, var(--success) 15%, transparent);
  color: var(--success);
}

[data-component="tag"][data-tone="warning"] {
  border-color: transparent;
  background: color-mix(in oklab, var(--warning) 15%, transparent);
  color: var(--warning);
}

[data-component="tag"][data-tone="critical"] {
  border-color: transparent;
  background: color-mix(in oklab, var(--destructive) 15%, transparent);
  color: var(--destructive);
}

[data-component="tag"][data-tone="info"] {
  border-color: color-mix(in oklab, var(--info) 45%, transparent);
  background: color-mix(in oklab, var(--info) 8%, transparent);
  color: var(--info);
}

[data-component="tag"][data-size="large"] {
  height: 1.5rem;
  font-size: 0.75rem;
}
