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

	&:after {
		&:extend(.clear);
	}

	> 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;
		}

		&.tabsMenu {
			position: relative;

			&:after {
				content: ' ';
				display: block;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: .5rem .5rem 0 .5rem;
				border-color: @colorPrimary transparent transparent transparent;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
			}

			ul {
				position: absolute;
				right: 0;
				padding: 0;
				min-width: 10rem;
				background-color: @white;
				list-style: none;
				margin-left: 0;
				z-index: 2;
				.z-depth3();

				li {
					white-space: nowrap;
					padding: .5rem 1rem;

					&:hover {
						background-color: @black-alpha-12;
					}
				}
			}
		}
	}
}

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

	> li {
		margin: 0 1rem;
		visibility: hidden;
		overflow: hidden;
		height: 0;

		&:after {
			&:extend(.clear);
		}
	}

	.tabshowpanel {
		visibility: visible;
		overflow: initial;
		height: auto;
	}
	.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;
		}
	}
}
