/* Loaded from the plugin PHP so theme .post-grid { display: grid } cannot win. */
.wp-block-gravity-post-filter[data-display-as-slider="true"] .search-and-sort {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 24px;
}

.wp-block-gravity-post-filter[data-display-as-slider="true"] .post-slider-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.wp-block-gravity-post-filter[data-display-as-slider="true"] .post-slider-nav button {
	box-sizing: border-box;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background-color: var(--wp--preset--color--accent-tertiary, #1961FC);
	color: #fff;
	cursor: pointer;
	line-height: 0;
	box-shadow: none;
}

.wp-block-gravity-post-filter[data-display-as-slider="true"] .post-slider-nav button:disabled {
	background-color: #b5cdf8;
	cursor: default;
}

.wp-block-gravity-post-filter[data-display-as-slider="true"] .post-grid,
.wp-block-gravity-post-filter[data-display-as-slider="true"] .post-grid--slider,
.post-grid.post-grid--slider {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-top: 8px;
	padding-bottom: 8px;
	grid-template-columns: none !important;
	grid-auto-flow: column !important;
}

.wp-block-gravity-post-filter[data-display-as-slider="true"] .post-grid::-webkit-scrollbar,
.post-grid.post-grid--slider::-webkit-scrollbar {
	display: none;
}

.wp-block-gravity-post-filter[data-display-as-slider="true"] .post-item,
.post-grid.post-grid--slider .post-item {
	flex: 0 0 calc((100% - (var(--slides-visible, 2) - 1) * 16px) / var(--slides-visible, 2)) !important;
	width: calc((100% - (var(--slides-visible, 2) - 1) * 16px) / var(--slides-visible, 2)) !important;
	max-width: calc((100% - (var(--slides-visible, 2) - 1) * 16px) / var(--slides-visible, 2)) !important;
	scroll-snap-align: start;
}

@media screen and (max-width: 1024px) {
	.wp-block-gravity-post-filter[data-display-as-slider="true"] .post-item,
	.post-grid.post-grid--slider .post-item {
		flex-basis: calc((100% - 16px) / min(2, var(--slides-visible, 2))) !important;
		width: calc((100% - 16px) / min(2, var(--slides-visible, 2))) !important;
		max-width: calc((100% - 16px) / min(2, var(--slides-visible, 2))) !important;
	}
}

@media screen and (max-width: 768px) {
	.wp-block-gravity-post-filter[data-display-as-slider="true"] .post-item,
	.post-grid.post-grid--slider .post-item {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}