/* ─── Chip — shared component styles ──────────────────────────────────────────
   Single source of truth for component CSS.
   Values: site/tokens.css (--ds-chip-* tokens)
   Consumers: site/preview/chip.html + src/components/Chip/Chip.tsx
   Naming: ds-chip prefix replaces CSS Modules scoping
   States: data-attributes only
     data-variant='soft|outline'
     data-semantic='neutral|info'
     data-size='xs|sm|md'
     data-active (boolean attribute)
     data-disabled (boolean attribute)
     data-high-contrast (boolean attribute)
   Note: Outline active — border-color: transparent (not removed); Active-Hover
         is lighter than Active; nba-50 [neutral] / info-outline-active [info].
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Root ──────────────────────────────────────────────────────────────────── */

.ds-chip {
  display:        inline-flex;
  align-items:    center;
  border:         1px solid transparent;
  border-radius:  var(--ds-radius-pill);
  cursor:         pointer;
  font-family:    inherit;
  font-weight:    500;
  letter-spacing: 0;
  white-space:    nowrap;
  outline:        none;
  transition:     var(--ds-component-transition), transform var(--ds-dur-1) var(--ds-ease);
}

.ds-chip:active:not([data-disabled]) {
  transform: scale(var(--ds-scale-press));
}

.ds-chip:focus-visible {
  box-shadow: var(--ds-focus-ring);
}

.ds-chip[data-disabled] {
  cursor:         not-allowed;
  pointer-events: none;
}

/* ── Sizes ─────────────────────────────────────────────────────────────────── */

.ds-chip[data-size='xs'] {
  --chip-icon-size: var(--ds-icon-sm);
  --chip-badge-h:   var(--ds-bdg-sm-h);
  --chip-badge-px:  var(--ds-bdg-sm-px);
  --chip-badge-fs:  var(--ds-bdg-sm-fs);
  gap:              var(--ds-chip-xs-gap);
  height:           var(--ds-chip-xs-h);
  padding:          0 var(--ds-chip-xs-px);
  font-size:        var(--ds-chip-xs-fs);
  line-height:      var(--ds-chip-xs-lh);
}

.ds-chip[data-size='sm'] {
  --chip-icon-size: var(--ds-icon-sm);
  --chip-badge-h:   var(--ds-bdg-md-h);   /* Figma SM-чип → Badge MD (не SM) */
  --chip-badge-px:  var(--ds-bdg-md-px);
  --chip-badge-fs:  var(--ds-bdg-md-fs);
  gap:              var(--ds-chip-sm-gap);
  height:           var(--ds-chip-sm-h);
  padding:          0 var(--ds-chip-sm-px);
  font-size:        var(--ds-chip-sm-fs);
  line-height:      var(--ds-chip-sm-lh);
}

.ds-chip[data-size='md'] {
  --chip-icon-size: var(--ds-icon-md);
  --chip-badge-h:   var(--ds-bdg-md-h);
  --chip-badge-px:  var(--ds-bdg-md-px);
  --chip-badge-fs:  var(--ds-bdg-md-fs);
  gap:              var(--ds-chip-md-gap);
  height:           var(--ds-chip-md-h);
  padding:          0 var(--ds-chip-md-px);
  font-size:        var(--ds-chip-md-fs);
  line-height:      var(--ds-chip-md-lh);
}

/* ── Slots ─────────────────────────────────────────────────────────────────── */

.ds-chip-icon {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
  width:       var(--chip-icon-size, var(--ds-icon-md));
  height:      var(--chip-icon-size, var(--ds-icon-md));
}
.ds-chip-icon svg { width: 100%; height: 100%; }

.ds-chip-close {
  display:       inline-flex;
  align-items:   center;
  flex-shrink:   0;
  width:         var(--chip-icon-size, var(--ds-icon-md));
  height:        var(--chip-icon-size, var(--ds-icon-md));
  cursor:        pointer;
  border-radius: 4px;
  opacity:       0.7;
}
.ds-chip-close svg { width: 100%; height: 100%; }
.ds-chip-close:hover { opacity: 1; }

/* Dropdown-индикатор (chevron-down), Figma 1088:15080 item 4 — статичный, размер = иконка-слот */
.ds-chip-dropdown {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
  width:       var(--chip-icon-size, var(--ds-icon-md));
  height:      var(--chip-icon-size, var(--ds-icon-md));
}
.ds-chip-dropdown svg { width: 100%; height: 100%; }

.ds-chip-label { flex: 1 1 auto; }

