/* Badge (etichetta di stato) e chip (filtro attivo, si toglie col clic). */

@layer components {
  /* ---------- Badge: sempre in minuscolo normale, mai maiuscoletto spaziato ----------
     Piccolo, angoli appena arrotondati e mai a fondo verde pieno: non deve sembrare un bottone (pillola, verde). */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: var(--r-badge);
    background: var(--ground);
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;

    &.new { background: var(--accent-soft); color: var(--ink); } /* Nuovo, Esclusiva, Asta, Dopo */
    &.accent-soft { background: var(--accent-soft); color: var(--ink); } /* Nuovo / recente nella scheda */
    &.drop { background: var(--ink); color: var(--on-ink); }     /* Ribassato */
    &.soft { background: var(--tint); }                           /* su fondo bianco */
    & .icon { width: 14px; height: 14px; }
  }

  /* Gruppo di badge sopra una foto */
  .badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ---------- Chip di filtro ---------- */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    &:empty { display: none; }
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 6px 0 14px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--ink);
    font: 500 var(--step-small) var(--font);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);

    /* la crocetta */
    & .x {
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--ground);
    }
    & .x .icon { width: 12px; height: 12px; stroke-width: 2.4; }

    &:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent)); }

    /* "Azzera filtri" */
    &.reset { padding-right: 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
    &.reset:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
  }
}