@use 'sass:math';
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/global.variables' as globalVariables;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/fonts.variables' as fonts;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/functions/global.functions' as globalFunctions;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-weights.variables' as fontWeights;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/placeholder/focus.placeholders' as
	focusPlaceholders;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/z-index.variables' as zIndex;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/typography.variables';
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/5-layout/_grid.layout.scss';
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/7-overrides/_visibility.overrides.scss';

@use '../../styles/text-inputs.scss';
@use '../../styles/header.scss';

$application-subheader-heading-padding-top-bottom: globalFunctions.px-to-rem(6);
$application-subheader-heading-max-width: 65%;
$application-header-logo-width: 100px;
$application-header-logo-height: 25px;
$application-header-lang-toggle-font-size: globalFunctions.px-to-rem(16);
$application-header-lang-toggle-line-height: globalFunctions.px-to-rem(22);
$menu-button-icon-margin-right: 6px;
$border-width-2: 2px;

/* Ontario Application Header */
.ontario-application-header {
	@extend %ontario-application-header;

	> .ontario-row {
		display: flex;
		align-items: center;
	}
}

.ontario-application-header-container {
	position: relative;
	width: globalVariables.$full-width;
	z-index: zIndex.$ontario-z-index-above-high;

	.ontario-header__icon-container {
		display: flex;
		align-items: center;
		width: spacing.$spacing-7;
		height: spacing.$spacing-7;
	}
}

/* Header Buttons */
.ontario-header-button {
	@extend %ontario-header-button;
	padding: spacing.$spacing-2 spacing.$spacing-4;

	&:hover,
	&:focus {
		@extend %ontario-focus;
		background-color: colours.$ontario-greyscale-70;
		color: colours.$ontario-colour-white;
	}
}

.ontario-header-button--with-outline {
	@extend %ontario-header-button--with-outline;
}

.ontario-header-button--without-outline {
	&:hover {
		background-color: colours.$ontario-greyscale-70;
	}

	&:focus {
		box-shadow: focusPlaceholders.$ontario-focus-box-shadow;
		outline: 4px solid transparent;
		transition: all 0.1s ease-in-out;
	}
}

/* Subheader */
.ontario-application-subheader {
	padding: (spacing.$spacing-2 + spacing.$spacing-3) 0;
	background-color: darken(colours.$ontario-colour-white, 75);
	position: relative;
	z-index: zIndex.$ontario-z-index-above-high;

	@media screen and (min-width: breakpoints.$medium-breakpoint) {
		z-index: zIndex.$ontario-z-index-neutral;
	}

	.ontario-header-button {
		background-color: colours.$ontario-greyscale-70;
		visibility: visible;

		&:hover {
			background-color: colours.$ontario-greyscale-60;
		}

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

.ontario-application-subheader__menu {
	list-style: none;
	margin: spacing.$spacing-0;
	padding-left: spacing.$spacing-0;

	li {
		border-radius: globalVariables.$global-radius;
		padding: spacing.$spacing-0;
		margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;
		text-align: center;
	}
}

.ontario-application-subheader__menu-container a {
	box-sizing: border-box;
	border-radius: globalVariables.$global-radius;
	color: colours.$ontario-colour-white;
	display: inline-block;
	font-family: fonts.$ontario-font-open-sans;
	font-size: globalFunctions.px-to-rem(18);
	font-weight: fontWeights.$ontario-font-weights-semi-bold;
	height: globalVariables.$standard-input-height;
	line-height: globalFunctions.px-to-rem(23);
	outline: none;
	padding: spacing.$spacing-3;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;

	&.ontario-link--active {
		border-radius: globalVariables.$global-radius;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: -(spacing.$spacing-2);
			left: spacing.$spacing-0;
			right: spacing.$spacing-0;
			height: globalVariables.$global-radius;
			background-color: colours.$ontario-colour-white;
		}
	}

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

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

	&:focus {
		box-shadow: focusPlaceholders.$ontario-focus-box-shadow;
		transition: all 0.1s ease-in-out;
	}
}

.ontario-application-subheader__heading {
	padding: $application-subheader-heading-padding-top-bottom spacing.$spacing-0;
	@extend %h4-styles;
	margin-bottom: spacing.$spacing-0;
	max-width: $application-subheader-heading-max-width;
	color: colours.$ontario-colour-white;
	font-weight: fontWeights.$ontario-font-weights-semi-bold;

	a {
		color: colours.$ontario-colour-white;
		text-decoration: none;

		&:hover,
		&:active,
		&:visited {
			color: colours.$ontario-colour-white;
			text-decoration: underline;
		}

		&:focus {
			@extend %ontario-focus;
		}
	}
}

.ontario-application-subheader__container {
	align-items: center;
	justify-content: space-between;
}

/* Logo */
.ontario-application-header__logo,
.ontario-application-header__logo a,
.ontario-application-header__lang-toggle,
.ontario-application-subheader__container,
.ontario-application-subheader__menu-container,
.ontario-application-subheader__menu {
	display: flex;
	align-items: center;
	outline: none;
}

.ontario-application-header__logo {
	span {
		display: flex;

		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
			&:last-of-type {
				display: none;
			}
		}
	}
	svg {
		margin-right: $menu-button-icon-margin-right;

		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
			margin-right: spacing.$spacing-0;
		}
	}

	a {
		&:focus {
			box-shadow: focusPlaceholders.$ontario-focus-box-shadow;
			transition: all 0.1s ease-in-out;
		}
	}
}

.ontario-application-header__logo svg,
.ontario-application-header__logo img {
	width: $application-header-logo-width;
	height: $application-header-logo-height;
}

/* Menu Toggler */
.ontario-header__menu-toggler {
	display: flex;
	align-items: center;
	padding: spacing.$spacing-2 spacing.$spacing-4;

	@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
		padding-left: spacing.$spacing-2;
		padding-right: spacing.$spacing-2;
	}
}

.ontario-application-header__lang-toggle {
	justify-content: flex-end;

	a {
		font-size: $application-header-lang-toggle-font-size;
		line-height: $application-header-lang-toggle-line-height;
		height: auto;
		outline: none;
		padding: spacing.$spacing-2 spacing.$spacing-3;
	}
}