_sass/layout/_search.scss
@use 'sass:color';
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;


body.search {
	height: 100vh;
	overflow: hidden;
}

.searchoverlay {
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100vh;
	z-index: 9001;
	background: var(--doc-search-background-color, rgba(230, 230, 230, 0.60));
	backdrop-filter: blur(2.5px);

	&.active {
		opacity: 1;
		pointer-events: all;
	}

	>div {
		border-radius: 15px;
		position: fixed;
		top: 90px;
		left: calc(50% - 400px);
		width: 800px;
		background: var(--main-body-background-color, #FAFAFA);
		border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		padding: 25px 30px 5px 30px;

		form {
			padding: 0!important;
			background: transparent!important;

			input {
				padding: 10px;
				width: 100%;
				font-family: "SuisseIntl-Book", Helvetica, Arial, sans-serif;
				padding-left: 45px;
				background: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0731 10.1924L13.9998 14.1192' stroke='%237E7E7E' stroke-width='1.5'/%3E%3Ccircle cx='5.92301' cy='6.80338' r='5.17301' stroke='%237E7E7E' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat scroll 15px 15px;
				background-position: 13px center;
				background-size: 15px;
				background-color: transparent;
				border-radius: 10px;
				border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
				color: var(--main-text-primary-color, #0D0D0D);

				&::-webkit-input-placeholder {
					color: var(--main-text-secondary-color, #666);
				}

				&::-moz-placeholder {
					color: var(--main-text-secondary-color, #666);
				}

				&:-ms-input-placeholder {
					color: var(--main-text-secondary-color, #666);
				}

				&::-ms-input-placeholder {
					color: var(--main-text-secondary-color, #666);
				}

				&::placeholder {
					color: var(--main-text-secondary-color, #666);
				}

				&:active,
				&:focus {
					border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
					outline: 0;
				}
			}

			.empty_input {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' fill='none' viewBox='0 0 13 13'%3E%3Cpath fill='%23666' d='M13 11.757 7.727 6.5 13 1.243 11.731 0 6.486 5.257 1.24 0 0 1.243 5.245 6.5 0 11.757 1.24 13l5.246-5.257L11.73 13 13 11.757Z'/%3E%3C/svg%3E");
				background-size: contain;
				width: 14px;
				height: 14px;
				position: absolute;
				right: 13px;
				top: 13px;
				cursor: pointer;
				display: none;
				&.visible {
					display: block;
				}
			}
		}

		.shortcuts {
			position: fixed;
			bottom: 20px;
			right: 20px;
			color: var(--main-text-secondary-color, #666);
			@include tiny();

			span {
				background: var(--doc-codebox-background-color, #F2F2F2);
				border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
				border-radius: 50px;
				padding: 2px 8px;
			}
		}

		#search_results {
			overflow-y: auto;
			max-height: calc(100vh - 270px);
			border-radius: 10px;
			margin-top: 20px;

			&::-webkit-scrollbar {
				width: 3px;
			}

			&::-webkit-scrollbar-track {
				background: var(--doc-scrollbar-bg, #E6E6E6);
			}

			&::-webkit-scrollbar-thumb {
				background: var(--doc-scrollbar-slider, #CCC);
			}

			h2 {
				@include title-2();
				margin-top: 0;
				margin-bottom: 9px;
				text-decoration: none;

				u {
					text-decoration: underline;
				}
			}

			.search_result {
				background: var(--doc-codebox-background-color, #F2F2F2);
				border-radius: 10px;
				padding: 15px;
				width: calc(100% - 10px);
				margin: 0;
				margin-top: 5px;
				position: relative;

				&.selected {
					background: #e6e6e6;
				}

				&:last-child {
					margin-bottom: 20px;
				}

				>a {
					display: block;
					width: 100%;
					height: 100%;
					position: absolute;
					z-index: 400;
					top: 0;
					left: 0;
					border-radius: 10px;

					&:hover {
						background: rgba(0, 0, 0, 0.05);
					}
				}

				.search_text {
					@include body-small();
					color: var(--main-text-secondary-color, #666);

					u {
						font-weight: normal;
						text-decoration: underline;
					}
				}
			}

			.search_category {
				border-radius: 50px;
				border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
				background: var(--interactive-filterbox-background-color, #FAFAFA);
				@include tiny();
				padding: 3px 8px;
				margin-top: 10px;
				display: inline-block;
			}
		}
	}
}

.autocomplete {
	/*the container must be positioned relative:*/
	position: relative;
	display: inline-block;
	width: 100%;
}

/*
input {
	border: 1px solid;
	background-color: #f1f1f1;
	padding: 10px;
	font-size: 16px;
}
input[type=text] {
	background-color: #f1f1f1;
	width: 100%;
  }
input[type=submit] {
	background-color: DodgerBlue;
	color: #fff;
}
.autocomplete-items {
	position: relative;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	top: 100%;
	left: 0;
	right: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	gap: 5px;
	padding: 12px;
	border: 1px solid #E6E6E6;
	border-radius: 15px;
	background: white;
}
.autocomplete-items div {
	padding: 5px 10px;
	cursor: pointer;
	background-color: #f7f7f7;
	border: 1px solid #E0E0E0;
	border-radius: 15px;
	font-size: 14px;
}
.autocomplete-items div:hover {
	background-color: #e9e9e9;
}
.autocomplete-active {
	background-color: #fff100 !important;
	color: black;
}
*/

@media only screen and (max-width: 810px) {
	.searchoverlay>div {
		width: calc(100% - 30px);
		left: 15px;
		top: 85px;
		padding: 15px 15px 0px 15px;
	}

	.searchoverlay>div #search_results {
		margin-top: 15px;
		max-height: calc(100vh - 250px);
	}
}
