/* =search extras, =browse by dropdowns
 * alpha : Default (has search form, has browse by dropdowns)
 * beta : Minimal (has search form, no browse, just a button)
*/

.editor-styles-wrapper .wp-block-cwp-search-extras.has-background,
.editor-styles-wrapper .wp-block-cwp-search-extras.has-background.alignfull {
	padding: 0; /* to get rid of editor styles on outer ACF wrapper block */
}

.block-search-extras .block-search-extras__search-container .wp-block-search__input {
	padding: 16px;
}

.block-search-extras .wp-block-search__button {
	top: 50% !important;
	transform: translateY(-50%);
}

/* the core search form that is auto-output with this block will sometimes
get assigned a class of has-background, which causes it to inherit padding.
this removes that. */
.block-search-extras form.has-background {
	padding: 0 !important;
}



/* Default Layout ----------------------------------------------------------- */

.block-search-extras.layout-alpha:not(.alignfull) {
	border-radius: var(--wp--custom--border-radius--small);
}

/* search form */
.block-search-extras.layout-alpha .block-search-extras__title {
	font-size: var(--wp--preset--font-size--jumbo);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--small);
	margin: 0 0 1.125rem;
	text-align: center;
}

.block-search-extras.layout-alpha .wp-block-search__inside-wrapper {
	max-width: var(--wp--custom--layout--content);
	margin: 0 auto;
}

/* dropdowns */
.block-search-extras.layout-alpha .browse-dropdowns__title {
	font-weight: 700;
	font-size: 1.375rem;
	position: relative;
	text-align: center;
	margin: 0 0 16px;
}

.block-search-extras.layout-alpha .block-search-extras__browse-by-dropdowns-container label {
	display: none;
}

.block-search-extras.layout-alpha .block-search-extras__browse-by-dropdowns-container select {
	background: url(../../assets/icons/color/carat-down-primary-bright.svg) no-repeat;
	background-position: right 0px center;
	background-size: 32px auto;
	background-color: white;
	-webkit-appearance:none;
	-moz-appearance: none;
	appearance: none;
	margin-bottom: 10px;
	color: var(--wp--custom--color--neutral-800);
	border: none;
	padding: 0 24px 0 16px;
	line-height: 48px;
	height: 50px;
}

@media only screen and (max-width: 767px) {

	.block-search-extras.layout-alpha.has-background:not(.alignfull) {
		padding: 32px;
	}

	/* search form */
	.block-search-extras.layout-alpha .block-search-extras__search-container {
		margin-bottom: 32px;
	}

	.block-search-extras.layout-alpha .block-search-extras__search-container .wp-block-search__input {
		min-height: 68px;
	}

	/* dropdowns */

}

@media only screen and (min-width: 768px) {

	.block-search-extras.layout-alpha.has-background:not(.alignfull) {
		padding: 48px;
	}

	.block-search-extras.layout-alpha {
		/* padding: 30px 0; /* extra padding on desktop */ */
	}

	/* search form */
	.block-search-extras.layout-alpha .block-search-extras__search-container {
		margin-bottom: 24px;
	}

	.block-search-extras.layout-alpha .block-search-extras__search-container .wp-block-search__input {
		min-height: 78px;
	}

	/* dropdowns */

}

@media only screen and (min-width: 992px) {
	/* search form */

	/* dropdowns */
	.block-search-extras.layout-alpha .browse-dropdowns__inner {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
		grid-auto-flow: column;
		grid-gap: 16px;
	}

}


/* Minimal Layout ----------------------------------------------------------- */

.block-search-extras.layout-beta:not(.alignfull) {
	border-radius: var(--wp--custom--border-radius--small);
}

.block-search-extras.layout-beta .wp-block-search__inside-wrapper {
	max-width: 100%;
}

.block-search-extras.layout-beta .wp-block-search__input {
	min-height: 58px;
}

.block-search-extras__subheading {
	font-size: 1.375rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--small);
	text-align: center;
	margin: 0;
}

.block-search-extras.layout-beta .block-search-extras__buttons .wp-block-button__link {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width: 767px) {
	.block-search-extras.layout-beta.has-background {
		padding: 20px 18px 22px;
		text-align: center;
	}

	.block-search-extras__subheading {
		padding: 9px;
	}

}

@media only screen and (min-width: 768px) {
	.block-search-extras.layout-beta.has-background {
		padding: 32px 30px;
	}

	.block-search-extras.layout-beta .block-search-extras__inner {
		display: grid;
		grid-template-columns: 1fr 100px 271px;
		align-items: center;
	}

	.block-search-extras.layout-beta .wp-block-search__input {
		min-height: 78px;
	}

	.block-search-extras.layout-beta .block-search-extras__buttons .wp-block-button__link {
		min-height: 78px;
	}

}