@use "@gloria/layout/_mixins.scss" as *;
@use "@gloria/a11y/_mixins.scss" as *;

.c-header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	background: var(--color-common-white);
	z-index: var(--z-index-header);
	box-shadow: 0px 2px 4px 0px rgba(0, 18, 52, 0.08);

	&.is-on-top-overlay {
		position: fixed;
		width: 100vw;
		z-index: calc(var(--z-index-overlay) + 1);
	}

	&__mobile {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: var(--spacing-3) var(--spacing-5);
		gap: var(--spacing-6);

		&-brand {
			display: flex;
			align-items: center;
			position: relative;
			top: 2px;
		}

		&-actions {
			display: flex;
			gap: var(--spacing-2);
			justify-content: flex-end;
		}

		&-menu {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background-color: var(--color-common-white);
			border-top: 1px solid var(--color-gray-400);
			box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
			padding: var(--spacing-4) var(--spacing-5);
			z-index: 4;
		}

		&-menu-button {
			&[aria-expanded='true'] {
				& > .c-icon--menu  { display: none; }
				& > .c-icon--close { display: flex; }
			}

			&[aria-expanded='false'] {
				& > .c-icon--menu  { display: flex; }
				& > .c-icon--close { display: none; }
			}
		}
	}

	&__brand-row {
		display: grid;
		grid-template: 'brand toolbar' / 1fr auto;
		gap: var(--spacing-4);
		place-content: center;
		padding: var(--spacing-3) var(--spacing-5) var(--spacing-2);

		&-toolbar {
			gap: var(--spacing-4);
		}
	}

	&__nav-row {
		display: grid;
		grid-template-columns: 1fr auto;
		padding-bottom: 0;
	}

	&__brand-logo {
		position: relative;
		top: 2px;
		width: 132px;
	}

	&__divider {
		width: 1px;
		height: 100%;
		background-color: var(--color-gray-500);
		margin: 0 var(--spacing-6);
	}
}

.c-nav-links {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-1);

	&--suffix {
		margin-right: var(--spacing-5);
	}

	&__item {
		position: relative;
		display: inline-flex;
		place-content: center;
		flex-wrap: wrap;
		height: 100%;
		text-decoration: none;
    	color: var(--color-text-primary);
		transition:
			color var(--duration-fast) var(--cbuc-quad-out),
			background-color var(--duration-fast) var(--cbuc-quad-out),
			border-color var(--duration-ultra-fast) var(--smoothstep),
			box-shadow var(--duration-ultra-fast) var(--smoothstep);

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background-color: transparent;
			transition: background-color var(--duration-fast) var(--cbuc-quad-out);
		}

		&--active {
			color: var(--color-primary);

			&::after {
				background-color: var(--color-primary);
			}
		}

		&--spaced {
			padding: 0 var(--spacing-5);

			&:hover {
				background-color: var(--color-primary-100);
				color: var(--color-primary);
			}

			&:active {
				background-color: var(--color-primary-200);
				color: var(--color-primary);
			}
		}

		&--icon-only {
			padding: 0 var(--spacing-3);

			&:hover {
				color: var(--color-primary-400);
			}

			&:active {
				color: var(--color-primary);
			}
		}

		&--align-right {
			padding-right: var(--spacing-0);
		}

		&--align-left {
			padding-left: var(--spacing-0);
		}
	}

	&__item-text {
		display: flex;
		place-content: center;
		padding: var(--spacing-3) 0;
		font-size: var(--font-size-sm);
		cursor: pointer;
	}
}
