@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@VerticalListMenu-levels: 8;

@VerticalListMenu-size-itemHeight: 29px;
@VerticalListMenu-size-childSpacer: 6px;
@VerticalListMenu-size-childPadding: 15px;

// Recursive mixin to facilitate nesting to a pre-determined depth
.VerticalListMenu-nest(@i: 0) when (@i < @VerticalListMenu-levels) {
	.lucid-VerticalListMenu {
		.lucid-VerticalListMenu-Item-content {
			padding-left: @VerticalListMenu-size-childPadding + (12 * @i);
		}

		.VerticalListMenu-nest(@i + 1);
	}
}

.lucid-VerticalListMenu {
	.VerticalListMenu-nest();

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;

	&-Item {
		&-expander {
			align-self: flex-start;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			width: @size-expander-button;
			height: @size-expander-button;
			margin: 4px;
		}

		&-content {
			.is-selectable();
			.left-marker(0);

			min-height: @VerticalListMenu-size-itemHeight;
			display: flex;
			font-size: 12px;
			align-items: center;
			font-weight: bold;
			border-width: 1px 0 0;
			border-color: @color-gray;
			border-style: solid;
			color: @color-primary;
			padding-left: 15px;

			&-text {
				width: 100%;
				padding: @VerticalListMenu-size-childSpacer 0;
			}

			// Selected and hover state are the same for items
			&&-is-selected,
			&&-is-selected:hover {
				.left-marker(1);

				color: @color-darkGray;
			}

			// Only show the left marker if the item is actionable
			&&-is-actionable:hover,
			&&-is-actionable:focus {
				.left-marker(1);
			}

			&:hover,
			&:focus {
				color: @color-darkGray;

				// Style the expander button when the user hovers on the item content
				.lucid-VerticalListMenu-Item-expander {
					.gradient-animation(@featured-color-default-gradientStartColor, @featured-color-default-gradientEndColor);
					.box-sizing();

					border: solid 1px @featured-color-default-borderColor;
					border-radius: @size-borderRadius;
					outline: none;

					.lucid-ChevronIcon {
						fill: @color-darkGray;
					}
				}
			}
		}

		// The first VerticalListMenu-Item shouldn't have a top border
		&:first-of-type > &-content {
			border-top-color: @color-transparent;
		}

		// Any time we have a VerticalListMenu below a VerticalListMenu-Item
		.lucid-VerticalListMenu {
			.lucid-VerticalListMenu-Item-content {
				font-weight: normal;
				border-color: @color-transparent;

				&::before {
					align-self: flex-start;
					flex-shrink: 0;
					content: '\2013'; // en dash
					display: inline-block;
					width: @VerticalListMenu-size-childSpacer;
					color: @color-gray;
					margin: @VerticalListMenu-size-childSpacer;
					margin-left: 0;
				}

				&:hover,
				&-is-selected {
					&::before {
						color: @color-darkGray;
					}
				}
			}
		}
	}
}