.search-form {
	position: relative;
	z-index: 1;

	&.ct-has-dropdown {
		z-index: 2;
	}

	&:not([data-live-results="thumbs"]) {
		.ct-image-container {
			--display: none;
		}
	}
}

// search input
.ct-search-input {
	position: relative;
	z-index: 2;

	input[type="search"] {
		// hide chrome X button
		&::-webkit-search-decoration,
		&::-webkit-search-cancel-button,
		&::-webkit-search-results-button,
		&::-webkit-search-results-decoration {
			display: none;
		}

		&:focus + button {
			opacity: 1;
			color: var(--formTextFocusColor);
		}
	}

	button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--search-button-size, var(--formInputHeight, 40px));
		height: var(--search-button-size, var(--formInputHeight, 40px));
		position: absolute;
		top: 0;
		right: 0;
		padding: 0;
		border: none;
		cursor: pointer;
		background: transparent;
		opacity: 0.5;
		transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
					color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

		[data-loader] {
			opacity: 0;
			visibility: hidden;
			--loaderSize: 30px;
			--loaderColor: rgba(44, 62, 80, 0.2);
		}
	}
}


.ct-searching .search-submit {
	svg {
		opacity: 0;
	}

	[data-loader] {
		opacity: 1;
		visibility: visible;
		animation-play-state: running;
	}
}


// search results
.ct-search-results {
	position: var(--position, absolute);
	z-index: 1;
	top: -15px;
	left: -15px;
	padding-top: calc(var(--formInputHeight, 40px) + 14px);
	width: var(--width, calc(100% + 30px));
	border-radius: 5px;
	overflow: hidden;
	background: var(--dropdown-background, #fff);
	box-shadow: var(--box-shadow, 0px 50px 70px 0px rgba(210, 213, 218, 0.4));
	--listIndent: 0;
	--listItemSpacing: 0;
	--listStyleType: none;

	a {
		display: flex;
		align-items: center;
		font-size: 14px;
		line-height: 1.4;
		font-weight: 500;
		padding: var(--items-padding, 16px);

		&:not(:last-child) {
			border-bottom: var(--items-divider, 1px dashed rgba(0, 0, 0, 0.05));
		}

		.ct-image-container {
			flex: 0 0 var(--image-size, 45px);
			max-width: var(--image-size, 45px);
			align-self: flex-start;
			border-radius: 2px;
			margin-right: 15px;
		}
	}
}

.ct-search-more {
	justify-content: center;
	--items-padding: 12px;
}

// results reveal animation
.ct-search-results {
	&.ct-slide,
	&.ct-fade-leave,
	&.ct-fade-leave-active,
	&.ct-fade-enter,
	&.ct-fade-enter-active {
		transition: height 0.3s ease,
					opacity 0.3s ease;
	}

	&.ct-fade-enter {
		opacity: 0;
	}

	&.ct-fade-enter-active {
		opacity: 1;
	}

	&.ct-fade-leave {
		opacity: 1;
	}

	&.ct-fade-leave-active {
		opacity: 0;
	}
}