/*
------------------------------------------------
Navigation
------------------------------------------------
*/

.tl-app-navigation {
	width: 100%;

	padding: 12px var(--tl-page-padding) 0;

	box-sizing: border-box;

	background: transparent;
}


/*
------------------------------------------------
Navigation Inner
------------------------------------------------
*/

.tl-app-navigation-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	width: 100%;
	max-width: var(--tl-content-width);

	margin-inline: auto;

	overflow: hidden;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border);
	border-radius: var(--tl-radius);
}


/*
------------------------------------------------
Navigation Links
------------------------------------------------
*/

.tl-app-navigation-link {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 46px;
	padding: 8px 10px;

	box-sizing: border-box;

	color: var(--tl-color-text);
	text-decoration: none;

	font-size: .875em;
	font-weight: 600;
	line-height: 1.2;

	border-right: 1px solid var(--tl-color-border);
}


.tl-app-navigation-link:last-child {
	border-right: 0;
}


a.tl-app-navigation-link,
a.tl-app-navigation-link:visited {
	color: var(--tl-color-text);
}


a.tl-app-navigation-link:hover,
a.tl-app-navigation-link:focus {
	background: var(--tl-color-background);
	color: var(--tl-color-text);
}


/*
------------------------------------------------
Current Section
------------------------------------------------
*/

.tl-app-navigation-link.is-active,
a.tl-app-navigation-link.is-active:visited {
	background: var(--tl-color-primary);
	color: #fff;
}


/*
------------------------------------------------
Larger Screens
------------------------------------------------
*/

@media (min-width: 768px) {

	.tl-app-navigation {
		padding-top: 16px;
	}


	.tl-app-navigation-link {
		min-height: 48px;

		font-size: .9375em;
	}

}