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

	a {
		display: flex;
		align-items: center;
		color: var(--linkInitialColor);

		&:hover {
			color: var(--linkHoverColor);
		}

		svg {
			flex-grow: 1;
			width: var(--iconSize);
			height: var(--iconSize);
			fill: currentColor;
		}
	}
}


// Search modal form
#search-modal {
	.content-container {
		--overflow: hidden;
	}

	form {
		width: 100%;
		margin-left: auto;
		margin-right: auto;

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

		@include media-breakpoint-up (lg) {
			max-width: 800px;
		}
	}

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

			@include media-breakpoint-up (md) {
				--formInputHeight: 100px;
				--formFontSize: 35px;
			}

			--formPadding: 0 90px 0 25px;
			--formBorderInitialColor: rgba(255, 255, 255, 0.2);

			font-weight: 500;
			color: #fff !important;
			letter-spacing: 0.03em;
			border-radius: 0;
			border: none;
			background-color: transparent;
			background-image: 
				linear-gradient(
					transparent calc(100% - var(--formBorderSize)), 
					var(--formBorderFocusColor) calc(100% - var(--formBorderSize)),
					var(--formBorderFocusColor) calc(100% - var(--formBorderSize))
				),

				linear-gradient(
					transparent calc(100% - var(--formBorderSize)), 
					var(--formBorderInitialColor) calc(100% - var(--formBorderSize)),
					var(--formBorderInitialColor) calc(100% - var(--formBorderSize))
				);
			;
			background-size: 0% 100%, 100% 100%;
			background-repeat: no-repeat;

			@include input-placeholder {
				color: #fff;
			}

			&:focus {
				background-size: 100% 100%,100% 100%;
			}
		}

		.search-submit {
			right: 25px;
			border-radius: 100%;
			color: #fff;
			background: var(--paletteColor1);

			@include media-breakpoint-up (md) {
				top: calc(50% - 28px);
				width: 56px;
				height: 56px;

				svg {
					width: 16px;
					height: 16px;
				}
			}

			@include media-breakpoint-down (sm) {
				top: calc(50% - 20px);
				width: 40px;
				height: 40px;

				svg {
					width: 12px;
					height: 12px;
				}
			}

			i {
				width: 100%;
				height: 100%;
				color: inherit;

				svg {
					transition: transform 0.2s ease;
				}

				&:hover {
					svg {
						transform: scale(1.15);
					}
				}
			}

			&:focus {
				outline: none;
			}
		}

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


// Search modal results
#search-modal {

	a {
		color: var(--linkInitialColor);

		&:hover {
			color: var(--linkHoverColor);
		}
	}

	ul {
		display: grid;
		@include media-breakpoint-up (md) {
			grid-template-columns: repeat(2, 1fr);
		}
		grid-column-gap: 30px;
		// grid-row-gap: 25px;

		width: 100%;
		@include list-normalize;

		li {
			min-width: 0;
			margin-top: 30px;

			@include media-breakpoint-down (sm) {
				grid-column: span 2;
			}

			a {
				display: flex;
				align-items: center;
				font-size: 15px;
				line-height: 1.5;
				font-weight: 500;

				.ct-image-container {
					@include media-breakpoint-down (sm) {
						flex: 0 0 15%;
						max-width: 15%;
					}

					@include media-breakpoint-up (md) {
						flex: 0 0 20%;
						max-width: 20%;
					}

					margin-right: 5%;
					overflow: hidden;
					border-radius: 2px;
				}

				span {
					min-width: 0;
				}
			}
		}

		// show more button
		> a {
			grid-column: span 2;
			margin-top: 20px;
			font-size: 14px;
			font-weight: 400;
			text-transform: capitalize;
			text-align: center;
		}
	}
}