Search box

@use 'sass:math';
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;

$ontario-input-height: globalFunctions.px-to-rem(48);
$ontario-search-icon-size: 2rem;
$ontario-reset-icon-size: 1.5rem;
$ontario-search-button-width: 5rem;
$ontario-search-button-width--mobile: 3rem;
$ontario-search-input-padding: 8.5rem;
$ontario-search-input-padding--mobile: 7.75rem;
$ontario-search-desktop-width: 34rem;
$ontario-search-mobile-width: 20.5rem;
$ontario-reset-icon-path: '../icons/ontario-icons-close.svg';

.ontario-search__container {
	max-width: $ontario-search-desktop-width;
	margin-bottom: spacing.$spacing-7;
}

.ontario-search__input-container {
	position: relative;
}

.ontario-search__label {
	margin-bottom: spacing.$spacing-2;
}

.ontario-search__input.ontario-input {
	border: 2px solid colours.$ontario-colour-black;
	margin-bottom: spacing.$spacing-0;
	height: $ontario-input-height;
	padding-left: spacing.$spacing-3;
	padding-right: $ontario-search-input-padding;

	&:invalid + input[type='reset'] {
		display: none;
	}

	&:focus {
		& ~ .ontario-header__search-submit {
			background-color: colours.$ontario-colour-link;
			color: colours.$ontario-colour-white;

			&:hover {
				background-color: colours.$ontario-colour-link--hover;
				color: colours.$ontario-colour-white;
			}
		}
	}

	// Remove auto X icon for IE and Edge on input area
	&::-ms-clear {
		display: none;
		width: 0;
		height: 0;
	}

	// Remove red outline around input area on Firefox
	&:invalid:focus {
		box-shadow: 0 0 0 4px colours.$ontario-colour-focus;
		-moz-box-shadow: none;
	}

	&:invalid:not(:focus) {
		box-shadow: none;
		-moz-box-shadow: none;
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		padding-left: spacing.$spacing-4;
		padding-right: $ontario-search-input-padding--mobile;
		background-color: transparent;
	}
}

.ontario-search__submit {
	border: 0;
	border-radius: 0 3px 3px 0;
	background-color: colours.$ontario-colour-link;
	color: colours.$ontario-colour-black;

	display: flex;
	justify-content: center;
	align-items: center;

	font-family: typography.$ontario-font-open-sans;
	font-weight: fontWeights.$ontario-font-weights-semi-bold;
	font-size: 1.125rem;
	width: $ontario-search-button-width;
	line-height: lineheight.$ontario-line-height-8;

	position: absolute;
	right: spacing.$spacing-0;
	bottom: spacing.$spacing-0;
	top: spacing.$spacing-0;
	cursor: pointer;

	&:hover {
		background-color: colours.$ontario-colour-link--hover;
		color: colours.$ontario-colour-white;
	}

	&:focus {
		outline: none;
		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
		background-color: colours.$ontario-colour-link--hover;
		color: colours.$ontario-colour-white;
	}

	&:active {
		background-color: colours.$ontario-colour-link--active;
		color: colours.$ontario-colour-white;
	}

	svg {
		color: colours.$ontario-colour-white;
		margin-right: spacing.$spacing-0;
		margin-bottom: spacing.$spacing-0;
		width: $ontario-search-icon-size;
		height: $ontario-search-icon-size;
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		width: $ontario-search-button-width--mobile;
	}
}

input[type='reset'].ontario-search__reset {
	position: absolute;
	display: flex;
	align-items: center;
	top: spacing.$spacing-2;
	right: $ontario-search-button-width + spacing.$spacing-4;
	height: $ontario-reset-icon-size;
	width: $ontario-reset-icon-size;
	color: colours.$ontario-colour-black;
	margin: spacing.$spacing-0;
	padding: spacing.$spacing-1;
	background-size: $ontario-reset-icon-size;
	background-image: url($ontario-reset-icon-path);
	background-position: center center;
	background-repeat: no-repeat;
	background-color: transparent;
	outline: none;
	border: none;
	cursor: pointer;

	&:focus {
		box-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		right: $ontario-search-button-width--mobile + spacing.$spacing-7;
	}
}

// remove default cancel button for input with type="search"
input[type='search'].ontario-search__input::-webkit-search-decoration,
input[type='search'].ontario-search__input::-webkit-search-cancel-button,
input[type='search'].ontario-search__input::-webkit-search-results-button,
input[type='search'].ontario-search__input::-webkit-search-results-decoration {
	-webkit-appearance: none;
}