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