@import '../../style/themes/index';
@tab-prefix-cls: ~'@{ant-prefix}-tabs';

.@{tab-prefix-cls} {
	// ========================== Top & Bottom ==========================
	&-top,
	&-bottom {
		flex-direction: column;

		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			margin: @tabs-bar-margin;

			&:not(.@{tab-prefix-cls}-card)::before {
				position: absolute;
				right: 0;
				left: 0;
				border-bottom: @border-width-base @border-style-base @border-color-split;
				content: '';
			}

			.@{tab-prefix-cls}-ink-bar {
				height: 2px;

				&-animated {
					transition: width @animation-duration-slow, left @animation-duration-slow, right @animation-duration-slow;
				}
			}

			.@{tab-prefix-cls}-nav-wrap {
				&::before,
				&::after {
					top: 0;
					bottom: 0;
					width: 30px;
				}

				&::before {
					left: 0;
					box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
				}

				&::after {
					right: 0;
					box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
				}

				&.@{tab-prefix-cls}-nav-wrap-ping-left::before {
					opacity: 1;
				}
				&.@{tab-prefix-cls}-nav-wrap-ping-right::after {
					opacity: 1;
				}
			}
		}
	}

	&-top {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			&::before {
				bottom: 0;
			}

			.@{tab-prefix-cls}-ink-bar {
				bottom: 0;
			}
		}
	}

	&-bottom {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			order: 1;
			margin-top: @margin-md;
			margin-bottom: 0;

			&::before {
				top: 0;
			}

			.@{tab-prefix-cls}-ink-bar {
				top: 0;
			}
		}

		> .@{tab-prefix-cls}-content-holder,
		> div > .@{tab-prefix-cls}-content-holder {
			order: 0;
		}
	}

	// ========================== Left & Right ==========================
	&-left,
	&-right {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			flex-direction: column;
			min-width: 50px;

			// >>>>>>>>>>> Tab
			.@{tab-prefix-cls}-tab {
				padding: @tabs-vertical-padding;
				text-align: center;
			}

			.@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
				margin: @tabs-vertical-margin;
			}

			// >>>>>>>>>>> Nav
			.@{tab-prefix-cls}-nav-wrap {
				flex-direction: column;

				&::before,
				&::after {
					right: 0;
					left: 0;
					height: 30px;
				}

				&::before {
					top: 0;
					box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
				}

				&::after {
					bottom: 0;
					box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
				}

				&.@{tab-prefix-cls}-nav-wrap-ping-top::before {
					opacity: 1;
				}
				&.@{tab-prefix-cls}-nav-wrap-ping-bottom::after {
					opacity: 1;
				}
			}

			// >>>>>>>>>>> Ink Bar
			.@{tab-prefix-cls}-ink-bar {
				width: 2px;

				&-animated {
					transition: height @animation-duration-slow, top @animation-duration-slow;
				}
			}

			.@{tab-prefix-cls}-nav-list,
			.@{tab-prefix-cls}-nav-operations {
				flex: 1 0 auto; // fix safari scroll problem
				flex-direction: column;
			}
		}
	}

	&-left {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-ink-bar {
				right: 0;
			}
		}

		> .@{tab-prefix-cls}-content-holder,
		> div > .@{tab-prefix-cls}-content-holder {
			margin-left: -@border-width-base;
			border-left: @border-width-base @border-style-base @border-color-split;

			> .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
				padding-left: @padding-lg;
			}
		}
	}

	&-right {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			order: 1;

			.@{tab-prefix-cls}-ink-bar {
				left: 0;
			}
		}

		> .@{tab-prefix-cls}-content-holder,
		> div > .@{tab-prefix-cls}-content-holder {
			order: 0;
			margin-right: -@border-width-base;
			border-right: @border-width-base @border-style-base @border-color-split;

			> .@{tab-prefix-cls}-content > .@{tab-prefix-cls}-tabpane {
				padding-right: @padding-lg;
			}
		}
	}
}