/* ==============================================
   CHIPS / FILTER TAGS - Customize here
   ============================================== */

/* Container */
.filters {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-10);
  justify-content: center;
  flex-wrap: wrap;
}

.filters:empty {
  display: none;
}

/* ======================
   CHIP STYLES
   ====================== */

.filter-chip {
  appearance: none;
  border: 1px solid var(--color-border, #e0e0e0);
  background: var(--color-white, #fff);
  
  /* --- Customize padding --- */
  padding: 4px 8px;
  
  /* --- Typography --- */
  font-family: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base, 1.4);
  font-weight: var(--font-weight-regular, 400);
  color: var(--color-black);
  
  /* --- Shape --- */
  border-radius: var(--radius-none, 0);
  
  /* --- Interaction --- */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hover state (only on hover-capable devices) */
@media (hover: hover) {
  .filter-chip:hover {
    border-color: var(--color-border-hover, #000);
    color: var(--color-text, #000);
  }

  .filter-chip.is-active:hover {
    background: #0d2dff;
    border-color: #0d2dff;
  }
}

/* Pressed state */
.filter-chip:active {
  opacity: 0.7;
}

/* Selected state */
.filter-chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* ======================
   CHIP COUNT
   ====================== */

.filter-chip__count {
  margin-left: 4px;
  opacity: 0.5;
}

/* ======================
   MOBILE: Horizontal scroll
   ====================== */

@media (max-width: 767px) {
  .filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    
    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
    
    /* Padding for edge items */
    padding: 0 var(--grid-gap, 8px);
    margin-left: calc(var(--grid-gap, 8px) * -1);
    margin-right: calc(var(--grid-gap, 8px) * -1);
    
    gap: 6px;
  }
  
  .filters::-webkit-scrollbar {
    display: none;
  }
  
  .filter-chip {
    padding: 5px 10px;
    font-size: var(--font-size-xs, 12px);
  }
}