/*
 * Het vinkje van alle FacetWP-filters. Zie class-filtervinkjes.php.
 *
 * Als SVG in plaats van de png's van FacetWP: scherp op elk scherm, en de
 * kleuren staan hier in plaats van in een plaatje.
 *
 * - leeg: wit met een rand van #8a8178, 3,6:1 op de cremekleurige zijbalk
 *   (WCAG vraagt 3:1 voor een bedieningselement);
 * - aangevinkt: gevuld met #2b2724, de donkere tekstkleur van de site, met een
 *   wit vinkje;
 * - bij aanwijzen wordt de rand donker, zodat je ziet wat je gaat aanklikken.
 *
 * 16px in plaats van 14px. De positie laat dit bestand met rust: die zetten
 * FacetWP, de flyout en het thema, ieder voor hun eigen plek.
 *
 * Een uitgeschakelde keuze (geen woningen bij dit filter) houdt de
 * doorzichtigheid van FacetWP en reageert niet op aanwijzen.
 */

.facetwp-facet .facetwp-checkbox {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='.75' y='.75' width='14.5' height='14.5' rx='3.25' fill='%23fff' stroke='%238a8178' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

.facetwp-facet .facetwp-checkbox:not(.disabled):not(.checked):hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='.75' y='.75' width='14.5' height='14.5' rx='3.25' fill='%23fff' stroke='%232b2724' stroke-width='1.5'/%3E%3C/svg%3E");
}

.facetwp-facet .facetwp-checkbox.checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%232b2724'/%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}