@import './mixin.less';
@import '../../style/mixins/index.less';

// ============================= Line Tabs =============================
.@{tab-prefix-cls}-line {
	.@{tab-prefix-cls}-nav-list {
		align-items: center;
	}
	.@{tab-prefix-cls}-tab {
		height: @height-xs;
		line-height: @height-xs;
		padding: 0 12px !important;
		margin: calc((36px - @height-xs) / 2) 0;
	}
	&.@{tab-prefix-cls}-left,
	&.@{tab-prefix-cls}-right {
		.@{tab-prefix-cls}-tab {
			margin: 0;
		}
	}

	&:not(.@{tab-prefix-cls}-separator) .@{tab-prefix-cls}-tab:not(.@{tab-prefix-cls}-tab-disabled) {
		&:hover {
			background-color: @component-background-hover;
			border-radius: @border-radius-base;
		}
	}

	&:not(.@{tab-prefix-cls}-separator):not(.@{tab-prefix-cls}-right):not(.@{tab-prefix-cls}-left)
		.@{tab-prefix-cls}-tab
		+ .@{tab-prefix-cls}-tab {
		margin-left: 8px;
	}

	> .@{tab-prefix-cls}-nav,
	> div > .@{tab-prefix-cls}-nav {
		.@{tab-prefix-cls}-ink-bar {
			background: @tabs-ink-bar-background;
			background-size: 250%;
		}
	}

	// Direction
	&.@{tab-prefix-cls}-top {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab:not(.@{tab-prefix-cls}-tab-disabled)::after,
			.@{tab-prefix-cls}-ink-bar {
				.ink-bar-position(top);
			}
		}
	}

	&.@{tab-prefix-cls}-bottom {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab:not(.@{tab-prefix-cls}-tab-disabled)::after,
			.@{tab-prefix-cls}-ink-bar {
				.ink-bar-position(bottom);
			}
		}
	}

	&.@{tab-prefix-cls}-left {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab:not(.@{tab-prefix-cls}-tab-disabled)::after,
			.@{tab-prefix-cls}-ink-bar {
				.ink-bar-position(left);
			}
		}
		.@{tab-prefix-cls}-tab {
			margin-right: 8px !important;
		}
	}

	&.@{tab-prefix-cls}-right {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab:not(.@{tab-prefix-cls}-tab-disabled)::after,
			.@{tab-prefix-cls}-ink-bar {
				.ink-bar-position(right);
			}
		}
		.@{tab-prefix-cls}-tab {
			margin-left: 8px !important;
		}
	}

	// Remove icon
	.@{tab-prefix-cls}-tab-with-remove .@{tab-prefix-cls}-tab-remove {
		width: 20px;
		height: 20px;
		margin-right: initial;

		.@{icon-prefix-cls} {
			position: absolute;
		}

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

	& > .@{tab-prefix-cls}-nav,
	& > div > .@{tab-prefix-cls}-nav {
		.@{tab-prefix-cls}-nav-add {
			min-width: initial;
			border-top-left-radius: @border-radius-base;
			border-top-right-radius: @border-radius-base;
			background: transparent;
			margin-left: 24px;
			height: 32px;
			position: relative;
			color: @text-color;

			&:hover {
				background: @gray-10-hover;
				color: @gray-100;
			}

			&:focus {
				color: @text-color;
			}

			&::before {
				content: '';
				display: block;
				width: 1px;
				height: 20px;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: @gray-10-hover;
			}

			.@{icon-prefix-cls} {
				vertical-align: middle;
			}
		}

		.@{tab-prefix-cls}-nav-more {
			padding: 0 8px;
			height: 32px;
			border-top-left-radius: @border-radius-base;
			border-top-right-radius: @border-radius-base;
			transition: all @animation-duration-slow @ease-in-out;
			color: @text-color;

			&:hover {
				background: @component-background-hover;
				cursor: pointer;
				color: @gray-100;
			}

			.@{icon-prefix-cls} {
				vertical-align: middle;
			}
		}

		.b-design-tabs-nav-operations {
			.@{tab-prefix-cls}-nav-add {
				margin-left: 0;

				&::before {
					content: none;
				}
			}
		}
	}
}

.@{tab-prefix-cls}-line.@{tab-prefix-cls}-breathing-gradient {
	> .@{tab-prefix-cls}-nav,
	> div > .@{tab-prefix-cls}-nav {
		.@{tab-prefix-cls}-ink-bar {
			.gradient-breathing-animation();
		}
	}
}

// ============================= Line Simple Tabs =============================
.@{tab-prefix-cls}-line-simple {
	> .@{tab-prefix-cls}-nav,
	> div > .@{tab-prefix-cls}-nav {
		&::before {
			content: '';
			background-color: @gray-10-hover;
			height: 1px;
			border-bottom: none;
		}
	}
}