@use "@gloria/layout/_mixins.scss" as *;
@use "@gloria/a11y/_mixins.scss" as *;

.DocSearch.DocSearch-Button {
	@include a11y-keyboard-focus-ring( true, false,
		background-color var(--duration-normal) var(--cbuc-cubic-out),
		color var(--duration-normal) var(--cbuc-cubic-out)
	);

	@include mobile {
		display: flex;
		justify-content: center;
		padding: var(--spacing-2);
		aspect-ratio: 1;
		min-width: 40px;
		height: 40px;
		color: var(--color-text-secondary);
		border: 1px solid rgba(41, 52, 64, 0.2);
		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);
		border-radius: var(--radius-1);
		background: transparent;

		&:hover,
		&:active {
			background-color: rgba(41, 52, 64, 0.08);
			border: 1px solid rgba(41, 52, 64, 0.2);
		}

		&:active {
			color: var(--color-text-primary);
			background-color: rgba(41, 52, 64, 0.16);
			border: 1px solid rgba(41, 52, 64, 0.3);
		}

		.DocSearch-Button-Placeholder,
		.DocSearch-Button-Keys {
			display: none;
		}

		.DocSearch-Search-Icon {
			width: var(--font-size-base);
			height: var(--font-size-base);
			color: currentColor;
			margin: 0;
		}
	}
}

.l-layout {
	--docsearch-spacing: var(--spacing-6);
	--docsearch-highlight-color: hsl(263, 59%, 52%);
	--docsearch-searchbox-shadow: inset 0 0 0 2px hsl(263, 59%, 52%);
	--docsearch-hit-background: var(--color-gray-100);
	--docsearch-modal-background: white;
	--docsearch-icon-color: var(--color-text-secondary);

	.DocSearch-Container {
		z-index: 99999;
		position: fixed;
	}

	.DocSearch-Hit {
		--docsearch-hit-shadow: none;
		--docsearch-hit-background: var(--color-gray-200);
		--docsearch-hit-color: var(--color-text-primary);

		padding-bottom: var(--spacing-2);

		.DocSearch-Hit-path {
			--docsearch-muted-color: var(--color-text-secondary);
		}
	}

	.DocSearch-Hits mark {
		--docsearch-highlight-color: var(--color-primary-500);
	}

	.DocSearch-Hit-source {
		--docsearch-highlight-color: var(--color-text-primary);
	}

	.DocSearch-Help,
	.DocSearch-Label {
		--docsearch-muted-color: var(--color-text-secondary);
	}

	.DocSearch-Commands {
		display: none;
	}

	.DocSearch-HitsFooter {
		--docsearch-spacing: var(--spacing-1);
	}

	.DocSearch-Logo svg {
		--docsearch-logo-color: var(--color-text-secondary);

		.cls-1,
		.cls-2 {
			fill: var(--color-text-secondary) !important;
		}
	}

	/* Search button */
	.DocSearch.DocSearch-Button {
		height: 40px;
		background-color: var(--color-common-white);
		border-radius: var(--radius-1);
		border: 1px solid rgba(41, 52, 64, 0.2);
		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);

		@include a11y-keyboard-focus-ring(true, false,
			background-color var(--duration-normal) var(--cbuc-cubic-out),
			color var(--duration-normal) var(--cbuc-cubic-out)
		);

		@include desktop {
			min-width: 200px;
			padding-left: var(--spacing-4);
			padding-right: var(--spacing-4);
		}

		&:hover {
			background-color: rgba(41, 52, 64, 0.08);
			border: 1px solid rgba(41, 52, 64, 0.2);
		}

		.DocSearch-Button-Placeholder {
			padding-left: var(--spacing-2);
			line-height: 1;
			color: var(--color-text-secondary);
			font-weight: var(--font-weight-regular);
		}

		svg {
			color: var(--color-text-secondary);
		}

		.DocSearch-Button-Keys {
			display: none;
		}

		svg {
			display: inline-block;
			vertical-align: middle;
			aspect-ratio: 1;
			width: 1em;
			height: 1em;
			line-height: 1em;
		}
	}

	.DocSearch-Cancel {
		@media (max-width: 768px) {
			margin-left: var(--spacing-3);
			padding: 0 var(--spacing-3);
			font-size: 1.5em !important;
		}
	}

	/* Fallback until algolia button wont be loaded. */
	.c-algolia-search:not(:has(.DocSearch)) {
		position: relative;
		height: 40px;
		min-width: 200px;
		background-color: var(--color-common-white);
		border-radius: var(--radius-1);
		border: 1px solid rgba(41, 52, 64, 0.2);
		box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.016);

		@include mobile {
			min-width: 40px;
		}

		&:before {
			content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.386 14.386 4.088 4.088zA7.533 7.533 0 1 1 3.733 3.733a7.533 7.533 0 0 1 10.653 10.653" stroke="%23585b5f" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round" /></svg>');
			width: 16px;
			height: 16px;
			display: block;
			position: absolute;
			top: 10px;
			left: 17px;

			@include mobile {
				left: 12px;
			}
		}

		&:after {
			@include desktop {
				content: 'Search';
				position: absolute;
				top: 0;
				left: 33px;
				line-height: 40px;
				padding-left: var(--spacing-2);
				color: var(--color-text-secondary);
				font-weight: var(--font-weight-regular);
			}
		}
	}
}
