@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;
@use './button.scss' as button;

$site-header-height: 3.375em !default;
$site-header-inline-gap: tokens.$spacer-3 !default;
$site-header-border: 1px solid tokens.$border !default;

$site-header-font-size: tokens.$font-size-7 !default;
$site-header-brand-font-size: 1.25em !default;
$site-header-brand-font-size-sm: 1.15em !default;

$site-header-control-color: tokens.$text !default;

$site-header-button-font-size: 0.875em !default;
$site-header-button-icon-font-size: 0.875em !default;
$site-header-button-icon-spacing: 0.375em !default;

$site-header-hover-underline-border-width: 2px !default;
$site-header-hover-underline-border: $site-header-hover-underline-border-width solid
	$site-header-control-color !default;

$site-header-logo-width: 1.625em !default;
$site-header-divider-height: 1.5em !default;

$site-header-panel-background-color: tokens.$body-background-medium !default;
$site-header-panel-min-height: 350px !default;
$site-header-panel-block-padding: tokens.$layout-4 !default;
$site-header-panel-gap: tokens.$layout-2 !default;
$site-header-panel-content-gap: tokens.$spacer-3 !default;
$site-header-panel-shadow: tokens.$box-shadow-medium !default;
$site-header-panel-border: 1px solid tokens.$border-white-high-contrast !default;
$site-header-panel-featured-section-border: 1px solid tokens.$table-border-dark !default;

%site-header-hover-underline {
	> :not(.icon):not(.image) {
		position: relative;

		&::after {
			display: block;
			position: absolute;
			content: '';
			border-block-end: $site-header-hover-underline-border;
			inset-inline: 0;
			inset-block-end: -$site-header-hover-underline-border-width;
		}
	}
}

%site-header-control {
	outline-offset: -(tokens.$focus-width);
	color: $site-header-control-color;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	padding-block: button.$button-padding-vertical;
	padding-inline: $site-header-inline-gap;

	&:hover,
	&:visited {
		color: $site-header-control-color;
	}
}

.site-header {
	display: flex;
	position: relative;
	align-items: center;
	height: $site-header-height;
	font-size: $site-header-font-size;
	border-block-end: $site-header-border;
	gap: $site-header-inline-gap;
	padding-inline: tokens.$layout-gap;

	@include mixins.widescreen {
		padding-inline: tokens.$layout-widescreen-gap;
	}

	.site-header-button {
		@include mixins.control;
		@include mixins.unselectable;

		@extend %site-header-control;

		justify-content: center;
		height: 100%;
		border: none;
		border-radius: 0;
		background-color: transparent;
		font-size: $site-header-button-font-size;
		font-weight: tokens.$weight-normal;
		text-align: center;

		&[aria-expanded='true'] {
			background-color: $site-header-panel-background-color;
		}

		.icon {
			font-size: $site-header-button-icon-font-size;

			&:only-child {
				margin: 0;
			}

			/* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
			&:first-child:not(:only-child) {
				margin-inline-end: $site-header-button-icon-spacing;
			}

			/* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
			&:last-child:not(:only-child) {
				margin-inline-start: $site-header-button-icon-spacing;
			}
		}

		&:active,
		&.is-active,
		&:hover,
		&.is-hovered,
		&:focus-visible {
			text-decoration: none;

			&:not([aria-expanded='true']) {
				@extend %site-header-hover-underline;
			}
		}
	}

	.site-header-logo {
		> svg,
		> img {
			display: block;
			width: $site-header-logo-width;
			height: auto;
		}

		&.site-header-logo-centered {
			position: absolute;
			inset-inline-start: calc(50% - $site-header-logo-width / 2);
		}
	}

	.site-header-divider {
		display: inline-block;
		height: $site-header-divider-height;
		border-inline-start: 2px solid tokens.$text-subtle;
		margin-inline-start: $site-header-inline-gap;
	}

	.site-header-brand {
		@extend %site-header-control;

		display: inline-block;
		font-size: $site-header-brand-font-size-sm;
		font-weight: tokens.$weight-semibold;

		&:active,
		&.is-active,
		&:hover,
		&.is-hovered,
		&:focus-visible {
			@extend %site-header-hover-underline;

			text-decoration: none;
		}

		@include mixins.tablet {
			font-size: $site-header-brand-font-size;
		}
	}

	.site-header-nav {
		display: flex;
		align-self: center;
		width: 100%;
		height: 100%;
	}

	.site-header-panel {
		display: grid;
		position: absolute;
		width: 100%;
		min-height: $site-header-panel-min-height;
		grid-gap: $site-header-panel-gap;
		grid-template-areas: 'panel-content' 'panel-featured-section';
		background-color: $site-header-panel-background-color;
		text-wrap: wrap;
		box-shadow: $site-header-panel-shadow;
		z-index: tokens.$zindex-popover;
		inset-inline-start: 0;
		inset-block-start: calc($site-header-height - 1px);
		border-block-start: $site-header-panel-border;
		border-block-end: $site-header-panel-border;
		padding-block: $site-header-panel-block-padding;
		padding-inline: tokens.$layout-gap;

		@include mixins.tablet {
			grid-template-columns: auto 33.333%;
			grid-template-areas: 'panel-content panel-featured-section';
		}

		@include mixins.desktop {
			grid-template-columns: auto 25%;
		}

		@include mixins.widescreen {
			padding-inline: tokens.$layout-widescreen-gap;
		}

		.site-header-panel-featured-content {
			grid-area: panel-featured-section;
			border-block-start: $site-header-panel-featured-section-border;
			padding-block-start: $site-header-panel-gap;
			display: flex;
			gap: $site-header-panel-gap;
			flex-direction: column;

			@include mixins.tablet {
				border-inline-start: $site-header-panel-featured-section-border;
				border-block-start: 0;
				padding-block-start: 0;
				padding-inline-start: $site-header-panel-gap;
			}
		}

		.site-header-panel-content {
			grid-area: panel-content;
			display: grid;
			align-content: space-between;
		}

		.site-header-panel-links {
			display: grid;
			grid-gap: $site-header-panel-content-gap;

			@include mixins.tablet {
				grid-auto-flow: column;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(11, auto);
			}

			@include mixins.desktop {
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: repeat(7, auto);
			}
		}

		.site-header-panel-cards {
			display: grid;
			grid-gap: $site-header-panel-content-gap;

			@include mixins.tablet {
				grid-auto-flow: column;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: repeat(5, auto);
			}

			@include mixins.desktop {
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: repeat(3, auto);
			}
		}
	}
}