/*
 * FFacet — basisopmaak.
 *
 * Bewust neutraal: alleen wat nodig is om de facets bruikbaar te maken. De
 * kleuren en typografie komen uit het thema.
 */

.ffacet-facet {
    margin-bottom: 24px;
}

/*
 * Het vakje staat naast de tekst, niet erin. Zo begint een label dat over twee
 * regels loopt netjes onder de eerste regel in plaats van onder het vakje.
 */
.ffacet-choice {
    display: flex;
    align-items: flex-start;
    padding: 4px 0;
    text-decoration: none;
}

.ffacet-choice .ffacet-count::before {
    content: "(";
}

.ffacet-choice .ffacet-count::after {
    content: ")";
}

/* Een lang label moet binnen de kolom afbreken, niet erbuiten steken. */
.ffacet-choice .ffacet-label {
    min-width: 0;
    overflow-wrap: break-word;
}

.ffacet-choice .ffacet-count {
    margin-left: .35em;
    opacity: .6;
    font-size: .875em;
}

/* Checkbox-vierkantje, getekend in CSS zodat er geen afbeeldingen nodig zijn. */
.ffacet-checkbox::before,
.ffacet-radio::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: .2em 8px 0 0;
    border: 1px solid currentColor;
    border-radius: 2px;
    opacity: .5;
}

.ffacet-checkbox.checked::before {
    background: currentColor;
    opacity: 1;
}

.ffacet-radio::before {
    border-radius: 50%;
}

/* Keuzes boven het "toon meer"-punt blijven verborgen tot de bezoeker uitklapt. */
.ffacet-choice.ffacet-hidden {
    display: none;
}

.ffacet-expanded .ffacet-choice.ffacet-hidden {
    display: block;
}

.ffacet-toggle {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
    opacity: .75;
}

.ffacet-dropdown,
.ffacet-search-input {
    width: 100%;
}

.ffacet-search {
    display: flex;
    gap: 8px;
}

.ffacet-selections {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.ffacet-selection {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    text-decoration: none;
    font-size: .875em;
}

.ffacet-selection-facet {
    opacity: .6;
}

.ffacet-selection-remove {
    font-size: 1.1em;
    line-height: 1;
}

/* Tijdens het verversen blijft de lijst staan, maar iets teruggetrokken. */
.ffacet-template {
    transition: opacity .15s ease;
}

.ffacet-template.ffacet-loading {
    opacity: .45;
    pointer-events: none;
}

.ffacet-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.ffacet-flyout-open {
    display: none;
}

/* De sluitknop hoort alleen bij het uitschuifpaneel; daarbuiten is hij een
   losse kruis in de zijbalk. */
.ffacet-flyout-head {
    display: none;
}

/*
 * Het uitschuifpaneel zelf staat niet hier maar in een inline blok, omdat het
 * breekpunt per site verschilt (zie FFacet_Frontend::flyout_css).
 */