.ds-chip-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       var(--chip-badge-h, var(--ds-bdg-md-h));
  height:          var(--chip-badge-h, var(--ds-bdg-md-h));
  padding:         0 var(--chip-badge-px, var(--ds-bdg-md-px));
  border-radius:   var(--ds-radius-pill);
  font-size:       var(--chip-badge-fs, var(--ds-bdg-md-fs));
  font-weight:     500;
  line-height:     var(--chip-badge-fs, var(--ds-bdg-md-fs));
  letter-spacing:  0.04em;
  /* HC-adjacency, 3 состояния (Figma Chip 1086:14532–14557 / Button 1088:15080+).
     Badge = поверхность, максимально отделённая от ЭФФЕКТИВНОГО фона родителя:
     1) залитый родитель (soft любое сост.; outline hover/pressed/active; solid) → surface-0 (белый);
     2) белый/прозрачный родитель (high-contrast вариант; outline В ПОКОЕ) → neutral-medium (серый);
     3) disabled → disable-токен. */
  background:      var(--ds-surface-0);   /* default: залитый родитель */
  color:           var(--ds-text-primary);
}

/* outline В ПОКОЕ (прозрачный → белая страница) + high-contrast вариант (белый фон) → серый.
   Figma: Chip outline-default 1086:14545, soft/outline HC 1086:14533/14547. */
