.ct-demo-filters,
[class*="ct-filter-dropdown"] {
	--wp-components-color-foreground: #4f5a68;
	--wp-components-color-accent: var(--ui-accent-color);
}


.ct-demo-filters {
	display: flex;
	align-items: center;
	gap: 15px;
	position: sticky;
	z-index: 1;
	top: calc(32px + 30px);
	padding-bottom: 30px;

	@media (max-width: 700px) {
		flex-wrap: wrap;
		justify-content: center;
	}

	&:before {
		position: absolute;
		inset-inline: -10px;
		inset-block: -30px 0;
		content: '';
		background: #fff;
	}

	> * {
		position: relative;
		z-index: 1;
	}


	// search filter
	.ct-filter-search {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		max-width: 250px;

		@media (min-width: 701px) {
			margin-inline-start: auto;
		}


		input {
			width: 100%;
			height: 35px;
			border-radius: 3px;
			padding-inline-start: 35px;
			transition: box-shadow 0.1s linear, 
						border-color 0.1s linear;

			&:not(:focus) {
				border-color: #e2e6eb;
			}

			&:hover {
				border-color: var(--ui-accent-color);
			}
		}

		svg {
			position: absolute;
			inset-inline-start: 14px;
		}
	}

	[class*="ct-filter-trigger"] {
		flex-shrink: 0;
	}

	// .ct-filter-trigger-export {
	// 	display: none;
	// }
}


[class*="ct-filter-dropdown"] {

	.components-menu-item__item {
		min-width: 130px;
	}
}