/*
 * TW badge: единственный owner для status, count и taxonomy labels.
 * По умолчанию все badges нейтральны. Semantic tones включаются только
 * явной настройкой data-badge-colors="true" на product root.
 */

.tw-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 20px;
  padding: var(--tw-space-0-5) var(--tw-space-1-5);
  align-items: center;
  gap: var(--tw-space-1);
  overflow: hidden;
  color: var(--tw-color-text-muted);
  background: var(--tw-color-surface-subtle);
  border: 1px solid var(--tw-color-border);
  border-radius: var(--tw-radius);
  font-size: var(--tw-font-micro);
  font-weight: var(--tw-weight-semibold);
  line-height: var(--tw-line-micro);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.tw-badge,
a.tw-badge {
  cursor: pointer;
  text-decoration: none;
}

button.tw-badge:hover,
a.tw-badge:hover,
.tw-badge[data-editable="true"]:hover {
  color: var(--tw-color-text);
  background: var(--tw-color-surface-raised);
  border-color: var(--tw-color-border-strong);
}

.tw-badge .tw-icon {
  width: 12px;
  height: 12px;
}

.tw-badge-list {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tw-space-1);
}

.tw-badge[data-save-state="saving"] {
  opacity: .68;
}

.tw-badge[data-save-state="saved"] {
  border-color: var(--tw-color-border-strong);
}

.tw-badge:is(.tw-is-ready, .tw-is-success, .tw-is-warning, .tw-is-error, .tw-is-muted) {
  color: var(--tw-color-text-muted);
}

[data-badge-colors="true"] .tw-badge:is(.tw-is-ready, .tw-is-success) {
  color: var(--tw-color-success);
}

[data-badge-colors="true"] .tw-badge.tw-is-warning {
  color: var(--tw-color-warning);
}

[data-badge-colors="true"] .tw-badge.tw-is-error {
  color: var(--tw-color-danger);
}

html[data-input-modality="keyboard"] :is(button.tw-badge, a.tw-badge):focus-visible {
  outline: 2px solid var(--tw-color-focus);
  outline-offset: 2px;
}