@import url(~antd/lib/tabs/style/index-pure.less);
@import '../../style/themes/index';
@import '../../style/mixins/index.less';

@icon-prefix-cls: ~'@{ant-prefix}-icon';
@tab-card-border-radius:50px;

.@{tab-prefix-cls} {
	&-separator,&-card {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
		&::before {
			content: unset;
		}
	}

	}

	&-extra-content {
		padding-bottom: @padding-xss;
	}

	// ========================== Navigation ==========================
	> .@{tab-prefix-cls}-nav,
	> div > .@{tab-prefix-cls}-nav {
		align-items: unset;

		// ============================= Ink Bar =============================
		.@{tab-prefix-cls}-ink-bar {
			height: @tabs-ink-bar-height;
		}

		// ============================= Nav Add Icon =============================
		.@{tab-prefix-cls}-nav-add {
			border: none;
		}
	}

	// ============================= Tabs =============================
	&-tab {
		color: @tabs-color;

		&-btn {
			letter-spacing: 1.25px;
		}

		&&-active &-remove {
			color: @font-color-caption;
		}

		&&-active &-btn {
			text-shadow: none;
			font-weight: @font-weight-semibold;
		}

		&&-disabled &-btn {
			color: @tabs-disabled-color;

			&:focus,
			&:active {
				color: @tabs-disabled-color;
			}
		}
		.@{iconfont-css-prefix} {
			margin-right: 6px;
		  }
	}

	// ============================= Tab Content =============================
	.@{tab-prefix-cls}-content-holder {
		background-color: @component-background;
		border-radius: @border-radius-base;
		border-start-start-radius: 0;
	}

	// ============================= Editable Tabs =============================
	&-tab-with-remove {
		.@{tab-prefix-cls}-tab-remove {
			position: relative;
			width: 16px;
			height: 16px;

			// Make sure text content not covered by the before pseudo element.
			> * {
				position: relative;
			}

			// Circle background for the Remove Icon.
			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100%;
				height: 100%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				transition: @tab-corner-animation;
			}

			&:hover::before {
				background-color: @cloud-gray-20;
			}

			.@{icon-prefix-cls} {
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 12px;
				position: absolute;
			}
		}

		&.@{tab-prefix-cls}-tab-active {
			.@{tab-prefix-cls}-tab-remove:hover::before {
				background-color: @gray-10;
			}
		}
	}

	&-tab-remove {
		color: @font-color-caption;
		&:hover {
			color: @font-color-caption;
		  }
	}

	&-tab + &-tab {
		margin-left: 24px;
	}

	// Position
	&.@{tab-prefix-cls}-top {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			margin-bottom: 0;
		}
		> .@{tab-prefix-cls}-content-holder,
    	> div > .@{tab-prefix-cls}-content-holder {
		> .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
			padding-top: @padding-lg;
		  }
		}
	}

	&.@{tab-prefix-cls}-bottom {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			margin-top: 0;
		}
		> .@{tab-prefix-cls}-content-holder,
    	> div > .@{tab-prefix-cls}-content-holder {
		> .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
			padding-bottom: @padding-lg;
		  }
		}
	}
}

