@import 'includes/mixins';
@import 'includes/animations';

.be-tabs {
	.be-tabs-labels {
		list-style-type: none;
		list-style-position: inside;
		padding: 0;
		margin: 0;
		li {
			border: 1px solid #eee;
			padding: 10px;
			margin-top: -1px;
			&:first-child {
				margin-top: 0;
			}
		}
		a, a:link {
			display: block;
		}
		.label-icon {
			margin-right: 10px;
		}
	}
	&.vertical {
		@include flexbox( 'row' );
	}
	&.horizontal {
		.be-tabs-labels {
			list-style-type: none;
			list-style-position: inside;
			padding: 0;
			margin: 0;
			@include flexbox( 'row' );
			li {
				padding: 0;
				margin: 0;
				border: 0;
			}
			.be-tabs-label {
				position: relative;
				list-style-type: none;
				list-style-position: inside;
				padding: .404em .809em;
				border-top: 1px solid transparent;
				border-left: 1px solid transparent;
				border-right: 1px solid transparent;
				transition: none;
				display: block;
				.label-content {
					position: relative;
					display: block;
				}
				.label-icon {
					text-align: center;
					margin-right: .404em;
				}
				&.be-tab-active {
					top: 1px;
					border-color: #eee;
					background: #fff;
					.label-content {
						top: -1px;
					}
				}
			}
		}
		.be-tabs-panels {
			border: 1px solid #eee;
			padding: 1.618rem;
			.be-tabs-panel {
				display: none;
				&.be-tab-active {
					display: block;
				}
			}
		}
	}
}