/* Variables */
:root {
	--fuse-vertical-navigation-width: 280px;
	--fuse-vertical-navigation-dense-width: 80px;
}

fuse-vertical-navigation {
	/* Dense appearance overrides */
	&.fuse-vertical-navigation-appearance-dense {
		&:not(.fuse-vertical-navigation-mode-over) {
			width: var(--fuse-vertical-navigation-dense-width);
			min-width: var(--fuse-vertical-navigation-dense-width);
			max-width: var(--fuse-vertical-navigation-dense-width);

			/* Left positioned */
			&.fuse-vertical-navigation-position-left {
				/* Side mode */
				&.fuse-vertical-navigation-mode-side {
					margin-left: calc(var(--fuse-vertical-navigation-dense-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-dense-width) * -1);
				}

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

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

				&.fuse-vertical-navigation-hover {
					.fuse-vertical-navigation-aside-wrapper {
						left: auto;
						right: var(--fuse-vertical-navigation-width);
					}
				}
			}
		}

		/* Wrapper */
		.fuse-vertical-navigation-wrapper {
			/* Content */
			.fuse-vertical-navigation-content {
				fuse-vertical-navigation-aside-item,
				fuse-vertical-navigation-basic-item,
				fuse-vertical-navigation-collapsable-item,
				fuse-vertical-navigation-group-item {
					.fuse-vertical-navigation-item-wrapper {
						.fuse-vertical-navigation-item {
							width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
							min-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);
							max-width: calc(var(--fuse-vertical-navigation-dense-width) - 24px);

							.fuse-vertical-navigation-item-arrow,
							.fuse-vertical-navigation-item-badge,
							.fuse-vertical-navigation-item-title-wrapper {
								transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
							}
						}
					}
				}

				fuse-vertical-navigation-group-item {
					&:first-of-type {
						margin-top: 0;
					}
				}
			}
		}

		&:not(.fuse-vertical-navigation-hover):not(.fuse-vertical-navigation-mode-over) {
			/* Wrapper */
			.fuse-vertical-navigation-wrapper {
				/* Content */
				.fuse-vertical-navigation-content {
					.fuse-vertical-navigation-item-wrapper {
						.fuse-vertical-navigation-item {
							padding: 10px 16px;

							.fuse-vertical-navigation-item-arrow,
							.fuse-vertical-navigation-item-badge,
							.fuse-vertical-navigation-item-title-wrapper {
								white-space: nowrap;
								opacity: 0;
							}
						}
					}

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

					fuse-vertical-navigation-group-item {
						> .fuse-vertical-navigation-item-wrapper {
							.fuse-vertical-navigation-item {
								&:before {
									content: '';
									position: absolute;
									top: 20px;
									width: 23px;
									border-top-width: 2px;
								}
							}
						}
					}
				}
			}
		}

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

		/* Hover */
		&.fuse-vertical-navigation-hover {
			.fuse-vertical-navigation-wrapper {
				width: var(--fuse-vertical-navigation-width);

				.fuse-vertical-navigation-content {
					.fuse-vertical-navigation-item-wrapper {
						.fuse-vertical-navigation-item {
							width: calc(var(--fuse-vertical-navigation-width) - 24px);
							min-width: calc(var(--fuse-vertical-navigation-width) - 24px);
							max-width: calc(var(--fuse-vertical-navigation-width) - 24px);

							.fuse-vertical-navigation-item-arrow,
							.fuse-vertical-navigation-item-badge,
							.fuse-vertical-navigation-item-title-wrapper {
								white-space: nowrap;
								animation: removeWhiteSpaceNoWrap 1ms linear 350ms;
								animation-fill-mode: forwards;
							}
						}
					}
				}
			}

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

@keyframes removeWhiteSpaceNoWrap {
	0% {
		white-space: nowrap;
	}
	99% {
		white-space: nowrap;
	}
	100% {
		white-space: normal;
	}
}