.ds-chip[data-variant='outline'] .ds-chip-badge,
.ds-chip[data-high-contrast] .ds-chip-badge {
  background: var(--ds-surface-neutral-medium);
}
/* outline при hover/pressed/active получает nba-заливку → badge снова белый (Figma 1086:14550/14552/14554). */
.ds-chip[data-variant='outline']:hover:not([data-disabled]) .ds-chip-badge,
.ds-chip[data-variant='outline']:active:not([data-disabled]) .ds-chip-badge,
.ds-chip[data-variant='outline'][data-active]:not([data-disabled]) .ds-chip-badge {
  background: var(--ds-surface-0);
}
/* disabled чип → приглушённый badge (Figma 1086:14534/14549). */
.ds-chip[data-disabled] .ds-chip-badge {
  background: var(--ds-nba-15);
  color:      var(--ds-disabled-text);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SOFT variant
   ══════════════════════════════════════════════════════════════════════════════ */

/* Soft Neutral — default */
.ds-chip[data-variant='soft'][data-semantic='neutral'] {
  background: var(--ds-nba-30);
  color:      var(--ds-neutral-fill);
}
.ds-chip[data-variant='soft'][data-semantic='neutral']:hover:not([data-disabled]) {
  background: var(--ds-nba-20);
}
.ds-chip[data-variant='soft'][data-semantic='neutral']:active:not([data-disabled]) {
  background: var(--ds-nba-40);
}

/* Soft Neutral — active (selected) */
.ds-chip[data-variant='soft'][data-semantic='neutral'][data-active] {
  background: var(--ds-neutral-fill);
  color:      var(--ds-text-invert);
}
.ds-chip[data-variant='soft'][data-semantic='neutral'][data-active]:hover:not([data-disabled]) {
  background: var(--ds-neutral-fill-hover);
}

/* Soft Neutral — high-contrast */
.ds-chip[data-variant='soft'][data-semantic='neutral'][data-high-contrast] {
  background: var(--ds-surface-0);
}

/* Soft Neutral — disabled */
.ds-chip[data-variant='soft'][data-semantic='neutral'][data-disabled] {
  background: var(--ds-nba-15);
  color:      var(--ds-disabled-text);
}

/* Soft Info — default */
.ds-chip[data-variant='soft'][data-semantic='info'] {
  background: var(--ds-chip-info-bg);
  color:      var(--ds-info-soft-text);
}
.ds-chip[data-variant='soft'][data-semantic='info']:hover:not([data-disabled]) {
  background: var(--ds-info-50);
}
.ds-chip[data-variant='soft'][data-semantic='info']:active:not([data-disabled]) {
  background: var(--ds-info-soft-pressed);
  color:      var(--ds-info-text-pressed);
}

/* Soft Info — active (selected) */
.ds-chip[data-variant='soft'][data-semantic='info'][data-active] {
  background: var(--ds-info-800);
  color:      var(--ds-text-invert);
}
.ds-chip[data-variant='soft'][data-semantic='info'][data-active]:hover:not([data-disabled]) {
  background: var(--ds-info-hover);
}

/* Soft Info — high-contrast */
.ds-chip[data-variant='soft'][data-semantic='info'][data-high-contrast] {
  background: var(--ds-surface-0);
}

/* Soft Info — disabled */
.ds-chip[data-variant='soft'][data-semantic='info'][data-disabled] {
  background: var(--ds-nba-15);
  color:      var(--ds-disabled-text);
}

/* ══════════════════════════════════════════════════════════════════════════════
   OUTLINE variant
   Note: Active — border-color: transparent (1px transparent border preserved,
   not removed). Active-Hover lighter than Active.
   Neutral active: --ds-nba-50. Info active: --ds-info-outline-active.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Outline Neutral — default */
.ds-chip[data-variant='outline'][data-semantic='neutral'] {
  background:   transparent;
  border-color: var(--ds-nba-border);
  color:        var(--ds-neutral-fill);
}
.ds-chip[data-variant='outline'][data-semantic='neutral']:hover:not([data-disabled]) {
  background:   var(--ds-nba-20);
  border-color: var(--ds-nba-border);
}
.ds-chip[data-variant='outline'][data-semantic='neutral']:active:not([data-disabled]) {
  background:   var(--ds-nba-40);
  border-color: var(--ds-neutral-fill);
}

/* Outline Neutral — active: nba-50, border-color transparent */
.ds-chip[data-variant='outline'][data-semantic='neutral'][data-active] {
  background:   var(--ds-nba-50);
  border-color: transparent;
}
/* Active-Hover lighter than active (nba-30 < nba-50) */
.ds-chip[data-variant='outline'][data-semantic='neutral'][data-active]:hover:not([data-disabled]) {
  background: var(--ds-nba-30);
}

/* Outline Neutral — high-contrast */
.ds-chip[data-variant='outline'][data-semantic='neutral'][data-high-contrast] {
  background: var(--ds-surface-0);
}

/* Outline Neutral — disabled */
.ds-chip[data-variant='outline'][data-semantic='neutral'][data-disabled] {
  border-color: var(--ds-nba-border-disabled);
  color:        var(--ds-disabled-text);
}

/* Outline Info — default */
.ds-chip[data-variant='outline'][data-semantic='info'] {
  background:   transparent;
  border-color: var(--ds-info-stroke);
  color:        var(--ds-info-soft-text);
}
.ds-chip[data-variant='outline'][data-semantic='info']:hover:not([data-disabled]) {
  background:   var(--ds-info-50);
  border-color: var(--ds-info-stroke);
}
.ds-chip[data-variant='outline'][data-semantic='info']:active:not([data-disabled]) {
  background:   var(--ds-info-outline-active);
  border-color: var(--ds-info-stroke-pressed);
  color:        var(--ds-info-text-pressed);
}

/* Outline Info — active: info-outline-active, border-color transparent */
.ds-chip[data-variant='outline'][data-semantic='info'][data-active] {
  background:   var(--ds-info-outline-active);
  border-color: transparent;
  color:        var(--ds-info-text-pressed);
}
/* Active-Hover lighter than active */
.ds-chip[data-variant='outline'][data-semantic='info'][data-active]:hover:not([data-disabled]) {
  background: var(--ds-info-50);
  color:      var(--ds-info-soft-text);
}

/* Outline Info — high-contrast */
.ds-chip[data-variant='outline'][data-semantic='info'][data-high-contrast] {
  background: var(--ds-surface-0);
}

/* Outline Info — disabled */
.ds-chip[data-variant='outline'][data-semantic='info'][data-disabled] {
  border-color: var(--ds-nba-border-disabled);
  color:        var(--ds-disabled-text);
}

/* ── Dark mode — hover bg elevated for NBA-based variants ──────────────────── */

:root:not([data-theme='light']) .ds-chip[data-variant='soft'][data-semantic='neutral']:hover:not([data-disabled]),
:root:not([data-theme='light']) .ds-chip[data-variant='outline'][data-semantic='neutral']:hover:not([data-disabled]) {
  background: var(--ds-nba-40);
}

/* ── Reduced motion ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ds-chip {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* ── Chip Group layout ─────────────────────────────────────────────────────── */

.ds-chip-group {
  display:   flex;
  flex-wrap: wrap;
}
.ds-chip-group[data-size='xs'] { gap: var(--ds-chip-xs-grp-y) var(--ds-chip-xs-grp-x); }
.ds-chip-group[data-size='sm'] { gap: var(--ds-chip-sm-grp-y) var(--ds-chip-sm-grp-x); }
.ds-chip-group[data-size='md'] { gap: var(--ds-chip-md-grp-y) var(--ds-chip-md-grp-x); }

/* ── Chip Group — overflow «+K» + выпадающий список свёрнутых чипсов ────────── */

.ds-chip-overflow {
  position: relative;
  display:  inline-flex;
}

.ds-chip-overflow-pop {
  position:      absolute;
  top:           calc(100% + var(--ds-space-1));
  left:          0;
  z-index:       20;
  display:       flex;
  flex-direction: column;
  gap:           var(--ds-space-1);
  min-width:     max-content;
  max-height:    280px;
  overflow-y:    auto;
  padding:       var(--ds-space-2);
  background:    var(--ds-surface-0);
  border:        1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow:    var(--ds-popover-shadow);
}