/* GENERATED FILE — DO NOT EDIT DIRECTLY.
 * Canonical source: frontend/src/styles/css/04-semantic-classes/applied-filters.css
 * Edit the canonical React stylesheet source, then regenerate mirrors with:
 *   node scripts/sync-public-stylesheets.cjs
 */
/**
 * Applied Filters Component Styles
 * Strategy 2: Persistent & Visible "Applied Filters" Overview
 *
 * Displays active filters as <path> for easy visibility and removal.
 */

.applied-filters {
  width: var(--size-100pct);
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: start;
  padding: 0;
  margin: 0;
}

.applied-filters__actions {
  width: var(--size-100pct);
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  gap: var(--space-2px);
  align-items: center;
}

.applied-filters__actions .chip-group {
  min-width: 0;
}

@keyframes chip-enter {
  from {
    opacity: 0;
    transform: scale(0.88) translateY(-2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.applied-filters__pill-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip--applied-filter {
  gap: var(--space-0-5px);
}

.applied-filters__pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-14px);
  height: var(--size-14px);
  margin-inline-start: var(--space-0-5px);
  line-height: 1;
  flex: 0 0 auto;
  opacity: var(--opacity-visible);
  font-weight: var(--weight-normal);
  font-size: var(--font-size-12);
  border-radius: var(--radius-pill);
}

/* Negated filter chip — <path> treatment so exclusions are visually distinct from inclusions */
.pill--negated {
  background: var(--light-sunset);
  border-color: var(--sunset-glass-heavy-70);
  color: var(--strong-sunset);
}

.pill--negated:hover {
  background: var(--pale-sunset);
  border-color: var(--strong-sunset);
  color: var(--strong-sunset);
}

/* Responsive: stack vertically on mobile */
@media (max-width: 639px) {
  .applied-filters__actions {
    width: var(--size-100pct);
  }
}