/* Capsule geometry is fixed: a tag reads as one size everywhere, and only its
 * palette varies. Tone colors ride background/border/color so a render site can
 * still position the tag with its own class without touching the palette. */
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  corner-shape: round;
  padding: 1px 8px;
  font-size: 11px;
  line-height: 17px;
  font-weight: 500;
  white-space: nowrap;
}

.tag[data-tone='outline'] {
  border: 0.5px solid var(--dsw-alias-border-l4);
  color: var(--dsw-alias-label-tertiary);
}

.tag[data-tone='solid'] {
  background: var(--dsw-alias-label-primary);
  color: var(--dsw-alias-bg-layer-3);
}

.tag[data-tone='neutral'] {
  background: var(--dsw-alias-bg-module-platform);
  color: var(--dsw-alias-label-secondary);
}

.tag[data-tone='quiet'] {
  color: var(--dsw-alias-label-tertiary);
}

/* Status tones tint their own color for the fill, so a palette change moves
 * fill and text together and neither needs a second token. The tint is 10%,
 * except `warning`, which keeps the 12% the plugin inventory's conditional
 * tag shipped with — matching it is what makes this a pure consolidation. */
.tag[data-tone='success'] {
  background: color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent);
  color: var(--dsw-alias-state-success-primary);
}

.tag[data-tone='info'] {
  background: color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent);
  color: var(--dsw-alias-state-business-primary);
}

.tag[data-tone='warning'] {
  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent);
  color: var(--dsw-alias-state-warn-primary);
}

.tag[data-tone='danger'] {
  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent);
  color: var(--dsw-alias-state-error-primary);
}
