/**************************
Search
**************************/

.search__content-container {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.search__content-container--is-shown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/**************************
Trigger btn
**************************/

.search__trigger,
.search__trigger:focus,
.search__trigger:hover {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

/**************************
Overlay
**************************/

.search__content-overlay {
	position: absolute;
	top: -41px;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.75);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.search__content-container--is-shown .search__content-overlay {
	opacity: 1;
}

/**************************
Input
**************************/

.search__input-container {
	position: relative;
	z-index: 1001;
	display: flex;
	gap: 10px;
	transform: scale(0.9);
	transition: transform 0.3s ease-in-out;
}

.search__content-container--is-shown .search__input-container {
	transform: scale(1);
}

.search__container input.search-submit {
	display: none;
}

.search-form label {
	display: flex;
	width: calc(300px + (600 - 300) * ((100vw - 320px) / (1920 - 320)));
}

.search__container .search-field {
	position: relative;
	font-family: var(--e-global-typography-primary-font-family);
	background: transparent !important;
	color: #fff;
	border: none;
	border-bottom: 1px solid;
	height: 60px;
}

.search__container .search-field:focus {
	color: #fff;
}

.search__container .search-field::placeholder {
	font-size: 22px;
	color: #fff;
}

.search__container button.search-submit {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	border: none;
	color: #fff;
	padding: 0;
}

.search__container button.search-submit .ast-icon.icon-search svg {
	height: 2em;
	width: 1.5em;
}