/* Puzzle - Unit Finder — front-end basisstijl
 *
 * Alles is aan te passen via CSS custom properties op .pzl-uf (of een eigen class via
 * [pzl_unit_finder id="12" class="mijn-finder"]). Wil je deze CSS helemaal niet laden:
 * add_filter( 'pzl_unit_finder/load_styles', '__return_false' );
 */

.pzl-uf {
	--pzl-uf-fill-opacity: 0.35;
	--pzl-uf-fill-opacity-hover: 0.6;
	--pzl-uf-fill-opacity-selected: 0.75;
	--pzl-uf-fill-opacity-dimmed: 0.08;
	--pzl-uf-stroke-width: 1.5;
	--pzl-uf-stroke-width-selected: 3;
	--pzl-uf-stroke-selected: #ffffff;
	--pzl-uf-focus-color: #1d2327;
	--pzl-uf-transition: 0.15s ease;

	position: relative;
}

.pzl-uf__canvas {
	position: relative;
	line-height: 0;
}

.pzl-uf__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

.pzl-uf__svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	-webkit-tap-highlight-color: transparent;
}

/* ---------- Polygonen ---------- */

.pzl-uf__shape {
	--pzl-uf-color: #8c8f94;
	--pzl-uf-color-hover: var(--pzl-uf-color);

	fill: var(--pzl-uf-color);
	fill-opacity: var(--pzl-uf-fill-opacity);
	stroke: var(--pzl-uf-color);
	stroke-width: var(--pzl-uf-stroke-width);
	vector-effect: non-scaling-stroke;
	cursor: pointer;
	outline: none;
	transition: fill var(--pzl-uf-transition), fill-opacity var(--pzl-uf-transition), stroke-width var(--pzl-uf-transition);
}

.pzl-uf__shape:hover,
.pzl-uf__shape.is-hover {
	fill: var(--pzl-uf-color-hover);
	fill-opacity: var(--pzl-uf-fill-opacity-hover);
}

.pzl-uf__shape:focus-visible {
	fill-opacity: var(--pzl-uf-fill-opacity-hover);
	stroke: var(--pzl-uf-focus-color);
	stroke-width: var(--pzl-uf-stroke-width-selected);
}

.pzl-uf__shape.is-selected {
	fill: var(--pzl-uf-color-hover);
	fill-opacity: var(--pzl-uf-fill-opacity-selected);
	stroke: var(--pzl-uf-stroke-selected);
	stroke-width: var(--pzl-uf-stroke-width-selected);
}

/* Weggefilterd: bijna onzichtbaar en niet klikbaar. */
.pzl-uf__shape.is-dimmed {
	fill-opacity: var(--pzl-uf-fill-opacity-dimmed);
	stroke-opacity: 0.2;
	cursor: default;
}

.pzl-uf__shape.is-dimmed:hover {
	fill: var(--pzl-uf-color);
	fill-opacity: var(--pzl-uf-fill-opacity-dimmed);
}

@media (prefers-reduced-motion: reduce) {
	.pzl-uf__shape {
		transition: none;
	}
}

/* Unit niet meer beschikbaar (bv. gedepubliceerd na het cachen van de pagina). */
.pzl-uf__shape.is-unavailable {
	opacity: 0;
	pointer-events: none;
}