// ============================= Card Tabs =============================
.@{tab-prefix-cls}-card {
	// ========================== Navigation ==========================
	> .@{tab-prefix-cls}-nav,
	> div > .@{tab-prefix-cls}-nav {
		.@{tab-prefix-cls}-nav-list {
			background-color: @tabs-bg-color-base;
			border-radius: @border-radius-base;
		}
		//add tab
		.@{tab-prefix-cls}-nav-add {

			background: transparent;
			position: relative;
			color: @text-color;
			&:hover {
				background: @gray-10-hover;
				color: @gray-100;
			}
			&:focus {
				color: @text-color;
			}
			.@{icon-prefix-cls} {
				vertical-align: middle;
			}
		}
		// ============================= Tabs =============================
		.@{tab-prefix-cls}-tab {
			background-color: @tabs-bg-color-base;
			border: none;
			// box-shadow: @shadow-1;

			.@{tab-prefix-cls}-tab-btn {
				&::before {
					content: '';
					display: block;
					position: absolute;
					height: 3px;
					background: @tabs-ink-bar-background;
					transition: opacity 0.3s;
					opacity: 0;
					background-size: 250%;
				}

				// Separator gutter
				// &::after {
				// 	content: '';
				// 	display: block;
				// 	position: absolute;
				// 	width: 1px;
				// 	background: @tabs-bg-color-hover;
				// 	transition: opacity 0.3s;
				// }
			}

			&:hover:not(.@{tab-prefix-cls}-tab-disabled):not(.@{tab-prefix-cls}-tab-active) {
				background-color: @tabs-bg-color-hover;
			}

			&-active {
				background: @tabs-highlight-bg-color;
				z-index: 1;

				// Top line
				.@{tab-prefix-cls}-tab-btn {
					&:after {
						opacity: 0;
					}

					&:before {
						opacity: 1;
					}
				}
			}

			// Editable Cards
			&-with-remove {
				padding-right: 10px;
			}
		}

		.@{tab-prefix-cls}-tab-disabled.@{tab-prefix-cls}-tab-active {
			.@{tab-prefix-cls}-tab-btn {
				&::before {
					background: @gray-10-hover;
				}
			}
		}
	}

	// ========================== Top & Bottom ==========================
	&.@{tab-prefix-cls}-top {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab {
				border-radius: @tab-border-radius @tab-border-radius 0 0;

				.@{tab-prefix-cls}-tab-btn {
					&::after {
						border-top-right-radius: @tab-border-radius;
						right: 0;
						top: 0;
						bottom: 0;
					}
				}

				&-active {
					.@{tab-prefix-cls}-tab-btn {
						&::before {
							top: 0;
							left: 0;
							right: 0;
							border-top-right-radius: @tab-card-border-radius;
							border-top-left-radius: @tab-card-border-radius;
						}
					}
				}
			}
		}
	}

	&.@{tab-prefix-cls}-bottom {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab {
				.@{tab-prefix-cls}-tab-btn {
					&::after {
						border-bottom-right-radius: @tab-border-radius;
						right: 0;
						top: 0;
						bottom: 0;
					}
				}
				&-active {
					.@{tab-prefix-cls}-tab-btn {
						&::before {
							bottom: 0;
							left: 0;
							right: 0;
							border-bottom-right-radius: @tab-card-border-radius;
							border-bottom-left-radius: @tab-card-border-radius;
						}
					}
				}
			}
		}
	}
}

.@{tab-prefix-cls}-card.@{tab-prefix-cls}-breathing-gradient {
	> .@{tab-prefix-cls}-nav,
	> div > .@{tab-prefix-cls}-nav {
		.@{tab-prefix-cls}-tab {
			.@{tab-prefix-cls}-tab-btn {
				&::before {
					.gradient-breathing-animation();
				}
			}
		}
	}
}

// ============================= Tabs Full-Width =============================
.@{tab-prefix-cls}-full-width {
	.@{tab-prefix-cls}-nav-list {
		// flex-grow: 1;
	}

	.@{tab-prefix-cls}-tab {
		// flex-grow: 1;
		justify-content: center;
		font-size: @font-size-base;
	}

	.@{tab-prefix-cls}-tab-btn {
		font-size: @font-size-base;
		line-height: @layout-height-3;
	}

	&.@{tab-prefix-cls}-tab-active {
		padding-right: 16px;
	}

	.@{tab-prefix-cls}-tab.@{tab-prefix-cls}-tab-with-remove {
		padding-right: 16px;

		// Right align the remove icon with the text still centered
		.@{tab-prefix-cls}-tab-remove {
			margin-left: auto;
		}

		.@{tab-prefix-cls}-tab-btn {
			width: 100%;
			text-align: center;
		}
	}
}

// ============================= Separator Tabs =============================
.@{tab-prefix-cls}-separator {
	// Add sepeartor to tab btn except for the first one.
	.@{tab-prefix-cls}-tab-btn {
		position: relative;

		&::before {
			content: '';
			height: 14px;
			width: 1px;
			position: absolute;
			left: -12px;
			background-color: @tabs-bg-color-hover;
			top:50%;
			transform: translateY(-50%);
		}
	}
	.@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab{
		margin-left: 0!important;
		// margin-bottom: 0;

	}

	.@{tab-prefix-cls}-tab:first-of-type {
		.@{tab-prefix-cls}-tab-btn::before {
			content: unset;
		}
	}

	.@{tab-prefix-cls}-tab::after {
		content: unset;
	}

	.@{tab-prefix-cls}-ink-bar {
		display: none;
	}

	.@{tab-prefix-cls}-tab:hover::after {
		content: unset;
	}
}

@import './corner.less';
@import './vertical.less';
@import './line.less';
@import './size.less';