
// Tab element
.tabs {
	list-style: none;
	margin: 0 0 .5rem 0;
	padding: 0;
	.user-select();

	&:after {
		.clearfix();
	}

	> li {
		float: left;
		display: block;
		cursor: pointer;
		outline: none;
		padding: .5rem 1rem;
		margin: 0 0 -.5rem 0;
		border-bottom: 2px solid transparent;
		.transition(all, 250ms);

		&:hover {
			border-bottom-color: @tabsHoverColor;
		}
		&.active {
			border-bottom-color: @tabsActiveColor;
		}

		a {
			color: @tabsTextColor;
		}
	}
}

.tabpanels {
	list-style: none;
	margin-left: 0;
	border-top: 1px solid @colorDivider;
	padding-top: 1rem;

	> li {
		margin: 0 1rem;

		&:after {
			.clearfix();
		}
	}

	.tabhidepanel {
		display: none;
	}
}

@media (min-width: (@breakpoint-s)) {

	.tabwidget.vtabs {
		position: relative;

		> .tabs {
			position: absolute;
			width: 20%;
			height: 100%;

			li {
				float: none;
				margin-right: 0;
				width: 100%;
				border-right: 2px solid transparent;
				border-bottom: none;

				&:hover {
					border-right-color: @tabsHoverColor;
				}
				&.active {
					border-right-color: @tabsActiveColor;
				}
			}
		}

		> .tabpanels {
			position: relative;
			left: 20%;
			width: 80%;
			border-left: 1px solid @colorDivider;
			border-top: none;
			padding-top: 0;
		}
	}
}
