.ct-header-search {
	display: flex;
	align-items: center;

	a {
		display: flex;
		align-items: center;

		svg {
			flex-grow: 1;
			width: var(--icon-size, 15px);
			height: var(--icon-size, 15px);
		}
	}
}

// Search modal form
#search-modal {
	--vertical-alignment: center;

	form {
		width: 100%;
		max-width: var(--max-width, 800px);
		margin-left: auto;
		margin-right: auto;

		@include media-breakpoint-down (md) {
			--max-width: 90%;
		}
	}

	.ct-search-input {
		@include media-breakpoint-down (sm) {
			margin-bottom: 25px;
		}

		@include media-breakpoint-up (md) {
			margin-bottom: 35px;
		}

		input[type="search"] {
			@include media-breakpoint-down (sm) {
				--formInputHeight: 70px;
				--formFontSize: 22px;
				--formPadding: 0;
			}

			@include media-breakpoint-up (md) {
				--formInputHeight: 90px;
				--formFontSize: 35px;
				--formPadding: 0 50px 0 0;
			}

			border: 0;
			border-radius: 0;
			font-weight: 500;
			color: var(--linkInitialColor);
			background-color: transparent;
		}

		&:after {
			position: absolute;
			content: '';
			width: 100%;
			height: 1px;
			background: var(--linkInitialColor);
			left: 0;
			bottom: 0;
			opacity: 0.2;
		}

		.search-submit {
			right: 0;
			color: #fff;
			border-radius: 100%;
			background: var(--linkHoverColor);

			@include media-breakpoint-down (sm) {
				--search-button-size: 40px;
				top: calc(50% - 20px);
			}

			@include media-breakpoint-up (md) {
				--search-button-size: 48px;
				top: calc(50% - 24px);
			}

			svg {
				width: calc(100% / 3);
				height: calc(100% / 3);
			}

			&:focus {
				outline: none;
			}
		}

		[data-loader] {
			--loaderColor: #fff;
		}
	}
}


// Search modal results
#search-modal {
	.ct-search-results {
		display: grid;
		grid-column-gap: 30px;
		grid-row-gap: 30px;
		padding-top: 0;
		--position: static;
		--width: 100%;
		--box-shadow: none;
		--dropdown-background: transparent;

		@include media-breakpoint-up (md) {
			grid-template-columns: repeat(2, 1fr);
		}

		a {
			--items-padding: 0;
			--items-divider: none;
		}

		.ct-image-container {
			margin-right: 5%;

			@include media-breakpoint-down (sm) {
				--image-size: 15%;
			}

			@include media-breakpoint-up (md) {
				--image-size: 20%;
			}
		}

		// show more button
		.ct-search-more {
			grid-column: 1/-1;
		}
	}
}