.lx-filter-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

/* Base */
.lx-filter-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;

    border:2px solid transparent;
    border-radius:999px;
    padding:7px 12px;

    font-weight:700;
    font-size:13px;
    line-height:1;

    background:#fff;
    text-decoration:none;

    /* neutralise Bootstrap */
    box-shadow:none !important;
    outline:0;
    color:inherit;
}

/* Evite que Bootstrap remplace les couleurs au hover */
.lx-filter-btn:hover,
.lx-filter-btn:focus,
.lx-filter-btn:focus-visible{
    box-shadow:none !important;
    outline:0;
}

/* Couleurs par statut */
.lx-filter-btn--won{
    border-color: var(--lx-status-won);
    color: var(--lx-status-won);
}
.lx-filter-btn--inprogress{
    border-color: var(--lx-status-in-progress);
    color: var(--lx-status-in-progress);
}
.lx-filter-btn--lost{
    border-color: var(--lx-status-lost);
    color: var(--lx-status-lost);
}

/* Hover OFF => bordure reste + petit fond très léger */
.lx-filter-btn--won:hover{ background: color-mix(in srgb, var(--lx-status-won) 12%, #fff); }
.lx-filter-btn--inprogress:hover{ background: color-mix(in srgb, var(--lx-status-in-progress) 12%, #fff); }
.lx-filter-btn--lost:hover{ background: color-mix(in srgb, var(--lx-status-lost) 12%, #fff); }

/* ON */
.lx-filter-btn.is-on{
    color:#fff !important;
}
.lx-filter-btn--won.is-on{ background: var(--lx-status-won); }
.lx-filter-btn--inprogress.is-on{ background: var(--lx-status-in-progress); }
.lx-filter-btn--lost.is-on{ background: var(--lx-status-lost); }

/* Hover ON => garde la couleur + léger assombrissement */
.lx-filter-btn.is-on:hover{
    filter: brightness(.95);
}

/* focus visible => accessible + cohérent */
.lx-filter-btn:focus-visible{
    outline: 2px solid rgba(0,0,0,.25);
    outline-offset: 2px;
}

.lx-filter-btn i{ font-size:14px; line-height:1; }