@import  "coco-variables.scss";


// 滚动条
// .el-tab-pane{ overflow: auto; height: 100%;}
.el-tab-pane{ height: 100%}
	
	
	
// new 
.co-tabs{
	-webkit-transform: rotate(0deg);//解决border-radius+overflow hidden子元素不受限bug
	position: relative; background-color: #fff; border-radius: 4px;
	.co-tabs__tools{ position: absolute; top: 0px; right: 15px;  z-index: 2}
	.el-tabs__nav-wrap::after{ display: none;}
	
	.el-tabs__item{ color: $--text-color-second;
		&:hover{ color: $--text-color-regular }
		transition-duration: 0.3s;
	}
	.is-active{ font-weight: bold; color: $--text-color-regular;}
	
	/*出现滚动条时*/
	.is-scrollable .el-tabs__nav-scroll{ padding-left: 8px; padding-right: 8px;}
	
	.el-tabs__active-bar{ background-color: $--sys-primary;}
	
	.el-tabs__header{ margin-bottom: 0;}
	// .el-tabs__content{ padding-left: 20px; padding-right: 20px;}
	
	
	&.line{
		.el-tabs__header{
			&::after{
				content: "";
				background-color: $--tab-line-color;
				height: 1px;
				display: block;
				position: absolute;
				bottom: 0.5px;
				left:0px;
				right:2px;
				z-index: 0;
			}
		}
	}
	&.border{
		border: 1px solid $--tab-border-color;
		border-radius: $--tab-radius;
	}
	&.fit{
		height: 100%;
		.el-tabs{ height: 100%; }
		.el-tabs__header{ position:absolute; width:100%; z-index:1;
			a.current::before{ height: 6px;bottom: -6px;}
		}
		.el-tabs__header+div{ box-sizing: border-box;}
		.el-tabs__content{ height: 100%;}
	}
	
	&.paper{
		
	}
	
	&.default{
		.el-tabs__active-bar{border-radius: 100px; height: 4px;}
		.el-tabs__header{ padding-left: 20px; padding-right: 20px;}
	}

	&.round{
			.el-tabs__active-bar{
				z-index: -1;
				border-radius: 100px;
				box-sizing: content-box;
				padding-left: 30px;
				margin-left: -15px;
				&+.el-tabs__item{padding-left:20px;
					&::before{ display: none;}
				}
			}
			.is-active{ color:#fff;
				&:hover{color:#fff}
			}
			.el-tabs__item{
				&::before{
					content:"";
					position:absolute;
					width:1px;
					height:16px;
					left:0;
					background-color:#ccc;
				}
			}
	}
	&.sun{
		.el-tabs__header{
			background: -moz-linear-gradient(top, rgba(0,0,0,0) 80%, rgba(0,0,0,.1) 100%);
			background: -webkit-linear-gradient(top, rgba(0,0,0,0) 80%,rgba(0,0,0,.1) 100%); 
			background: linear-gradient(to bottom, rgba(0,0,0,0) 80%,rgba(0,0,0,.1) 100%); 
		}
		.el-tabs__active-bar{
			top:0;
			left:-20px;
			height: 4px;
			box-sizing: content-box;
			padding-left: 20px;
			padding-right: 20px;
			border-radius: 4px 4px 0 0;
			&+.el-tabs__item{padding-left:20px;
				&::before{ display: none;}
			}
		}
		
		.is-active{
			background-color: #fff; 
			box-shadow: 0 0px 10px rgba(0,0,0,.3);
			border-radius: 4px 4px 0 0;
			padding-bottom: 1px;
			box-sizing: content-box;
		}
		.el-tabs__item::before{ top:16px }
		.el-tabs__item.is-top:nth-child(2){ padding-left: 20px;}
		.el-tabs__item.is-top:last-child{ padding-right: 20px;}
	}
	
	
	
	&.is-always-shadow,
	&.is-hover-shadow:hover{
		box-shadow: 0 2px 6px $--tab-shadow;
	}
	
	
	

	
	&.xl{
		$headerHeight:56px;
		.el-tab-pane{ padding: 20px 25px 35px;}
		.el-tabs__header{
			height: $headerHeight;
			&>a{
				font-size: 16px; line-height: $headerHeight;
				&.current{ height: $headerHeight; }
			}
			.el-tabs__item{ height: $headerHeight; line-height: $headerHeight; font-size: 16px;}
			.el-button--text{ margin-top: 8px;}
		}
		&.fit{
			.el-tabs__content{ padding-top: $headerHeight;}
		}
		.co-tabs__tool{
			height: $headerHeight;
			.el-button{ line-height: $headerHeight - 24 - 2;}
			.el-button--small{ line-height: $headerHeight - 18 - 2;}
			.el-button--mini{ line-height: $headerHeight - 14 - 2;}
		}
		&.round{
			.el-tabs__active-bar{ height: 40px; bottom: 8px; }
			.el-tabs__item::before{ top:20px }
		}
	}
	&.md{
		$headerHeight:48px;
		.el-tab-pane{ padding: 10px 20px 15px;}
		.el-tabs__header{
			height: $headerHeight;
			&>a{
				font-size: 16px; line-height: $headerHeight;
				&.current{ height: $headerHeight; }
			}
			.el-tabs__item{ height: $headerHeight; line-height: $headerHeight; font-size: 16px;}
			.el-button--text{ margin-top: 4px;}
		}
		&.fit{
			.el-tabs__content{ padding-top: $headerHeight;}
		}
		.co-tabs__tool{
			height: $headerHeight;
			.el-button{ line-height: $headerHeight - 24 - 2;}
			.el-button--small{ line-height: $headerHeight - 18 - 2;}
			.el-button--mini{ line-height: $headerHeight - 14 - 2;}
		}
		&.round{
			.el-tabs__active-bar{ height: 38px; bottom: 5px; }
			.el-tabs__item::before{ top:16px }
		}
	}
	&.sm{
		$headerHeight:40px;
		.el-tab-pane{ padding: 8px 15px 12px;}
		.el-tabs__header{
			height: $headerHeight;
			&>a{
				font-size: 14px; line-height: $headerHeight;
				&.current{ height: $headerHeight; }
			}
			.el-tabs__item{ height: $headerHeight; line-height: $headerHeight;}
			.el-button--text{ margin-top: 1px;}
		}
		&.fit{
			.el-tabs__content{ padding-top: $headerHeight;}
		}
		.co-tabs__tool{
			height: $headerHeight; padding-top: 4px;
			.el-button{ line-height: $headerHeight - 24 - 2;}
			.el-button--small{ line-height: $headerHeight - 18 - 2;}
			.el-button--mini{ line-height: $headerHeight - 14 - 2;}
		}
		&.round{
			.el-tabs__active-bar{ height: 32px; bottom: 4px; }
			.el-tabs__item::before{ top:12px }
		}
	}
	&.xs{
		$headerHeight:36px;
		.el-tab-pane{ padding: 4px 15px 8px;}
		.el-tabs__header{
			height: $headerHeight;
			&>a{
				font-size: 12px; line-height: $headerHeight;
				&.current{ height: $headerHeight; }
			}
			.el-tabs__item{ height: $headerHeight; line-height: $headerHeight;}
			.el-button--text{ margin-top: -1px;}
		}
		&.fit{
			.el-tabs__content{ padding-top: $headerHeight;}
		}
		.co-tabs__tool{
			height: $headerHeight;
			.el-button{ line-height: $headerHeight - 24 - 2;}
			.el-button--small{ line-height: $headerHeight - 18 - 2;}
			.el-button--mini{ line-height: $headerHeight - 14 - 2;}
		}
		&.round{
			.el-tabs__active-bar{ height: 28px; bottom: 5px; }
			.el-tabs__item::before{ top:10px }
		}
	}
}

// #app
.dark .co-tabs,.co-tabs.dark{
	background: none; border-color: $--tab-border-color-dark;
	.el-tabs__header::after{ background-color: $--tab-border-color-dark;}
	.el-tabs__item{ color: $--text-color-second-dark;}
	.is-active{ color: $--text-link-active-dark; }
	.el-tabs__content{ color: $--text-color-regular-dark;}
	
	&.sun .is-active{ background-color: rgba(255,255,255,.2);}
	
	&.is-always-shadow{box-shadow:inset rgba(255, 255, 255, 0.2) 0 0 60px;}

}