/* Horizontal filter chip scroll hints
   ========================================================================== */

@media (max-width: 768px) {
	.blog-filters,
	.products-filters,
	.search-filters {
		position: relative;
		isolation: isolate;
	}

	.blog-filters::before,
	.blog-filters::after,
	.products-filters::before,
	.products-filters::after,
	.search-filters::before,
	.search-filters::after {
		position: absolute;
		top: 0;
		bottom: 2px;
		z-index: 2;
		display: flex;
		align-items: center;
		width: 52px;
		pointer-events: none;
		opacity: 0;
		font-family: var(--font-family);
		font-size: 1.35rem;
		font-weight: 700;
		line-height: 1;
		color: var(--color-gray);
		transition: opacity var(--transition);
	}

	.blog-filters::before,
	.products-filters::before,
	.search-filters::before {
		left: 0;
		justify-content: flex-start;
		padding-left: 4px;
		background: linear-gradient(to right, var(--color-black) 0%, var(--surface-fade-mid) 45%, transparent 100%);
	}

	.blog-filters::after,
	.products-filters::after,
	.search-filters::after {
		right: 0;
		justify-content: flex-end;
		padding-right: 4px;
		background: linear-gradient(to left, var(--color-black) 0%, var(--surface-fade-mid) 45%, transparent 100%);
	}

	.blog-filters.is-scrollable:not(.is-scroll-start)::before,
	.products-filters.is-scrollable:not(.is-scroll-start)::before,
	.search-filters.is-scrollable:not(.is-scroll-start)::before {
		content: '‹';
		opacity: 1;
	}

	.blog-filters.is-scrollable:not(.is-scroll-end)::after,
	.products-filters.is-scrollable:not(.is-scroll-end)::after,
	.search-filters.is-scrollable:not(.is-scroll-end)::after {
		content: '›';
		opacity: 1;
	}

	/* Fade clipped chips at the scroll edges */
	.blog-filters.is-scrollable.is-scroll-start:not(.is-scroll-end) .blog-filters__list,
	.products-filters.is-scrollable.is-scroll-start:not(.is-scroll-end) .products-filters__list,
	.search-filters.is-scrollable.is-scroll-start:not(.is-scroll-end) .search-filters__list {
		-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 56px), transparent 100%);
		mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 56px), transparent 100%);
	}

	.blog-filters.is-scrollable:not(.is-scroll-start):not(.is-scroll-end) .blog-filters__list,
	.products-filters.is-scrollable:not(.is-scroll-start):not(.is-scroll-end) .products-filters__list,
	.search-filters.is-scrollable:not(.is-scroll-start):not(.is-scroll-end) .search-filters__list {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 56px, #000 calc(100% - 56px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, #000 56px, #000 calc(100% - 56px), transparent 100%);
	}

	.blog-filters.is-scrollable.is-scroll-end:not(.is-scroll-start) .blog-filters__list,
	.products-filters.is-scrollable.is-scroll-end:not(.is-scroll-start) .products-filters__list,
	.search-filters.is-scrollable.is-scroll-end:not(.is-scroll-start) .search-filters__list {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 56px, #000 100%);
		mask-image: linear-gradient(to right, transparent 0%, #000 56px, #000 100%);
	}
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.blog-filters::before,
	.blog-filters::after,
	.products-filters::before,
	.products-filters::after,
	.search-filters::before,
	.search-filters::after {
		transition: none;
	}
}