/**
 * ud2-tabs.less
 * 选项组控件的默认样式
 */

// 导入必要的文件
@import "../../../common/import.less";

// 选项卡默认尺寸
@TabsSize: @BaseSize * 3.6;
// 选项卡控件默认默认高度
@TabsDefaultHeight: 400px;

// 选项组控件主容器
.ud2-tabs {
	.layout();
	display: block;
	width: 100%;
	height: @TabsDefaultHeight;
}
// 设定容器的定位方式为相对定位
.ud2-tabs, .ud2-tabs-menu-list, .ud2-tabs-menu-item, .ud2-tabs-tab {
	position: relative;
}
// 设置容器的定位方式为绝对定位
.ud2-tabs-bar, .ud2-tabs-main, .ud2-tabs-menu, .ud2-tabs-menu-list, .ud2-tabs-menu-item i, .ud2-tabs-tab i, .ud2-tabs-mask {
	position: absolute;
}
// 遮罩层
.ud2-tabs-mask {
	display: none;
	z-index: 4;
}

// 选项集合容器
.ud2-tabs-bar {
	z-index: 2;
	overflow: hidden;
}
// 目录容器
.ud2-tabs-menu {
	z-index: 4;
	width: @TabsSize;
	height: @TabsSize;

	&.on {
		.ud2-tabs-menu-btn {
			background: @CtrlIcoColor;

			&::before {
				color: @ColorWhite;
			}
		}

		+ .ud2-tabs-menu-list {
			opacity: 1;
			visibility: visible;
			.transform(scale(1));
		}
	}
}
// 目录按钮
.ud2-tabs-menu-btn {
	width: 100%;
	height: 100%;
	background: @ColorWhiteDeepest;
	line-height: @TabsSize;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	.transition(background .3s);

	&:hover {
		color: @ColorBlue;
		background: @ColorBlueBackLight;
	}

	&::before {
		content: '\e105';
		display: inline-block;
		font-family: ud2;
		font-size: @BaseFontSize + @CtrlSizeGradient;
		.transition(transform .3s, color .3s);
	}
}
// 目录列表
.ud2-tabs-menu-list {
	width: 200px; 
	border: 2px solid @CtrlIcoColor;
	background: @ColorWhite;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	z-index: 100;
	.transition(transform .2s, opacity .2s, visibility .2s);
	.transform(scale(.95));
}
// 目录项
.ud2-tabs-menu-item {
	display: block;
	border-bottom: 1px solid @ColorWhiteBackLight;

	span, i {
		cursor: pointer;
		.transition(transform .2s, color .2s, font-weight .2s);
	}

	span {
		display: block;
		margin-right: 1.6em;
		.textOverflow();

		&:hover {
			color: @ColorTeal;
		}
	}

	i {
		top: .45em;
		right: 0;
		color: @ColorWhiteBackDark;

		&:hover {
			color: @ColorRed;
		}
	}

	&.on span {
		color: @ColorBlue;
		font-weight: 800;
	}
}
// 目录列表是空的
.ud2-tabs-menu-list.empty::before {
	content: attr(ud2-tabs-empty);
	position: absolute;
	top: 40%; left: 0; right: 0;
	text-align: center;
	color: @ColorTextNoImport;
}
// 设置滚动容器内边距
.ud2-tabs-menu-inner {
	padding: @BaseSize/2 @BaseSize
}
// 选项容器
.ud2-tabs-tab {
	height: @TabsSize;
	line-height: @TabsSize;
	color: lighten(@ColorText, 25%);
	background-color: @ColorWhiteDeepest;
	cursor: pointer;
	
	i {
		top: 1em;
		right: .8em;
		color: @ColorWhiteBackDark;
		font-size: .9em;
		line-height: 1;

		&:hover {
			color: @ColorRed;
		}
	}

	span {
		display: block;
		padding: 0 .7em;
		.textOverflow();
	}

	span:not(:only-child) {
		padding-right: 2.2em;
	}

	&.on {
		color: @ColorText;
		background: @ColorWhiteDeeper;
	}
}
// 选项内容集合容器
.ud2-tabs-main {
	z-index: 3;
	background: @ColorWhiteDeeper;
}
// 选项内容容器
.ud2-tabs-content {
	display: none;
	padding: @LayoutPadding;

	&.on {
		display: block;
	}

	&.iframe {
		padding: 0;
	}

	&, &.iframe iframe {
		width: 100%;
		height: 100%;
	}

	&.iframe iframe {
		border: 0;
	}
}

