@import '../../../styles/_partials/index';

.VerticalNav {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	flex-direction: column;
	width: 68px;
	height: 100%;
	padding: 0;
	z-index: 9;
	@include theme-background-green-else-graydark;

	@at-root :global(.__OsDarwin) .VerticalNav {
		padding-top: 30px;
	}

	.VerticalNavItem_DragRegion {
		-webkit-app-region: default;
		flex-grow: 1;
		width: 100%;

		@at-root :global(.__OsDarwin) & {
			-webkit-app-region: drag;
		}
	}

	.VerticalNav_Add {
		width: 48px;
		height: 48px !important;
		margin: 13px 0 10px 0;
		padding: 11.5px 0 !important;
		background: $white;
		border-radius: 100%;
		transition: background-color .1s ease 0s;

		svg {
			width: 25px;
			height: 25px;
			transition: fill .1s ease 0s;

			path {
				@include theme-fill-greendark-else-graydark;
			}
		}

		&:hover:not(:global(.__Active)) {
			@include theme-background-greendark50-else-green;

			svg {
				transform: scale(1.08); // Add icon needs a little more zoom to be noticeable.

				path {
					@include theme-fill-white-else-graydark;
				}
			}
		}
	}

	.FlyTooltip.FlyTooltip__AddSite {
		margin-top: -23px;
	}

	.VerticalNav_NonNavLinkItemOuter {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.VerticalNav_NonNavLinkItem,
	a {
		display: flex;
		align-items: center;
		border-radius: 4px;
		justify-content: center;
		height: 48px;
		width: 48px;
		margin: 7px 10px;
		text-align: center;

		svg path {
			transition: fill .1s ease 0s;
		}

		&:global(.__Active) {
			@include theme-background-greendark50-else-graydarker;

			svg path {
				@include theme-fill-white-else-green75;
			}
		}

		&:hover:not(:global(.__Active)) {
			@include if-theme-light() {
				background: #4bac72;
			}
			@include if-theme-dark() {
				background: #383839;
			}

			svg {
				transform: scale(1.05);
			}
		}
	}

	svg {
		width: 32px;

		path {
			@include theme-fill-greendark-else-gray75;
		}
	}

	.VerticalNavItem {
		text-align: center;

		@at-root :global(.VerticalNavItem_Addons) {
			svg {
				width: 31px;
			}
		}
	}

	.VerticalNavButton,
	.VerticalNavButton * {
		cursor: pointer; /* Override 'cursor: default' in base.scss. */
	}

	.VerticalNavButton {
		display: flex;
		align-items: center;
		border-radius: 4px;
		justify-content: center;
		background: none;
		border: none;
		width: 48px;
		height: 48px;
		margin: 7px 10px;

		svg {
			width: 22px;
		}

		&:hover:not(:active):not([aria-expanded="true"]) {
			@include if-theme-light() {
				background: #4bac72;
			}
			@include if-theme-dark() {
				background: #383839;
			}

			svg {
				transform: scale(1.05);
			}
		}

		&:active,
		&[aria-expanded="true"] {
			@include theme-background-greendark50-else-graydarker;

			svg path {
				@include theme-fill-white-else-green75;
			}
		}
	}
}