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

.@{prefix}-VerticalTabs {
	display: flex;
	flex-direction: row;

	& > .@{prefix}-VerticalListMenu {
		flex: 1;
	}

	& > &-content {
		flex: 3;
		border-left: @border-lightBorder;
	}

	// make the tab highlight extend all the way to the top of the tab
	.@{prefix}-VerticalListMenu-Item:first-of-type
		> .@{prefix}-VerticalListMenu-Item-content {
		border-top: 0;
	}

	&-Tab-is-active {
		background-color: @color-primary-light;

		// Note: Tabs do not get a darker background color on hover
	}
}