// 选项容器在顶部或底部时的高度
.ud2-tabs-top, .ud2-tabs-bottom {

	.ud2-tabs-bar {
		left: 0;
		right: @TabsSize;
		height: @TabsSize;

		&:first-child {
			right: 0;
		}
	}

	.ud2-tabs-tab {
		float: left;
		margin-right: @CtrlSizeGradient;
	}

	.ud2-tabs-main, .ud2-tabs-mask {
		left: 0;
		right: 0;
	}

	// 选项集合内容器，用于标记内元素宽高的和
	.ud2-tabs-bar-inner {
		min-width: 100%;
		height: 100%;
	}
}
// 选项容器在左侧或右侧时的高度
.ud2-tabs-left, .ud2-tabs-right {
	.ud2-tabs-bar {
		top: 0;
		bottom: @TabsSize;
		width: @TabsSize * 3.5;

		&:first-child {
			bottom: 0;
		}
	}

	.ud2-tabs-tab {
		width: @TabsSize * 3.5;
		margin-bottom: @CtrlSizeGradient;
	}

	.ud2-tabs-menu {
		width: @TabsSize * 3.5;
	}

	.ud2-tabs-main, .ud2-tabs-mask {
		top: 0;
		bottom: 0;
	}

	// 选项集合内容器，用于标记内元素宽高的和
	.ud2-tabs-bar-inner {
		width: 100%;
		min-height: 100%;
	}
}

// 选项卡在顶部样式
.ud2-tabs-top {
	.ud2-tabs-bar {
		top: 0;
	}

	.ud2-tabs-main, .ud2-tabs-mask {
		top: @TabsSize;
		bottom: 0;
	}

	.ud2-tabs-menu {
		top: 0;
		right: 0;
	}

	.ud2-tabs-tab, .ud2-tabs-menu-btn {
		border-top-left-radius: @BorderRadius;
		border-top-right-radius: @BorderRadius;
	}

	.ud2-tabs-menu.on .ud2-tabs-menu-btn::before {
		.transform(rotate(180deg));
	}

	.ud2-tabs-menu-list {
		top: @TabsSize; 
		right: 0;
		bottom: 0;
	}
}
// 选项集合容器的底部样式
.ud2-tabs-bottom {
	.ud2-tabs-bar {
		bottom: 0;
	}

	.ud2-tabs-main, .ud2-tabs-mask {
		top: 0;
		bottom: @TabsSize;
	}

	.ud2-tabs-menu {
		bottom: 0;
		right: 0;
	}

	.ud2-tabs-tab, .ud2-tabs-menu-btn {
		border-bottom-left-radius: @BorderRadius;
		border-bottom-right-radius: @BorderRadius;
	}

	.ud2-tabs-menu-btn::before {
		.transform(rotate(180deg));
	}

	.ud2-tabs-menu.on .ud2-tabs-menu-btn::before {
		.transform(rotate(360deg));
	}

	.ud2-tabs-menu-list {
		top: 0;
		bottom: @TabsSize; 
		right: 0;
	}
}
// 选项集合容器的左侧样式
.ud2-tabs-left {
	.ud2-tabs-bar {
		left: 0;
	}

	.ud2-tabs-main, .ud2-tabs-mask {
		left: @TabsSize * 3.5;
		right: 0;
	}

	.ud2-tabs-menu {
		bottom: 0;
		left: 0;
	}

	.ud2-tabs-tab, .ud2-tabs-menu-btn {
		border-top-left-radius: @BorderRadius;
		border-bottom-left-radius: @BorderRadius;
	}

	.ud2-tabs-menu-btn::before {
		.transform(rotate(-90deg));
	}

	.ud2-tabs-menu.on .ud2-tabs-menu-btn::before {
		.transform(rotate(90deg));
	}

	.ud2-tabs-menu-list {
		top: 0;
		bottom: 0; 
		left: @TabsSize * 3.5;
	}
}
// 选项集合容器的右侧样式
.ud2-tabs-right {
	.ud2-tabs-bar {
		right: 0;
	}

	.ud2-tabs-main, .ud2-tabs-mask {
		left: 0;
		right: @TabsSize * 3.5;
	}

	.ud2-tabs-menu {
		bottom: 0;
		right: 0;
	}

	.ud2-tabs-tab, .ud2-tabs-menu-btn {
		border-top-right-radius: @BorderRadius;
		border-bottom-right-radius: @BorderRadius;
	}

	.ud2-tabs-menu-btn::before {
		.transform(rotate(90deg));
	}

	.ud2-tabs-menu.on .ud2-tabs-menu-btn::before {
		.transform(rotate(270deg));
	}

	.ud2-tabs-menu-list {
		top: 0;
		bottom: 0; 
		right: @TabsSize * 3.5;
	}
}

