/* Tag Pill v2 Component — UI Comprehensive Refactor v2
 * Requires: tokens.css, spacing.css
 * Unified tag style for canonical, custom, and filter tags.
 *
 * Usage:
 *   <span class="tag-pill">спам</span>
 *   <span class="tag-pill is-active">вакансия</span>
 *   <button class="tag-pill tag-pill--removable">
 *     недвижимость
 *     <svg class="icon tag-pill__remove"><use href="#i-x"/></svg>
 *   </button>
 *   <span class="tag-pill tag-pill--filter is-active">CPA</span>
 */

/* ── Base tag pill ── */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-2);            /* 4px 8px — tighter than badge */
  border-radius: var(--radius-full);
  font-size: var(--font-xs);             /* 12px */
  font-weight: var(--weight-regular);
  line-height: 1.3;
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  cursor: default;
}

.tag-pill:hover {
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.25);
  color: var(--color-brand-500);
}

/* ── Active / selected state ── */
.tag-pill.is-active {
  background: var(--color-brand-500);
  border-color: var(--color-brand-500);
  color: var(--text-on-brand);
  font-weight: var(--weight-medium);
}

/* ── Removable variant (interactive button) ── */
.tag-pill--removable {
  cursor: pointer;
  border: none;
  padding: 4px var(--space-2);
}

.tag-pill--removable:hover .tag-pill__remove {
  color: var(--color-error-500);
}

/* ── Remove icon ── */
.tag-pill__remove {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 10px;
  transition: color 0.12s ease;
  width: 10px;
  height: 10px;
}

/* ── Filter variant (clickable, slightly bolder style) ── */
.tag-pill--filter {
  cursor: pointer;
  font-weight: var(--weight-medium);
  border: 1px solid var(--border-default);
  padding: 4px var(--space-2) 4px var(--space-2);
}

.tag-pill--filter:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.30);
  color: var(--color-brand-500);
}

.tag-pill--filter.is-active {
  background: var(--color-brand-500);
  border-color: var(--color-brand-500);
  color: var(--text-on-brand);
}