//
// Citizen - Search styles
// https://starcitizen.tools
//

@import '../variables.less';
@import '../mixins.less';

@suggestion-max-width: 400px + @icon-box-size + @icon-padding * 2; // 454px

#typeahead-suggestions {
	position: absolute;
	top: @header-height;
	z-index: 99999;
}

.suggestions-dropdown {
	width: @suggestion-max-width;
	max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
	display: flex; // Needed to show margin
	flex-direction: column;
	background: @base-100;
	.boxshadow(4);
}

.suggestion {
	&-link {
		padding: 8px 20px;
		display: flex;
		align-items: center;

		&.active {
			background-color: @accent-90;

			.suggestion-title {
				color: @accent-50;
			}
		}
	}

	&-text {
		margin-left: 15px;
	}

	&-title {
		margin: 0 0 0.78rem * @content-scaling 0;
		display: inline-block; // so that the margin does not occupy space
		color: @base-10;
		font-size: @content-h6-size;
		line-height: 1.872rem * @content-scaling;
	}

	&-highlight {
		color: @base-30;
		font-style: normal;
	}

	&-description {
		color: @base-30;
		margin: 0;
		font-family: @fonts;
		font-size: @content-caption-size;
		line-height: 1.43rem * @content-scaling;
	}

	&-thumbnail {
		width: 70px;
		min-width: 70px; // so it won't be squeezed by the content text
		height: 60px;
		background-color: @base-80;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
}

#suggestion {
	&-link {
		&-first {
			margin-top: 8px;
		}

		&-last {
			margin-bottom: 8px;
		}
	}

	&-special {
		padding: 1rem;
		border-top: 1px solid @base-80;
		display: flex;
		color: @base-10;
		align-items: center;

		&-icon {
			margin: 0 14px 0 10px;
			width: 20px;
			height: 20px;
			background-repeat: no-repeat;
		}

		&-text {
			padding: 5px 0; // make it looks more center aligned
			font-size: @content-caption-size;
			font-family: @fonts;
			font-weight: bold;
		}

		&:hover {
			background-color: @accent-90;
		}
	}
}

/* using element selector to override default anchor styles */
a.suggestion-link:hover {
	text-decoration: none;
}

// RTL tweaks
.rtl {
	#searchform {
		left: @icon-box-size + @margin-side + @icon-padding;
		right: unset;
	}
}

@media only screen and ( max-width: @suggestion-max-width ) {
	.suggestions-dropdown {
		position: fixed;
		left: 0;
		top: @header-height + 1px;
		max-width: 100vw;

		&:after {
			content: '';
			width: 100vw;
			height: 100vh;
			background: #000;
			display: block;
			opacity: 0.7;
			position: fixed;
		}
	}
}

@media ( prefers-color-scheme: dark ) {
	.suggestions-dropdown {
		background: @dark-bg-50;
	}

	.suggestion {
		&-link {
			&.active {
				background-color: @accent-10;

				.suggestion-title {
					color: @accent-90;
				}
			}
		}

		&-title {
			color: @dark-text-90;
		}

		&-highlight {
			color: @dark-text-70;
		}

		&-description {
			color: @dark-text-70;
		}
	}

	#suggestion {
		&-special {
			border-color: @dark-bg-40;
			color: @dark-text-90;

			&:hover {
				background-color: @accent-10;
			}
		}
	}
}