@keyframes pl-grid-region-loading {
	from {
		opacity: 1;
		filter: blur(0);
	}
	to {
		opacity: 0.75;
		filter: blur(2px);
	}
}

.theme-reactif.blog,
.wp-admin {
	.post-listing {
		color: var(--wp--preset--color--bleu-fonce, #036);
		/* display: flex; */
		/* flex-direction: column; */
		/* row-gap: var(--wp--preset--spacing--m, 32px); */

		.post-listing__header {
			align-items: flex-end;
			column-gap: var(--wp--preset--spacing--m, 32px);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			row-gap: var(--wp--preset--spacing--s, 20px);
			margin-bottom: var(--wp--preset--spacing--m, 32px);
		}

		.post-listing__heading {
			color: var(--wp--preset--color--bleu-ciel, #09c);
			font-family: var(--wp--preset--font-family--cal-sans, "Cal Sans", sans-serif);
			font-size: var(--wp--preset--font-size--6, 48px);
			font-weight: 900;
			line-height: 1.2;
			margin: 0;
		}

		.post-listing__controls {
			align-items: flex-end;
			column-gap: var(--wp--preset--spacing--s, 20px);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			row-gap: var(--wp--preset--spacing--2-xs, 12px);
		}

		.post-listing__search-actions {
			align-items: center;
			column-gap: var(--wp--preset--spacing--2-xs, 12px);
			display: flex;
			flex-direction: row-reverse;
			/* flex-wrap: wrap; */
			justify-content: flex-end;
			row-gap: var(--wp--preset--spacing--2-xs, 12px);

			@media screen and (max-width: 768px) {
				flex-direction: row;
			}
		}

		.post-listing__search {
			align-items: center;
			background-color: #fff;
			border: 1px solid currentColor;
			border-radius: 30px;
			display: flex;
			min-width: 250px;
			padding: 4px 6px 4px 18px;
			width: clamp(220px, 100%, 293px);

			input {
				border: unset;
			}
		}

		input[type="search"].post-listing__search-input {
			background: transparent;
			border: 0;
			color: currentColor;
			flex: 1 1 auto;
			font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
			font-size: var(--wp--preset--font-size--0, 18px);
			min-width: 0;
			outline: none;
			padding: 8px 0;
		}

		.post-listing__search-input::placeholder {
			color: currentColor;
			opacity: 0.5;
		}

		.post-listing__search-submit {
			align-items: center;
			background: transparent;
			border: 0;
			color: currentColor;
			cursor: pointer;
			display: flex;
			justify-content: center;
			padding: 6px;
		}

		.post-listing__search-submit:is(:hover, :focus-visible) {
			color: var(--wp--preset--color--bleu-ciel, #09c);
		}

		.post-listing__search-icon {
			height: 22px;
			width: 22px;
		}

		.post-listing__reset {
			white-space: nowrap;

			padding: 9px 16px;
			border-radius: 15px;
		}

		.post-listing__filters {
			column-gap: var(--wp--preset--spacing--2-xs, 8px);
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			margin: 0;
			padding: 0;
			row-gap: var(--wp--preset--spacing--2-xs, 8px);
		}

		.post-listing__filter-item {
			margin: 0;
			padding: 0;

			button {
				@media screen and (max-width: 768px) {
					font-size: var(--wp--preset--font-size--minus-1, 14px);
					padding: 9px 16px;
				}

				&.post-listing__filter--active {
					background-color: var(--wp--preset--color--bleu-fonce, #036);
					border-color: var(--wp--preset--color--bleu-fonce, #036);
					color: #fff;
				}
			}
		}

		.post-listing__grid-region {
			transition: opacity 150ms ease;
		}

		.post-listing__grid-region--loading {
			animation: pl-grid-region-loading 0.5s ease-in-out infinite alternate;
			cursor: wait;
			* {
				pointer-events: none;
				user-select: none;
			}
		}

		.post-listing__empty {
			font-family: var(--wp--preset--font-family--roboto, "Roboto", sans-serif);
			font-size: var(--wp--preset--font-size--0, 18px);
			padding: var(--wp--preset--spacing--m, 32px) 0;
			text-align: center;
		}

		.post-listing__pagination:empty {
			display: none;
		}

		@media (max-width: 1024px) {
			.post-listing__header {
				align-items: stretch;
				flex-direction: column;
			}

			.post-listing__controls {
				align-items: flex-start;
				justify-content: flex-start;
			}

			.post-listing__search-actions {
				justify-content: flex-start;
			}
		}

		@media (max-width: 600px) {
			.post-listing__heading {
				font-size: var(--wp--preset--font-size--2, 32px);
			}
		}
	}
}