/* Variables */
:root {
	--fuse-vertical-navigation-compact-width: 112px;
}

fuse-vertical-navigation {
	/* Compact appearance overrides */
	&.fuse-vertical-navigation-appearance-compact {
		width: var(--fuse-vertical-navigation-compact-width);
		min-width: var(--fuse-vertical-navigation-compact-width);
		max-width: var(--fuse-vertical-navigation-compact-width);

		/* Left positioned */
		&.fuse-vertical-navigation-position-left {
			/* Side mode */
			&.fuse-vertical-navigation-mode-side {
				margin-left: calc(var(--fuse-vertical-navigation-compact-width) * -1);
			}

			/* Opened */
			&.fuse-vertical-navigation-opened {
				margin-left: 0;
			}
		}

		/* Right positioned */
		&.fuse-vertical-navigation-position-right {
			/* Side mode */
			&.fuse-vertical-navigation-mode-side {
				margin-right: calc(var(--fuse-vertical-navigation-compact-width) * -1);
			}

			/* Opened */
			&.fuse-vertical-navigation-opened {
				margin-right: 0;
			}

			/* Aside wrapper */
			.fuse-vertical-navigation-aside-wrapper {
				left: auto;
				right: var(--fuse-vertical-navigation-compact-width);
			}
		}

		/* Wrapper */
		.fuse-vertical-navigation-wrapper {
			background-color: white;

			/* Content */
			.fuse-vertical-navigation-content {
				> fuse-vertical-navigation-aside-item,
				> fuse-vertical-navigation-basic-item {
					.fuse-vertical-navigation-item-wrapper {
						margin: 4px 8px 0 8px;

						.fuse-vertical-navigation-item {
							flex-direction: column;
							justify-content: center;
							padding: 12px;
							border-radius: 6px;

							.fuse-vertical-navigation-item-icon {
								margin-right: 0;
							}

							.fuse-vertical-navigation-item-title-wrapper {
								margin-top: 8px;

								.fuse-vertical-navigation-item-title {
									font-size: 12px;
									font-weight: 500;
									text-align: center;
									line-height: 16px;
								}

								.fuse-vertical-navigation-item-subtitle {
									display: none !important;
								}
							}

							.fuse-vertical-navigation-item-badge {
								position: absolute;
								top: 12px;
								left: 64px;
							}
						}
					}

					> fuse-vertical-navigation-collapsable-item {
						display: none;
					}

					> fuse-vertical-navigation-group-item {
						> .fuse-vertical-navigation-item-wrapper {
							display: none;
						}
					}
				}
			}
		}

		/* Aside wrapper */
		.fuse-vertical-navigation-aside-wrapper {
			left: var(--fuse-vertical-navigation-compact-width);
		}
	}
}