@use '../../../static/sass/filters/common';
@use '../../../static/sass/filters/taxonomy-filter';

@use '../../../static/sass/filters/filter-search';
@use '../../../static/sass/filters/filter-scroll';


.ct-filter-widget-wrapper {
	font-size: 15px;

	a {
		text-decoration: none;
		pointer-events: none;
		color: var(--theme-text-color);
	}

	ul {
		margin: 0;
		padding: 0;
		user-select: none;
		list-style-type: none;

		ul {
			padding-inline-start: 25px;
		}
	}

	input[type="search"], .ct-pseudo-input {
		width: 100%;
		height: var(--theme-form-field-height, 40px);
		margin: 0;
		padding: var(--has-classic-forms, var(--theme-form-field-padding, 0 15px));
		border-width: var(--theme-form-field-border-width, 1px);
		border-style: var(--theme-form-field-border-style, solid);
		border-color: var(--theme-form-field-border-initial-color);
		border-radius: var(--has-classic-forms, var(--theme-form-field-border-radius, 3px));
		background-color: var(--has-classic-forms, var(--theme-form-field-background-initial-color));

		&:focus {
			box-shadow: none;
			border-color: var(--theme-form-field-border-focus-color);
		}
	}


	// taxonomies
	.ct-filter-checkbox {
		width: 16px;
		height: 16px;
		border-radius: 2px;
		border: 1px solid rgb(231 231 231);
	}

	.ct-expandable-trigger svg {
		--theme-icon-size: 10px;
	}


	// swatches
	.ct-swatch-container {
		display: flex;
		justify-content: center;
		border-radius: var(--swatch-border-radius);

		.ct-swatch {
			border-radius: inherit;
			height: var(--swatch-size, 30px);
		}
	}

	[data-swatches-type="color"],
	[data-swatches-type="image"] {

		.ct-swatch {
			padding: 2px;
			width: var(--swatch-size, 30px);
			background-clip: content-box;
			border: 2px solid var(--swatch-border-color, var(--theme-border-color));
		}
	}

	[data-swatches-type="button"] .ct-swatch {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: var(--swatch-size, 30px);
		padding: 0 calc(var(--swatch-size, 30px) / 3.5);
		font-size: calc(var(--swatch-size, 30px) / 2.5);
		font-weight: 600;
		color: var(--swatch-button-text-color);
		background: var(--swatch-button-background-color);
		border: 2px solid var(--swatch-button-border-color, var(--theme-border-color));
		transition: color 0.2s ease, border 0.2s ease, background 0.2s ease;
	}

	[data-swatches-type="color"] {
		--swatch-size: 25px;
	}

	[data-swatches-type="button"] {
		--swatch-size: 30px;
	}

	[data-swatches-type="image"] {
		--swatch-size: 35px;
	}

	[data-swatches-shape="round"] {
		--swatch-border-radius: 200px;
	}

	[data-swatches-shape="square"] {
		--swatch-border-radius: 3px;
	}
}


// reset button
.ct-filter-reset {
	
	.ct-button-ghost {
		gap: 10px;
		--theme-button-font-size: 13px;
		--theme-button-min-height: 40px;
		--theme-button-padding: 5px 15px;
	}
}

[data-display-type="inline"] .ct-filter-reset {
	flex-basis: 100%;
}


// expandable
.wp-block-blocksy-widgets-wrapper--collapsible {

	.block-editor-block-list__layout > .wp-block-heading {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		
		&:after {
			display: block;
			content: '';
			width: 10px;
			height: 10px;
			margin-inline-start: auto;
			background: currentColor;
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='currentColor' viewBox='0 0 25 25'%3E%3Cpath d='M.207 17.829 12.511 5.525l1.768 1.768L1.975 19.596z'%3E%3C/path%3E%3Cpath d='m10.721 7.243 1.768-1.768L24.793 17.78l-1.768 1.767z'%3E%3C/path%3E%3C/svg%3E");
		}
	}
}


// notice
[data-type="blocksy/woocommerce-filters"] {

	.ct-block-notice {
		margin: 0;
		color: #000;

		p {
			margin: 0;
		}
	}
}