// 自动高度
.ud2-tabs-auto {
	.ud2-tabs-main {
		position: static;
	}

	&.ud2-tabs-top .ud2-tabs-main {
		margin-top: @TabsSize;
	}

	&.ud2-tabs-bottom .ud2-tabs-main {
		margin-bottom: @TabsSize;
	}

	&.ud2-tabs-left .ud2-tabs-main {
		margin-left: @TabsSize;
	}

	&.ud2-tabs-right .ud2-tabs-main {
		margin-right: @TabsSize;
	}
}

// 清爽主题
.ud2-tabs-simple {
	.ud2-tabs-menu-btn, 
	.ud2-tabs-menu-btn:hover, 
	.ud2-tabs-menu.on > .ud2-tabs-menu-btn {
		background-color: transparent;
	}

	.ud2-tabs-menu.on > .ud2-tabs-menu-btn::before {
		color: @ColorBlue;
	}

	.ud2-tabs-tab, .ud2-tabs-main {
		background: transparent;
		color: @ColorText;
	}

	.ud2-tabs-tab.on {
		color: @ColorBlue;
	}

	&.ud2-tabs-top {
		.ud2-tabs-bar {
			background-image: -webkit-linear-gradient(transparent @TabsSize - 2.0001, @ColorWhiteDeepest @TabsSize - 2);
			background-image: -moz-linear-gradient(transparent @TabsSize - 2.0001, @ColorWhiteDeepest @TabsSize - 2);
			background-image: -o-linear-gradient(transparent @TabsSize - 2.0001, @ColorWhiteDeepest @TabsSize - 2);
			background-image: linear-gradient(transparent @TabsSize - 2.0001, @ColorWhiteDeepest @TabsSize - 2);
		}

		.ud2-tabs-menu-btn, .ud2-tabs-tab {
			border-bottom: 2px solid @ColorWhiteDeepest;
		}

		.ud2-tabs-tab.on {
			border-bottom-color: @ColorBlue;
		}
	}

	&.ud2-tabs-bottom {
		.ud2-tabs-bar {
			background-image: -webkit-linear-gradient(@ColorWhiteDeepest 2px, transparent 2.0001px);
			background-image: -moz-linear-gradient(@ColorWhiteDeepest 2px, transparent 2.0001px);
			background-image: -o-linear-gradient(@ColorWhiteDeepest 2px, transparent 2.0001px);
			background-image: linear-gradient(@ColorWhiteDeepest 2px, transparent 2.0001px);
		}

		.ud2-tabs-menu-btn, .ud2-tabs-tab {
			border-top: 2px solid @ColorWhiteDeepest;
		}

		.ud2-tabs-tab.on {
			border-top-color: @ColorBlue;
		}
	}

	&.ud2-tabs-left {
		.ud2-tabs-bar {
			background-image: -webkit-linear-gradient(to right, transparent @TabsSize * 3.5 - 2.0001, @ColorWhiteDeepest @TabsSize * 3.5 - 2);
			background-image: -moz-linear-gradient(to right, transparent @TabsSize * 3.5 - 2.0001, @ColorWhiteDeepest @TabsSize * 3.5 - 2);
			background-image: -o-linear-gradient(to right, transparent @TabsSize * 3.5 - 2.0001, @ColorWhiteDeepest @TabsSize * 3.5 - 2);
			background-image: linear-gradient(to right, transparent @TabsSize * 3.5 - 2.0001, @ColorWhiteDeepest @TabsSize * 3.5 - 2);
		}

		.ud2-tabs-menu-btn, .ud2-tabs-tab {
			border-right: 2px solid @ColorWhiteDeepest;
		}

		.ud2-tabs-tab.on {
			border-right-color: @ColorBlue;
		}
	}

	&.ud2-tabs-right {
		.ud2-tabs-bar {
			background-image: -webkit-linear-gradient(to right, @ColorWhiteDeepest 2px, transparent 2.0001px);
			background-image: -moz-linear-gradient(to right, @ColorWhiteDeepest 2px, transparent 2.0001px);
			background-image: -o-linear-gradient(to right, @ColorWhiteDeepest 2px, transparent 2.0001px);
			background-image: linear-gradient(to right, @ColorWhiteDeepest 2px, transparent 2.0001px);
		}

		.ud2-tabs-menu-btn, .ud2-tabs-tab {
			border-left: 2px solid @ColorWhiteDeepest;
		}

		.ud2-tabs-tab.on {
			border-left-color: @ColorBlue;
		}
	}
}