// ==========================================================================
// jQuery UI Tab Styling
// ==========================================================================
.ui-tabs {
	padding: 0;

	// Horizontal
	.ui-tabs-panel {
		padding: 14px 20px;

		&.scroll-vertical {
			max-height: 600px;
			overflow-y: auto;
		}

		&.has-inner-tab {
			padding: 0;
			max-height: none;
			overflow-y: initial;
		}
	}

	.ui-tabs-nav {
		position: relative;
		height: auto;
		padding: 0;
		margin: 0;

		&::after {
			display: block;
			content: "";
			clear: both;
		}

		li {
			display: inline-block;
			text-align: center;
			line-height: 3em;
			height: 3em;
			padding: 0;
			margin: 0;
			float: left;
			opacity: 0.6;
			border-bottom: 4px solid $primary-color;
			will-change: opacity, border-color;
			@include material__smooth-tran( 400ms, all );
			outline: none;
			&.ui-tabs-active {
				opacity: 1;
				border-bottom-color: $primary-color-dark;
			}

			.ui-tabs-anchor {
				display: block;
				width: 100%;
				height: 100%;
				text-transform: uppercase;
				padding: 0 1em;
				/*text-overflow: ellipsis;*/
				/*overflow: hidden;*/
				text-shadow: 0 0 1px fade-out( $box-shadow-color, 0.5 );
				&:focus,
				&:active {
					outline: none;
				}

				.ipticm {
					vertical-align: middle;
					margin-right: 12px;
					display: inline-block;
				}

				.eform-tab-labels {
					display: inline-block;

					.ipt_uif_tab_subtitle {
						font-size: 0.5em;
					}
				}
			}
		}
	}

	// Vertical
	&.ui-tabs-vertical {
		position: relative;
		box-shadow: none;

		&::before {
			position: absolute;
			width: 1px;
			background-color: $divider-color;
			left: 20%;
			top: 0;
			bottom: 0;
			content: "";
			display: block;
		}

		.ui-tabs-nav {
			padding: 5px 0 0;
			float: left;
			width: 20%;
			position: relative;
			height: 100%;
			background-color: transparent;
			box-shadow: none;

			li {
				clear: left;
				margin: 0 0 5px 0;
				white-space: normal;
				padding: 0;
				background-color: transparent;
				border: 0 none;
				border-radius: 0;
				-webkit-box-shadow: 0 0 0 transparent;
				box-shadow: 0 0 0 transparent;
				position: relative;
				width: 100%;
				text-align: left;
				font-size: 13px;
				height: auto;
				a {
					text-shadow: none;
					color: $primary-text-color;
					line-height: 1.5em;
					display: inline-block;
					padding-top: 0.75em;
					padding-bottom: 0.75em;
					word-wrap: break-word;
					hyphens: auto;
					&:hover {
						color: $secondary-text-color;
					}
					&:active,
					&:visited {
						color: $primary-text-color;
					}
				}
				&.ui-tabs-active {
					a {
						color: $primary-color;
					}
				}
			}
		}

		.ui-tabs-panel {
			padding-left: 28px;
			float: right;
			width: 80%;
			border: 0 none;
			border-radius: 0;
			background-color: transparent;
			box-shadow: none;
		}
	}
}