/*! topdoc
  name: bc-tabs
  description: Viewing tabs.
  useage: Use when displaying multiple tabs on a single page/view.
  html:
   <div class="bc-tabs"><span></span></div>
  dependencies: [_components/bc-tabs]
 */

.bc-tabs {
	@include bc-box-sizing;
	width: 100%;
	height: 100%;
	padding: 89px 0 0;

	.tabs {
		width: 100%;
		height: 48px;
		margin: -49px 0 0;
		border-bottom: 1px solid $bc-color-5;

		& > span {
			@include bc-transition(all .5s ease-in-out);
			@include bc-box-sizing;
			position: relative;
			padding: 15px 16px;
			float: left;
			border-bottom: 2px solid transparent;
			color: $bc-color-2;
			font: 16px/1 $ft-norm;
			text-overflow: ellipsis;
			white-space: nowrap;
			cursor: pointer;
			overflow: hidden;

			&.active {
				border-bottom-color: $bc-color-1;
			}

			.bc-tabs-badge {
				position: absolute;
				top: 10px;
				right: 4px;
				width: 10px;
				height: 10px;
				padding: 0;
				border-radius: 5px;
				background-color: $bc-color-11;
				color: $bc-color-7;
				font: 9px/13px $ft-norm;

				&.bc-tabs-badge-red {
					background-color: $bc-color-9;
				}

				&.bc-tabs-badge-blue {
					background-color: $bc-color-14;
				}

				&.bc-tabs-badge-green {
					background-color: $bc-color-1;
				}
			}
		}
	}

	.accordian-tab {
		width: 45%;
		height: 48px;
		background: $bc-color-7;
		text-align: left;
		overflow: hidden;
	}

	.open-content {
		display: none;
	}

	.tab-content {
		@include bc-box-sizing;
		width: 100%;
		height: 100%;
		padding: 30px 0 0;

		.bc-tab {
			display: none;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;

			& > .accordian-tab {
				@include bc-box-sizing;
				display: none;
				width: 100%;
				height: 42px;
				padding: 5px 0 0 44px;
				border-top: 1px solid ;
				color: $bc-color-17;
				font: 16px/35px $ft-norm;
				cursor: pointer;
			}

			& > .open-content {
				display: none;
				width: 20px;
				height: 20px;
				margin: -30px 8px 0;
				float: left;
				border-radius: 20px;
				background-color: $bc-color-11;
				color: $bc-color-7;
				font: 21px/21px $ft-norm;
				text-align: center;
				cursor: pointer;
			}

			& > .content {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}


			&.active {
				display: inline-block;
			}
		}
	}

	&.accordian {
		padding: 0;

		.tabs {
			display: none;
		}

		.tab-content {
			padding: 24px 0 0;

			.bc-tab {
				display: inline-block;
				height: 42px;

				& > .accordian-tab {
					display: block;
				}

				& > .content {
					display: none;
				}

				& > .open-content {
					display: block;
				}

				&:last-of-type {

					& > .accordian-tab {
						border-bottom: 1px solid $bc-color-5;
					}
				}

				&.open {
					height: auto;

					& > .accordian-tab {
						margin-right: 10px;
						background-color: $bc-color-8;
						color: $bc-color-7;
					}

					& > .open-content {
						display: block;
						background-color: $bc-color-7;
						color: $bc-color-8;
						font: 21px/19px $ft-norm;
					}

					& > .content {
						@include bc-box-sizing;
						display: block;
						padding: 30px 0;
					}
				}
			}
		}
	}
}

@media screen and (max-width: $mobile-width) {

	.bc-tabs {
		padding: 0;

		.tabs {
			display: none;
		}

		.tab-content {
			padding: 24px 0 0;

			.bc-tab {
				display: inline-block;
				height: 42px;

				& > .accordian-tab {
					display: block;
				}

				& > .content {
					display: none;
				}

				& > .open-content {
					display: block;
				}

				&:last-of-type {

					& > .accordian-tab {
						border-bottom: 1px solid $bc-color-5;
					}
				}

				&.open {
					height: auto;

					& > .accordian-tab {
						margin-right: 10px;
						background-color: $bc-color-8;
						color: $bc-color-7;
					}

					& > .open-content {
						display: block;
						background-color: $bc-color-7;
						color: $bc-color-8;
						font: 21px/19px $ft-norm;
					}

					& > .content {
						@include bc-box-sizing;
						display: block;
						padding: 30px 0;
					}
				}
			}
		}
	}
}