@import '../../1-helpers/mixins';
@import '../../1-helpers/functions';


// 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-inline-end: var(--image-spacing);
		}
	}
}

// search results modal only
#search-modal {
	.ct-search-results {
		display: grid;
		grid-column-gap: 30px;
		grid-row-gap: 30px;
		padding-top: 0;

		--position: static;
		--width: 100%;
		--search-dropdown-box-shadow: none;
		--search-dropdown-background: transparent;

		--items-padding: 0;
		--items-divider: none;

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

		.ct-image-container {
			--image-spacing: 5%;

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

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

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

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