@use "../mixins/utilities";
@use "../variables-site/structure";

/** === Tertiary menu === */

.nav3 {
	align-items: center;
	display: flex;
	list-style: none;
	padding: 0;

	ul,
	li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	a {
		color: inherit;
		display: inline-block;
		padding: #{0.25 * structure.$size__spacing-unit} 0;

		&:hover {
			opacity: 0.75;
		}
	}

	.menu-highlight a {
		border: 1px solid currentcolor;
		font-weight: bold;
		padding-left: #{structure.$size__spacing-unit * 0.5};
		padding-right: #{structure.$size__spacing-unit * 0.5};
	}
}

// Header - default background and default height
body.h-db.h-dh .site-header {
	.nav3 {
		.menu-highlight a {
			background-color: var(--newspack-theme-color-primary);
			border: 0;
			color: var(--newspack-theme-color-against-primary);

			&:hover {
				background-color: var(--newspack-theme-color-text-main);
				color: var(--newspack-theme-color-bg-body);
			}
		}
	}
}

// Styles for when menu items appear in the site-header.
.site-header .nav3 {
	@include utilities.media( tablet ) {
		text-align: right;
	}

	li {
		display: inline-block;
		font-size: var(--newspack-theme-font-size-xs);

		@include utilities.media( tablet ) {
			&:nth-child(n + 2) {
				margin: 0 0 0 #{structure.$size__spacing-unit * 0.75};
			}
		}
	}

	a {
		margin: #{structure.$size__spacing-unit * 0.25} 0;
	}

	// Header Short Height
	.h-sh & {
		font-size: var(--newspack-theme-font-size-base);
		margin-left: structure.$size__spacing-unit;
	}
}
