.wpv-tabs {
	border: 0;

	> .ui-tabs-nav {
		@tabs-bg: darken(@accent-color-5, 3%);
		@active-bg: @accent-color-5;
		@border: darken(@accent-color-8, 3%);
		margin: 0;
		padding: 0;
		border: 0;
		border-bottom: 1px solid @accent-color-7;
		background: @tabs-bg;
		list-style: none;
		-webkit-transform: none;
		border-radius: 0;

		li {
			position: relative;
			z-index: 2;
			display: block;
			float: left;
			margin: 0 0 -1px 0;
			padding: 1px 1px 0;
			background: none;
			white-space: nowrap;
			top: 0;
			border: 0;
			border-radius: 0;

			a {
				position: relative;
				display : block;
				padding : 25px 15px;
				outline : none;
				line-height: 1;
				cursor  : pointer;
				font-size: @primary-font-size + 2;

				.title-text {
					vertical-align: middle;
				}
			}

			&:first-child {
				margin-left: 10px;
			}

			&.ui-state-default {
				a {
					color: @css_link_color;
				}
			}

			&.ui-state-hover,
			&.ui-state-active,
			&.ui-state-selected {
				padding: 0;
				border: 1px solid @border;
				border-bottom: 0;
				background: @active-bg;
				text-decoration: none ! important;
				color: @primary-font-color;

				a {
					color: inherit;
					text-decoration: none;
				}
			}
		}
	}

	.pane {
		clear: both;
		padding: 10px 30px 20px 30px;
		-webkit-transform: none;
	}

	&, &:after, .ui-tabs-nav:after {
		display: block;
		clear: both;
		content: "";
	}

	&.vertical {
		position: relative;
		margin: 0 -@horizontal-padding-large;
		padding: 0;

		&:before {
			position: absolute;
			right: -199%;
			z-index: 5;
			width: 200%;
			height: 100%;
			content: "";
		}

		.ui-tabs-nav {
			.border-box();
			float: left;
			margin-top: 0;
			width: 20%;
			border: none;

			body.layout-full &,
			body.layout-right-only & {
				padding-left: @horizontal-padding-large;
			}

			body.layout-left-right &,
			body.layout-left-only & {
				padding-left: @horizontal-padding/2;
			}

			&:before {
				.border-box();
				position: absolute;
				left: -200%;
				z-index: 2;
				width: 200%;
				height: 100%;
				content: "";
			}

			li {
				.transition(background .5s);
				float: none;
				margin: 0;
				padding: 0;
				border: 0;
				border-bottom: 0px solid;
				white-space: normal;
				opacity: 1;

				a {
					.wpv-font(h5-);
					display: table;
					padding: 11px 0;
					min-height: 44px;
					width: 100%;
					font-size: @primary-font-size + 2;

					.icon.shortcode {
						display: table-cell;
						padding-right: 20px;
						vertical-align: middle;
						font-size: 44px;
						line-height: 49px;
					}

					.title-text {
						display: table-cell;
						width: 100%;
						font-weight: normal;
						line-height: 1.1;

						&:first-child {
							padding-left: 1em;
						}
					}
				}

				&:first-child {
					margin-left: 0;
				}

				&:last-child {
					margin-bottom: @content-padding-large;
				}

				&.ui-state-active,
				&.ui-state-selected,
				&.ui-state-hover {
					border-right: 0;
					border-left: 0;
					text-decoration: none;
					opacity: 1;

					a {
						border: none;
					}
				}

				&.inactive-block-title {
					padding: @content-padding-large*0.75 0;
					border: none;
					opacity: 1;

					> h1, > h2, > h3, > h4, > h5, > h6 {
						.wpv-font(h1-);
						word-wrap: break-word;
					}
				}
			}
		}

		.pane {
			.border-box();
			float: right;
			clear: none;
			padding: 0 @content-padding-large;
			width: 80%;
			background: transparent;

			&:before {
				.border-box();
				position: absolute;
				top: 30px;
				left: 0;
				z-index: 1;
				margin-top: -@content-padding;
				width: 20%;
				height: 100%;
				content: "";
			}
		}
	}
}

body {
	&.boxed {
		.wpv-tabs.vertical {
			&, .ui-tabs-nav {
				&:before {
					display: none;
				}
			}
		}
	}

	&.full {
		&.layout-left-right,
		&.layout-left-only {
			.wpv-tabs.vertical .ui-tabs-nav:before {
				display: none;
			}
		}

		&.layout-left-right,
		&.layout-right-only {
			.wpv-tabs.vertical {
				&:before {
					display: none;
				}
			}
		}
	}
}