/* components/search-tag-input/search-tag-input.css
   Pill-list search input that looks like the existing gallery-filter-search field.
   BEM: .search-tag-input (block), __pill, __pill-text, __pill-remove, __field
*/

/* ── Container ───────────────────────────────────────────────────────────── */
/* Single-line horizontal-scroll layout (WhatsApp contact-search style).
   Pills never wrap — they scroll off the left edge as more are added.
   The scrollbar is hidden on all browsers but the row remains scrollable. */

.search-tag-input {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.3rem;
  flex: 1 1 auto;
  /* min-width prevents the pill collapsing to nothing; the filter bar
     scrolls as a whole row so no internal scroll is needed here */
  min-width: 160px;
  border: 1.5px solid #ccc;
  border-radius: 20px;
  padding: 0.25rem 1.1rem;
  cursor: text;
  transition: border-color 0.15s;
  background: #fff;
  overflow: hidden;
  height: 38px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

.search-tag-input:focus-within {
  border-color: #27ae60;
  outline: none;
}

/* ── Pills ───────────────────────────────────────────────────────────────── */
.search-tag-input__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  background: #27ae60;
  color: #fff;
  border-radius: 20px;
  padding: 0.375rem 0.65rem 0.375rem 0.85rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  /* Slide-in animation so adding a term feels responsive */
  animation: pill-pop 0.12s ease-out both;
}

@keyframes pill-pop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.search-tag-input__pill-text {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* × dismiss button inside the pill */
.search-tag-input__pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Visual circle stays compact; padding extends the tap target on mobile */
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  /* negative margin + equal padding keeps pill layout unchanged
     while giving a ~36px minimum touch target */
  padding: 8px;
  margin: -8px -4px -8px -2px;
  color: #fff;
  flex-shrink: 0;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.search-tag-input__pill-remove:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* ── Text field ──────────────────────────────────────────────────────────── */
.search-tag-input__field {
  flex-shrink: 0;
  /* Wide enough to show full 'Search uploader…' placeholder without overflow.
     The filter bar scrolls horizontally so width won't break layout. */
  width: 155px;
  border: none;
  outline: none;
  background: transparent;
  /* 16px minimum prevents iOS/Android auto-zoom on focus, which breaks
     overflow-x:hidden and lets the whole page be panned horizontally */
  font-size: 1rem;
  line-height: 1.4;
  color: #333;
  padding: 0.05rem 0;
}

@media (min-width: 768px) {

  /* On larger screens the slightly smaller size is fine — no auto-zoom risk */
  .search-tag-input__field {
    font-size: 0.8125rem;
    width: 135px;
  }

  /* Desktop pill font: 1px larger than the 0.8125rem field */
  .search-tag-input__pill {
    font-size: 0.875rem;
  }
}

.search-tag-input__field::placeholder {
  color: #aaa;
}

/* Hide the placeholder once there are pills (JS adds this attribute) */
.search-tag-input[data-has-pills="true"] .search-tag-input__field::placeholder {
  color: transparent;
}

/* ── Overflow indicator ("...") ──────────────────────────────────────────── */
/* Visible only when pill count exceeds MAX_VISIBLE_PILLS (set by JS) */
.search-tag-input__overflow {
  font-size: 0.75rem;
  color: #888;
  white-space: nowrap;
  padding: 0.1rem 0.2rem;
  flex-shrink: 0;
}