@use 'sass:math';
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;

$ontario-search-autosuggest-box-shadow: #0000001a;

.ontario-search-autocomplete__suggestion-list {
	background-color: colours.$ontario-colour-white;
	border-radius: 0 0 globalVariables.$global-radius globalVariables.$global-radius;
	border-top: globalFunctions.px-to-rem(2) solid $ontario-search-autosuggest-box-shadow;
	box-shadow: 0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(8) globalFunctions.px-to-rem(1) $ontario-search-autosuggest-box-shadow;
	clip-path: inset(0 globalFunctions.px-to-rem(-8) globalFunctions.px-to-rem(-8) globalFunctions.px-to-rem(-8));
	display: none;
	height: auto;
	margin: (-0.75 * spacing.$spacing-1) spacing.$spacing-7 spacing.$spacing-7 (0.5 * spacing.$spacing-1);
	overflow: hidden;
	position: absolute;
	width: calc(100% - spacing.$spacing-1);
	z-index: zIndex.$ontario-z-index-above-high;

	li {
		list-style-type: none;
		padding: spacing.$spacing-2 spacing.$spacing-4;

		&:active {
			box-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;
		}

		&:last-child {
			padding-bottom: spacing.$spacing-2;
		}
	}
}

.ontario-search-autocomplete__suggestion-list--selected {
	background-color: colours.$ontario-colour-button-tertiary--hover;
}

.ontario-search-autocomplete__suggestion-list__list-item:focus {
	outline: none;
}

.ontario-search__overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(colours.$ontario-colour-white, 0.95);
	z-index: zIndex.$ontario-z-index-above-medium;
}

.ontario-search__overlay-open {
	.ontario-search__input-container,
	.ontario-search-autocomplete__suggestion-list {
		z-index: zIndex.$ontario-z-index-above-high;
		position: absolute;
		width: 100%;
	}

	.ontario-search__input-container {
		top: spacing.$spacing-4;
	}

	.ontario-search-autocomplete__suggestion-list {
		top: 4.06rem; /* Position below the search input box */
		left: 0;
		width: calc(100% - spacing.$spacing-6);
	}
}

.ontario-search__overlay-open.ontario-search__input-suggestion-container {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: zIndex.$ontario-z-index-above-high;
}

.ontario-search-autocomplete__suggestion-list-open {
	.ontario-search__submit {
		z-index: zIndex.$ontario-z-index-above-high;
		border-radius: 0 globalVariables.$global-radius 0 0;
		bottom: 0.0625rem;
	}
}

.ontario__visually-hidden {
	position: absolute;
	width: globalFunctions.px-to-rem(1);
	height: globalFunctions.px-to-rem(1);
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
}
