/* Page Layout - Menu - App Menu Link */
////
/// @group Layout-Menu-App_Menu_Link
/// Page Layout - Menu - App Menu Link

///
.app-menu-links {
	flex: 1;
	height: 100%;

	// Service Studio Preview
	& {
		-servicestudio-align-items: center;
		-servicestudio-display: flex;
		-servicestudio-column-gap: var(--space-m);
	}

	// Service Studio Preview
	&:empty {
		-servicestudio-position: relative;

		// Service Studio Preview
		&:after {
			-servicestudio-color: get-text-color('neutral-7');
			-servicestudio-content: 'Drag screens to this container to create menu entries';
			-servicestudio-font-size: var(--font-size-xs);
			-servicestudio-left: 50%;
			-servicestudio-position: absolute;
			-servicestudio-text-align: center;
			-servicestudio-top: 50%;
			-servicestudio-transform: translateX(-50%) translateY(-50%);
		}
	}

	a {
		color: get-text-color('neutral-9');

		// Service Studio Preview
		& {
			-servicestudio-color: get-text-color('neutral-9');
		}

		&:hover,
		&.active {
			color: get-text-color('primary');
			text-decoration: none;
		}
	}
}

///
body {
	.app-menu-content {
		.app-menu-links {
			// Service Studio Preview
			& {
				-servicestudio-align-items: flex-start;
				-servicestudio-padding: var(--space-none);
				-servicestudio-width: 100% !important;
			}
		}
	}
}

///
.layout {
	.app-menu-links:empty:after {
		// Service Studio Preview
		& {
			-servicestudio-content: '';
		}
	}
}

///
.layout:not(.layout-side) {
	.app-menu-links {
		a {
			align-items: center;
			border-bottom: var(--border-size-m) solid get-border-color('transparent');
			border-top: var(--border-size-m) solid get-border-color('transparent');
			display: inline-flex;

			&.active {
				border-bottom: var(--border-size-m) solid get-border-color('primary');
			}
		}
	}
}

///
.layout-side,
.menu-visible {
	.app-menu-links {
		a {
			border-bottom: 0;
			border-left: var(--border-size-m) solid get-border-color('transparent');
			border-top: 0;
			margin-left: 0;
			padding: var(--space-s) var(--space-m);
		}
	}
}

///
.layout-side {
	.app-menu-links {
		// Service Studio Preview
		& {
			-servicestudio-align-items: flex-start;
		}

		& {
			display: flex;
			flex-direction: column;

			-webkit-overflow-scrolling: touch;
			overflow-y: auto;
			padding-top: var(--space-s);
		}

		a.active {
			border-left: var(--border-size-m) solid get-border-color('primary');
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.landscape {
	.layout-native {
		.app-menu-links {
			padding-left: calc(var(--os-safe-area-left) / 2);
		}
	}
}

///
.desktop {
	.layout:not(.layout-side) .app-menu-links {
		display: flex;
		flex-wrap: wrap;
	}
}

///
.phone,
.tablet {
	.app-menu-links {
		display: flex;
		flex-direction: column;
		-webkit-overflow-scrolling: touch;
		overflow-y: auto;
		padding-top: var(--space-s);

		a {
			// Service Studio preview
			& {
				-servicestudio-margin-left: var(--space-none);
				-servicestudio-padding: var(--space-s) var(--space-m);
				-servicestudio-width: 100%;
			}
		}
	}

	.layout:not(.layout-side) .app-menu-links a.active {
		border-bottom: 0;
	}
}

// Accessibility -----------------------------------------------------------------
.has-accessible-features {
	.header a.active:focus {
		color: get-text-color('primary');
	}

	.app-menu-links a:focus {
		background-color: get-background-color('transparent');
		box-shadow: 0 0 0 3px get-background-color('focus-outer');
	}
}