/*=============================*/
/*=====----- GENERAL -----=====*/
/*=============================*/

.search-cont {
	.headerbox-search-form {
		display: flex;
	}

	.searchInput {
		flex-grow: 1;
		font-family: var(--font-soft);
		font-weight: var(--font-weight-medium);
		font-size: var(--text-base);
		line-height: normal;
		color: var(--gray-dark);
	}
}

/*===================================*/
/*=====----- MOBILE SEARCH -----=====*/
/*===================================*/

.mobile-menu .search-cont {
	.search-button,
	.close {
		display: none;
	}

	.searchInput {
		padding: var(--space-3) 10px;
		background: var(--white);
		border: 1px solid var(--gray-light);
	}

	.submit {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		padding: 0;
		margin: 0;
		font-size: 18px;
		color: var(--gray-dark);
		background: var(--yellow);
		border: none;
		border-radius: 0;
	}
}

/*====================================*/
/*=====----- DESKTOP SEARCH -----=====*/
/*====================================*/

.desktop-navs .search-cont {
	position: relative;
	z-index: 20;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding-left: 14px;
	border-left: 1px solid rgba(250, 249, 239, 0.4);

	.search-inner {
		position: relative;
	}

	.form-outer {
		position: absolute;
		inset: -14px -17px auto auto;
		display: flex;
		width: 347px;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--transition-appendix),
			visibility var(--transition-appendix);

		&,
		* {
			pointer-events: none;
		}
	}

	.headerbox-search-form {
		flex-grow: 1;
		background: var(--white);
		border: 1px solid var(--gray-light);
	}

	.searchInput {
		padding: 14px 15px;
	}

	.submit {
		display: flex;
		align-items: center;
		justify-self: center;
		padding: 10px;
		font-size: 18px;
		color: var(--gray-dark);
		background: none;
		border: none;
		border-radius: 0;
	}

	.close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60px;
		flex-shrink: 0;
		padding: 0;
		margin: 0;
		font-size: 28px;
		color: var(--gray-dark);
		background: var(--yellow);
		border: none;
		border-radius: 0;
	}

	.search-button {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		margin: 0;
		font-size: 18px;
		color: var(--yellow);
		background: none;
		border: none;
		border-radius: 0;
	}

	/*----- active search -----*/

	&.active {
		.form-outer {
			opacity: 1;
			visibility: visible;
			
			&,
			* {
				pointer-events: all;
			}
		}
	}
}