@import (reference) "global";

@lineHeight: 32px;
@boxShadowColor: rgba(0, 0, 0, .4);
@maxWidth: 100%;
@captionFontSize: 1em;
@iconFontSize: @captionFontSize;
@closeIconFontSize: 0.8em;

@invertedTabActive: rgba(255, 255, 255, .15);
@invertedTabHover: rgba(255, 255, 255, .01);
@invertedTabsBackgroundColor: rgba(255, 255, 255, .06);

@tabBarBackgroundColor: #ededed;
@tabButtonSpacingColor: #d9d9d9;
@hoveredBackgroundColor: #f7f7f7;
@tabBoxShadowColor: #15a4fa;
@base-flex: 0 1 auto;
@center-flex: 1 1 auto;

.ui.card-book, c-cardbook {
	overflow: hidden;
	display: block;
	> .item, > item {
		display: none;
		&.active {
			display: block;
		}
	}
}

tab {
	display: block;
}

.ui.c-tab {
	overflow: hidden;
	> nav {
		overflow: hidden;
		background: @tabBarBackgroundColor;
		> tabs {
			list-style: none;
			padding: 0;
			margin: 0;
			.transition-duration(0.3s);
			.transition-property(left top);
			> tab {
				background: @tabBarBackgroundColor;
				list-style-type: none;
				position: relative;
				padding: 0 0.8em;
				cursor: pointer;
				line-height: @lineHeight;
				float: left;
				font-size: @captionFontSize;
				.transition-duration(0.3s);
				.transition-property(background-color, border-color, color, box-shadow, transform);
				> * {
					float: left;
				}
				> .caption {
					i {
						margin-right: 0.4em;
						opacity: 0.7;
					}
				}
				&.active {
					background-color: #fff;
				}
				.close-btn {
					opacity: 0.3;
					> i {
						margin: 0;
					}
					margin-left: 0.4em;
					&:hover {
						opacity: 0.6;
						color: @negativeColor;
					}
				}
				&:hover {
					background-color: @hoveredBackgroundColor;
				}
			}
		}
	}
	> contents {
		padding: 0;
		margin: 0;
		list-style: none;
		> content {
			display: none;
			margin: 0;
		}
		> content.active {
			display: block;
			p {
				white-space: initial;
			}
		}
	}
	&.top-tab, &.bottom-tab, &.left-tab, &.right-tab {
		position: relative;
		> nav {
			position: relative;
			> .pre-button, > .next-button {
				background-color: @tabBarBackgroundColor;
				position: absolute;
				font-family: Icons;
				font-style: normal;
				font-weight: 400;
				text-decoration: inherit;
				text-align: center;
				cursor: pointer;
				display: none;
				&.visible {
					display: inline-block;
				}
				&.disabled {
					color: #b4b4b4;
				}
				z-index: 1;
				&:hover {
					background-color: @tabButtonSpacingColor;
				}
			}
		}
	}
	&.top-tab {
		> nav > tabs > tab {
			&.active, &:hover {
				box-shadow: inset 0 2px 0 @tabBoxShadowColor;
			}
		}
	}
	&.bottom-tab {
		> nav > tabs > tab {
			&.active, &:hover {
				box-shadow: inset 0 -2px 0 @tabBoxShadowColor;
			}
		}
	}

	&.left-tab {
		> nav > tabs > tab {
			&.active, &:hover {
				box-shadow: inset 2px 0 0 @tabBoxShadowColor;
			}
		}
	}
	&.right-tab {
		> nav > tabs > tab {
			&.active, &:hover {
				box-shadow: inset -2px 0 0 @tabBoxShadowColor;
			}
		}
	}

	&.top-tab, &.bottom-tab {
		position: relative;
		.box-orient(vertical);
		-ms-flex-direction: column;
		flex-direction: column;
		> nav {
			height: @lineHeight;
			> .pre-button, > .next-button {
				width: 2em;

				height: @lineHeight;

				line-height: @lineHeight;
				top: 0;
			}
			> .pre-button {
				left: 0;
				&:before {
					content: "\f104";
				}
			}
			> .next-button {
				right: 0;
				&:before {
					content: "\f105";
				}
			}
			> tabs {
				width: 4800px;
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				> tab {
					border-right: 1px solid @tabButtonSpacingColor;
				}
			}
		}

	}
	&.left-tab, &.right-tab, &.bottom-tab, &.top-tab {
		.display(box);
		display: -ms-flexbox;
		display: flex;
		> nav {
			position: relative;
			.box-flex(0);
			-ms-flex: @base-flex;
			flex: @base-flex;
		}
		> contents {
			.box-flex(1);
			-ms-flex: @center-flex;
			flex: @center-flex;
			position: relative;
			> content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
			}
		}
	}
	&.left-tab, &.right-tab {
		.box-orient(horizontal);
		-ms-flex-direction: row;
		flex-direction: row;
		> nav {
			display: block;
			> .pre-button, > .next-button {
				height: 1.5em;
				line-height: 1.5em;;
				width: 100%;
				left: 0;
			}
			> .pre-button {
				top: 0;
				&:before {
					content: "\f106";
				}
			}
			> .next-button {
				bottom: 0;
				&:before {
					content: "\f107";
				}
			}
			tabs {
				position: absolute;
				height: 5000px;
				top: 0px;
			}
			> tabs {
				> tab {
					padding-right: 2em;
					position: relative;
					float: none;
					> * {
						float: none;
						display: inline-block;
					}
					.close-btn {
						position: absolute;
						right: 0.5em;
						top: 0;
					}
					border-bottom: 1px solid @tabButtonSpacingColor;
				}
			}
		}
		> contents {
			width: auto;
			display: block;
		}
		&.vertical {
			> nav {
				> tabs {
					height: 100%;
					> tab {
						line-height: 1.2em;
						min-width: 1.5em;
						padding-top: 0.4em;
						padding-bottom: 0.4em;
						white-space: normal;
						> .caption {
							> * {
								margin-bottom: 0.4em;
							}
						}
						.close-btn {
							position: inherit;
						}
					}
				}
			}
		}
		&:not(.vertical) {
			white-space: nowrap;
			> nav {
				//min-width: 8em;
			}
		}
	}
	&.right-tab, &.bottom-tab {
		> nav {
			//.box-ordinal-group(2);
			-webkit-order: 2;
			-ms-flex-order: 2;
			order: 2;
		}
		> contents {
			//.box-ordinal-group(1);
			-webkit-order: 1;
			-ms-flex-order: 1;
			order: 1;
		}
	}

	&.bottom-tab {
		.box-orient(vertical);
	}
}
