/**
 * Shared filter UI for logement-search and logements-catalog-filter.
 * Design tokens and rules follow the catalog filter block.
 */

:is(
	.wp-block-reactif-logement-search.rea-logement-search,
	.wp-block-reactif-logements-catalog-filter.rea-logements-catalog-filter
) {
	--rea-logement-filter-radius: 25px;
	--rea-logement-filter-gap: var(--wp--preset--spacing--xs);
	--rea-logement-filter-panel: var(--wp--preset--color--forest);
	--rea-logement-filter-panel-text: var(--wp--preset--color--light);
	--rea-logement-filter-field-bg: var(--wp--preset--color--light);
	--rea-logement-filter-field-padding: var(--wp--preset--spacing--m);
	--rea-logement-filter-trigger-min-height: 6.875rem;
	--rea-logement-filter-label-size: 1.125rem;
	--rea-logement-filter-value-size: 1.5rem;

	color: var(--wp--preset--color--charcoal);
}

.rea-logement-filters__form {
	display: grid;
	gap: var(--wp--preset--spacing--l);
}

.rea-logement-filters__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rea-logement-filter-gap);
}

.rea-logement-filters__field {
	position: relative;
}

.rea-logement-filters__trigger {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"label icon"
		"value icon";
	width: 100%;
	min-height: var(--rea-logement-filter-trigger-min-height);
	background: var(--rea-logement-filter-field-bg);
	color: inherit;
	border: 0;
	border-radius: var(--rea-logement-filter-radius);
	padding: var(--rea-logement-filter-field-padding);
	text-align: left;
	cursor: pointer;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

.rea-logement-filters__label {
	grid-area: label;
	font-size: var(--rea-logement-filter-label-size);
	font-weight: 400;
	opacity: 0.85;
}

.rea-logement-filters__value {
	grid-area: value;
	font-size: var(--rea-logement-filter-value-size);
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rea-logement-filters__icon {
	grid-area: icon;
	align-self: end;
	margin-bottom: 0.5lh;
	justify-self: end;
	font-size: 1.125rem;
	line-height: 1;
}

.rea-logement-filters__dropdown {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 0.25rem);
	z-index: 30;
	background: var(--rea-logement-filter-panel);
	color: var(--rea-logement-filter-panel-text);
	border-radius: var(--rea-logement-filter-radius);
	padding: var(--wp--preset--spacing--m);
	box-shadow: 0 12px 22px rgba(0, 0, 0, 0.25);
}

:is(.rea-logement-filters__list, .rea-logement-filters__options) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--2-xs);
	max-height: 14rem;
	overflow: auto;
}

.rea-logement-filters__option {
	width: 100%;
	background: transparent;
	border: 0;
	color: inherit;
	text-align: left;
	font-size: var(--wp--preset--font-size--step-1);
	padding: 0.125rem 0;
	cursor: pointer;
}

.rea-logement-filters__option:is(.is-selected, :hover, :focus-visible) {
	color: var(--wp--preset--color--sauge);
}

.rea-logement-filters__check-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--step-1);
}

.rea-logement-filters__check-item input {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	width: 1em;
	height: 1em;
	border: 0;
	background: var(--wp--preset--color--sauge);
	border-radius: 0.125em;
	display: grid;
	place-content: center;
	cursor: pointer;
}

.rea-logement-filters__check-item input::before {
	content: "";
	width: 0.6em;
	height: 0.6em;
	transform: scale(0);
	transition: transform 0.12s ease-in-out;
	background: var(--wp--preset--color--light);
	clip-path: polygon(14% 44%, 0 58%, 45% 100%, 100% 22%, 84% 8%, 43% 62%);
}

.rea-logement-filters__check-item input:checked::before {
	transform: scale(1);
}

.rea-logement-filters__check-item input:checked + span {
	color: var(--wp--preset--color--sauge);
}

:is(.rea-logement-filters__range-top, .rea-logement-filters__range-values) {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--step-0);
}

.rea-logement-filters__field--price input[type="range"] {
	width: 100%;
	margin: var(--wp--preset--spacing--2-xs) 0;
}

.rea-logement-filters__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--2-xs);
	flex-wrap: wrap;
}

.rea-logement-filters__actions .button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.rea-logement-filters__button-icon {
	display: inline-flex;
	width: 1.25em;
}

.rea-logement-filters__button-icon svg {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 1200px) {
	.rea-logement-filters__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	:is(
		.wp-block-reactif-logement-search.rea-logement-search,
		.wp-block-reactif-logements-catalog-filter.rea-logements-catalog-filter
	) {
		--rea-logement-filter-field-padding: var(--wp--preset--spacing--s);
		--rea-logement-filter-trigger-min-height: 5rem;
	}

	.rea-logement-filters__grid {
		grid-template-columns: 1fr;
	}

	.rea-logement-filters__actions {
		justify-content: flex-start;
	}
}