/* 이름, 칩 담는 칸, "외 N", 모두 지우기 네 자리를 한 줄로 둠. 줄이 안 감겨서 두 버튼은 칩이 몇 개든
   늘 같은 자리에 보임. 칩만 담는 칸 안에서 감기거나 밀림 */
.filter-chips { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-inline-xs); font-size: var(--font-label); }
.filter-chips > * { flex: none; }

/* 칩 담는 칸. 제 내용만큼 넓다가 줄이 좁으면 줄어듦. 접혔을 때 두 줄 높이까지만 보이고 나머지는 잘림.
   잘린 칩 수는 컨테이너가 재서 "외 N" 으로 옴(docs/containers/followChipLines.md) */
.filter-chips__items {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--space-inline-xs);
  min-width: 0;
  max-height: var(--measure-chip-lines);
  overflow: hidden;
}
.filter-chips--open .filter-chips__items { max-height: none; overflow: visible; }

/* 한 줄 밀기(폰)는 칩만 밀리는 칸에 담음. 칸이 남는 폭을 다 써서 두 버튼이 칩 수와 상관없이 늘 줄
   오른쪽 끝 같은 자리에 섬. 밑 여백은 겹쳐 뜨는 스크롤 막대가 칩 글자를 가리지 않게 비워 두는
   자리임(docs/components/FilterChips.md) */
.filter-chips--line .filter-chips__items {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--measure-scrollbar);
}
/* 칩과 위아래 여백을 맞춰 칩 칸이 두 줄이 되어도 이름이 첫 줄 글에 나란히 섬 */
.filter-chips__title { padding-block: calc(var(--space-inset-xs) + var(--border-width)); color: var(--text-muted); }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-inline-xs);
  padding: var(--space-inset-xs) var(--space-inset-sm);
  border: var(--border-width) solid var(--border-muted);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--text-default);
  white-space: nowrap;
}
.filter-chip__text { overflow: hidden; text-overflow: ellipsis; }
.filter-chip__remove { flex: none; font: inherit; padding: 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }

/* 잘라 없애는 자리(감기는 줄)에서는 칩 하나가 칸보다 넓어지지 않게 하고 글만 줄임. 풀기 버튼은 안 줄어
   늘 칸 안에 남음. 밀어서 닿는 한 줄 밀기에서는 안 줄임(docs/components/FilterChips.md) */
.filter-chips:not(.filter-chips--line) .filter-chip { max-width: 100%; }
.filter-chips:not(.filter-chips--line) .filter-chip__text { min-width: 0; }

/* "외 N" 과 접기. 칩과 같은 모양이되 누르는 것이라 테두리를 진하게 둠 */
.filter-chips__more {
  font: inherit;
  padding: var(--space-inset-xs) var(--space-inset-sm);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--text-default);
  white-space: nowrap;
  cursor: pointer;
}
.filter-chips__clear {
  font: inherit;
  padding: var(--space-inset-xs) var(--space-inset-sm);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  white-space: nowrap;
  text-decoration: underline;
  cursor: pointer;
}
.filter-chips__more:focus-visible,
.filter-chips__clear:focus-visible { outline: var(--border-width) solid var(--focus-ring); }