.navigation {
	background-color: var(--jp-white);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
	border-radius: var(--jp-border-radius);
	margin: 0;
}

.navigation-item {
	display: flex;
	padding: calc(var(--spacing-base) * 2); // 16px;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	text-align: left;

	// Clickable State
	&.clickable {
		cursor: pointer;
		outline-color: var(--jp-black);

		// Focus/Hover State
		&:hover:not(.selected),
		&:focus:not(.selected) {
			background-color: var(--jp-gray-0);
		}
	}

	// Selected State
	&.selected {
		background-color: var(--jp-black);

		.navigation-item-label {
			color: var(--jp-white);
		}

		.navigation-item-icon {
			fill: var(--jp-white);
		}

		.navigation-item-badge {
			border: 1px solid var(--jp-red);
			background-color: var(--jp-red);
			color: var(--jp-white);
		}
	}

	// CHILDRENS

	// .navigation-item-label
	&-label {
		display: flex;
		align-items: center;
		padding-right: var(--spacing-base); // 8px
		overflow-x: hidden;
	}

	// .navigation-item-label-content
	&-label-text {
		display: block;
		overflow-x: hidden;
		text-overflow: ellipsis;
	}

	// .navigation-item-icon
	&-icon {
		margin-right: calc(var(--spacing-base) * 2); // 16px
	}

	// .navigation-item-badge
	&-badge {
		border: 1px solid var(--jp-red-60);
		color: var(--jp-red-60);
		border-radius: 50%;
		padding: calc(var(--spacing-base) / 2) var(--spacing-base); // 4px | 8px
		min-width: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	&-check-badge {
		fill: var(--jp-green-50);
	}

	&-info-badge {
		fill: var(--jp-gray-20);
	}
}

.navigation-group {
	--icon-size: 28px;
	--item-spacing: calc(var(--spacing-base) * 2); // 16px
	--left-spacing: calc(var(--icon-size) + var(--item-spacing)); // 28px + 16px

	list-style: none;

	&-label {
		padding: calc(var(--spacing-base) * 2); // 16px
	}

	&-content {
		padding: 0;
	}

	&-list {
		margin-left: var(--left-spacing);
	}

	&-truncate {
		padding: calc(var(--spacing-base) * 2); // 16px
		display: flex;
		justify-content: flex-start;
	}
}

.popover-text {
	width: 250px;
	padding: calc(var(--spacing-base) * 2); // 16px
}

.navigation-dropdown {

	&-button {
		display: flex;
		border: 1px solid var(--jp-gray-10);
		border-radius: var(--jp-border-radius);
		padding: calc(var(--spacing-base) * 2); // 16px
		background-color: var(--jp-white);
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	&-label {
		display: flex;
		justify-content: flex-start;
	}

	&-icon {
		margin-right: var(--spacing-base); // 8px
	}
}
