// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
// For licensing, see LICENSE.md.

@use 'helpers/color';
@use 'helpers/globals';

$border-color-light: hsl( 0, 0%, 90% );
$border-color-dark: hsl( 0, 0%, 50% );

.algolia-autocomplete {
	.algolia-docsearch-suggestion--category-header {
		background: hsl(0, 0%, 96%);
		font-size: 1.2em;
		color: color.u-color( 'text-gray') ;
		border-bottom: 1px solid $border-color-dark;
		border-top: 1px solid $border-color-dark;

		/* #729. */
		.algolia-docsearch-suggestion--highlight {
			background: none;
		}
	}

	/* Disable border-top for first header. */
	.ds-suggestions .ds-suggestion:first-of-type .algolia-docsearch-suggestion--category-header{
		border-top: 0;
	}

	/* Change default padding of items. */
	.algolia-docsearch-suggestion--content,
	.algolia-docsearch-suggestion--subcategory-column,
	.algolia-docsearch-suggestion--category-header,
	.algolia-docsearch-footer {
		padding: 7px 15px;
	}

	/* Change default border colors. */
	.algolia-docsearch-suggestion__secondary,
	.algolia-docsearch-suggestion--subcategory-column{
		border-color: $border-color-light;
	}

	.algolia-autocomplete .ds-dropdown-menu
	.algolia-docsearch-footer {
		border-color: $border-color-dark;
	}

	.algolia-docsearch-suggestion--subcategory-column {
		width: 300px;
		max-width: 300px;
		min-width: 300px;
		background: #fff;
	}

	.ds-dropdown-menu {
		background-color: #fff;
		border: 1px solid $border-color-dark;
		left: inherit !important;
		right: 0 !important;
		font-size: 0.95em;
		margin: 6px 0 0;
		overflow-y: auto;
		max-height: 90vh;

		@include globals.u-responsive-tablet-plus {
			max-width: 800px;
			width: 800px;
		}

		@include globals.u-responsive-tablet {
			max-width: 80vw;
			width: 80vw;
		}

		@include globals.u-responsive-mobile {
			max-width: 95vw;
			width: 95vw;
		}
	}

	.ds-suggestion {
		.algolia-docsearch-suggestion {
			&--subcategory-column-text {
				color: color.u-color( text );
			}
			&--no-results {
				border: none;
				font-size: 1.1em;
				font-weight: 400;
			}
			&----category-header {
				color: color.u-color( 'text-gray' );
			}
		}

		/* #561. In case when selected via keyboard / mouse pointer. */
		&.ds-cursor {
			.algolia-docsearch-suggestion--content {
				background-color: #f1f3f5;
				color: #0064e1;
			}
		}
	}

	/* #561. Hide doubled "Search by" sentence. */
	.algolia-docsearch-footer {
		font-size: 0;
	}
}
