.hs-editor-hide-until-active {
	display: none;
}

.inpage-editor-active-field .hs-editor-hide-until-active {
	display: block;
}

.hs-search-field {
	position: relative;
}

.hs-search-field__input {
	box-sizing: border-box;
	width: 100%;
	flex: 1;
}

.hs-search-field__bar button svg {
	height: 10px;
}

.hs-search-field__suggestions {
	padding: 0;
	margin: 0;
	list-style: none;
}

.hs-search-field--open .hs-search-field__suggestions,
.inpage-editor-active-field .hs-search-field__suggestions {
	position: absolute;
	width: 100%;
	border: 1px solid #cdcdcd;
	background-color: #fff;
	box-shadow: 1px 10px 16px -9px rgba(122, 122, 122, 0.75);
}

.hs-search-field__suggestions li {
	display: block;
	padding: 0;
	margin: 0;
}

.hs-search-field__suggestions .results-for {
	font-weight: bold;
}

.hs-search-field__suggestions a,
.hs-search-field__suggestions .results-for {
	display: block;
	padding: 0 10px;
	line-height: 1.7rem;
}

.hs-search-field__suggestions a:hover,
.hs-search-field__suggestions a:focus {
	background-color: rgba(0, 0, 0, 0.1);
	outline: none;
}

.hs-search-field__input:focus {
	outline-style: solid;
}

.hs-search-field__suggestions-container {
	position: relative;
	flex-basis: 100%;
}

.hs-search-field__form {
	display: flex;
	flex-wrap: wrap;
}

.hs-search-field__label {
	flex-basis: 100%;
}

.hs-search-field__bar--button-beneath .hs-search-field__input {
	flex-basis: 100%;
}

.hs-search-field__bar--button-beneath .hs-search-field__button {
	margin-top: 0.725rem;
	margin-right: 0.725rem;
}

.hs-search-field__bar--button-align-right .hs-search-field__button {
	margin-right: 0;
	margin-left: 0.725rem;
	order: 2;
}

.hs-search-field__bar--button-beneath .hs-search-field__suggestions-container {
	min-width: 75%;
	flex-basis: auto;
	flex-grow: 1;
}

.hs-search-field__button--labelled .hs_cos_wrapper_type_icon {
	margin-right: 0.5rem;
}

/* stylelint-disable declaration-no-important */
.show-for-sr {
	position: absolute !important;
	overflow: hidden !important;
	height: 1px !important;
	width: 1px !important;
	padding: 0 !important;
	border: 0 !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}
/* stylelint-enable declaration-no-important */


/* Custom Styles
* Really these should be consolidated into the module properly, but there was no time. */
.hs-search-field__bar {
	border: var(--border-width) solid var(--clr-stroke) !important;
	border-radius: 999px !important;
	background-color: var(--clr-bg) !important;
}


.hs-search-field__bar>form input {
	border: 0 !important;
	background-color: transparent !important;
	border-radius: 999px !important;
	padding: 0.5rem 1rem !important;
	font-size: 1rem !important;

}

.hs-search-field__button {
	padding: .75rem !important;
	border: 0 !important;
	background-color: transparent !important;
	svg {
		height: 1rem !important;
		fill: var(--clr-gray-50) !important;
	}
}

.hs-search-field__button:hover {
	background-color: var(--clr-gray-90) !important;
}


/* Suggestion box */
.hs-search-field--open .hs-search-field__suggestions, .inpage-editor-active-field .hs-search-field__suggestions {
	background-color: var(--clr-bg);
	display: grid !important;
	z-index: 10;
	/* gap: var(--gap-xs); */
	margin-top: .5rem !important;
	border-radius: var(--corner) !important;
	padding-block: .25rem !important;
}

.hs-search-field__suggestions li {
	padding-block: .5rem !important;
	/* background-color: var(--clr-bg); */

	margin-inline: .25rem;
	&:hover {
		background-color: var(--clr-bg-2) !important;
		color: var(--clr-primary) !important;
		a { color: inherit; !important}
	}
}

.hs-search-field__suggestions li.results-for {

	background-color: transparent !important;
	&:hover {
		color: var(--clr-text) !important;
	}
}

.hs-search-field__suggestions .results-for, .hs-search-field__suggestions a {
	color: var(--clr-text) !important;
	&:hover {
		background-color: transparent !important;
	}
}