form.search-form {
	position: relative;

	// input
	input {
		position: relative;

		// hide chrome X button
		&::-webkit-search-decoration,
		&::-webkit-search-cancel-button,
		&::-webkit-search-results-button,
		&::-webkit-search-results-decoration {
			-webkit-appearance: none;
		}
	}

	// button
	button {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		cursor: pointer;
		border: initial;
		padding: initial;
		width: var(--search-button-size, var(--form-field-height, 40px));
		height: var(--search-button-size, var(--form-field-height, 40px));
		border-radius: var(--search-button-border-radius, 0px);
		background: var(--search-button-background);
		transition: background 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

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

		&:focus {
			outline: none;
		}
	}

	button:hover,
	input:focus + button {
		background: var(--search-button-focus-background);

		svg {
			fill: var(--icon-focus-color, var(--color));
		}
	}

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


// searching state
.ct-searching .search-submit {
	@media (prefers-reduced-motion: no-preference) {
		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;
	width: var(--width, calc(100% + 30px));
	padding-top: calc(var(--form-field-height, 40px) + 14px);
	border-radius: 5px;
	background: var(--search-dropdown-background, #fff);
	box-shadow: var(--search-dropdown-box-shadow, 0px 50px 70px 0px rgba(210, 213, 218, 0.4));

	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(--search-image-size, 45px);
			max-width: var(--search-image-size, 45px);
			align-self: flex-start;
			border-radius: 2px;

			--image-spacing: 15px;
			margin-right: var(--image-spacing);
		}
	}
}


// 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;
	}
}


// customizer helper
.search-form:not([data-live-results="thumbs"]) {
	.ct-image-container {
		--display: none;
	}
}