/* Navigation */

.navigation {
	position: fixed;
	z-index: 50;

	left: 0;
	bottom: 0;

	width: 100%;
	height: var(--nav-height);

	box-sizing: border-box;

	background: var(--nav);
	color: var(--nav-text);

	box-shadow: var(--nav-shadow);

	overflow: visible;
}

.navigation-track {
	position: absolute;
	inset: 0;

	touch-action: none;
	user-select: none;

	cursor: grab;

	overflow: visible;
}

.navigation-track:active {
	cursor: grabbing;
}

.navigation-content {
	position: absolute;
	left: 0;
	top: 50%;

	display: flex;
	align-items: center;

	will-change: transform;
}

.navigation-center-indicators {
	position: absolute;
	inset: 0;
	z-index: 10;

	pointer-events: none;

	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 9.75rem;
	left: 50%;
	transform: translate(calc(-50% - 0.5px));

	color: var(--nav-text-muted);

	transition: color 0.2s ease;
}

.navigation-center-indicators[data-page-visible] {
	color: var(--nav-text);
}

.navigation-center-indicator {
	width: 3.2rem;
	height: 3.2rem;

	flex: 0 0 auto;

	color: inherit;
	fill: currentColor;

	overflow: visible;
	margin-bottom: 1.5rem;
}

.navigation-spacer {
	flex: 0 0 auto;
	height: 1px;
}

.navigation-center-indicators svg {
	display: block;
}

.navigation-page {
	position: relative;
	flex: 0 0 auto;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	gap: 0.2rem;

	min-width: 4rem;

	padding-inline: 1.25rem;

	border: 0;
	outline: 0;

	background: transparent;
	color: var(--nav-text-muted);

	font: inherit;
	font-size: 0.9rem;
	line-height: 1;

	cursor: pointer;

	--navigation-page-scale: 1;
	--navigation-page-base-padding: 1.25rem;
	--navigation-page-selected-extra-padding: 2.5rem;
	--navigation-page-extra-padding: 0rem;

	padding-left: calc(
		var(--navigation-page-base-padding) +
		var(--navigation-page-extra-padding)
	);

	padding-right: calc(
		var(--navigation-page-base-padding) +
		var(--navigation-page-extra-padding)
	);

	transform: scale(var(--navigation-page-scale));

	transition:
		color 0.2s ease,
		transform 0.2s ease,
		padding-left 0.2s ease,
		padding-right 0.2s ease;
}

.navigation-page::after {
	content: '';

	position: absolute;
	z-index: -1;

	left: 50%;
	top: 50%;

	width: calc(100% / var(--navigation-page-scale));
	height: calc(100% / var(--navigation-page-scale));

	transform:
		translate(
			-50%,
			calc(-50% + (4.8rem / var(--navigation-page-scale)))
		);

	background-color: transparent;
	filter: blur(1.25rem);

	transition:
		width 0.2s ease,
		height 0.2s ease,
		transform 0.2s ease,
		background-color 0.5s ease;

	pointer-events: none;
}

.navigation-page[data-selected]::after {
	transform:
		translate(
			-50%,
			calc(-50% + (4rem / var(--navigation-page-scale)))
		);
}

.navigation-page[data-offline]::after {
	background-color: #FF0000;
}
.navigation-page[data-online]::after {
	background-color: #00FF00;
}
/* A page-specific load failure always wins visually, even if the
   service it belongs to is otherwise online. */
.navigation-page[data-error]::after {
	background-color: #FF0000;
}
.navigation-page[data-protected]::after {
	background-color: #00FFFF;
}
.navigation-page[data-denied]::after {
	background-color: #0000FF;
}

.navigation-page[data-selected] {
	--navigation-page-extra-padding:
		var(--navigation-page-selected-extra-padding);

	--navigation-page-scale: 1.3 !important;
}

/* While loading, the selected page remains muted. */
.navigation-page[data-selected]:not([data-loaded]) {
	animation: navigation-page-breathe 1s ease-in-out infinite;
}

.navigation-page[data-loaded] {
	color: var(--nav-text);
	animation: none;
}

@keyframes navigation-page-breathe {
	0%, 100% {
		color: var(--nav-text-muted);
	}

	50% {
		color: var(--nav-text);
	}
}

.navigation-page:hover {
	--navigation-page-scale: 1.1;
}

.navigation-page[data-selected]:hover {
	--navigation-page-scale: 1.2;
}

.navigation-page:focus-visible {
	outline: 1px solid var(--nav-text);
	outline-offset: 2px;
}

.navigation-page-icon {
	height: 2.5rem;

	flex: 0 0 auto;

	display: block;

	color: inherit;
}

.navigation-page-label {
	font-size: 1rem;
	line-height: 1;

	white-space: nowrap;

	color: var(--nav-text-muted);
}

.navigation-page[data-selected]:not([data-loaded]) .navigation-page-label {
	animation: navigation-page-breathe 1s ease-in-out infinite;
}

.navigation-page[data-loaded] .navigation-page-label {
	color: var(--nav-text);
	animation: none;
}

.navigation-page-message {
	position: absolute;
	left: 50%;
	bottom: 100%;
	margin-bottom: 0.5rem;
	transform: translate(-50%, 0.25rem);

	white-space: nowrap;
	font-size: 0.75rem;
	line-height: 1;

	padding: 0.4rem 0.6rem;
	color: #FFFFFF;
	background: var(--nav-message-background, #0000FF);

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	clip-path: var(--corner-path-small);
}

.navigation-page[data-message] .navigation-page-message {
	opacity: 1;
	transform: translate(-50%, 0);
}

.navigation-page[data-message-variant="denied"] {
	--nav-message-background: #0000FF;
}

.navigation-page[data-message-variant="login-required"] {
	--nav-message-background: #009999;
}

.navigation-page[data-message-variant="error"] {
	--nav-message-background: #FF0000;
}