@import '../../style/themes/index';
@import '../../style/mixins/index';

@tab-prefix-cls: ~'@{ant-prefix}-tabs';

.@{tab-prefix-cls}-card {
	> .@{tab-prefix-cls}-nav {
		padding: 10px;
		background-color: @dbk-primary;
		border: none;
		border-radius: @card-radius;
	}
	> .@{tab-prefix-cls}-nav,
	> div > .@{tab-prefix-cls}-nav {
		.@{tab-prefix-cls}-tab {
			margin: 0;
			padding: @tabs-card-horizontal-padding;
			background: transparent;
			// border: @border-width-base @border-style-base rgba(@white, 0.25);
			border-radius: @border-radius-base;
			color: @white;
			font-weight: 500;
			transition: all @animation-duration-slow @ease-in-out;

			&-active {
				color: @tabs-card-active-color;
				background: @component-background;

				.@{tab-prefix-cls}-tab-remove {
					color: rgba(@dbk-primary, 0.75);
				}
			}
		}

		.@{tab-prefix-cls}-ink-bar {
			visibility: hidden;
		}
	}

	.@{tab-prefix-cls}-nav-more {
		color: @white;
	}

	&.@{tab-prefix-cls}-top,
	&.@{tab-prefix-cls}-bottom,
	&.@{tab-prefix-cls}-left,
	&.@{tab-prefix-cls}-right {
		> .@{tab-prefix-cls}-nav:before {
			border: none;
		}

		> .@{tab-prefix-cls}-content-holder {
			border: none;
		}

		/* > .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab {
				// border-radius: @border-radius-base @border-radius-base 0 0;

				&-active {
					// position: relative;

					&::after {
						content: ' ';
						display: block;
						width: 30px;
						height: 30px;
						background-color: red;
						position: absolute;
						transform: rotate(45deg);
						border-radius: 5px;
					}
				}
			}
		} */
	}

	// ========================== Top & Bottom ==========================
	/* &.@{tab-prefix-cls}-top,
	&.@{tab-prefix-cls}-bottom {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
				margin-left: @tabs-card-gutter;
			}
		}

		> .@{tab-prefix-cls}-nav:before {
			border: none;
		}
	}

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

				&-active {
					border-bottom-color: @component-background;
				}
			}
		}
	}
	&.@{tab-prefix-cls}-bottom {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab {
				// border-radius: 0 0 @border-radius-base @border-radius-base;

				&-active {
					border-top-color: @component-background;
				}
			}
		}
	}

	// ========================== Left & Right ==========================
	&.@{tab-prefix-cls}-left,
	&.@{tab-prefix-cls}-right {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
				margin-top: @tabs-card-gutter;
			}
		}
	}

	&.@{tab-prefix-cls}-left {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab {
				// border-radius: @border-radius-base 0 0 @border-radius-base;

				&-active {
					border-right-color: @component-background;
				}
			}
		}

		> .@{tab-prefix-cls}-content-holder {
			border: none;
		}
	}
	&.@{tab-prefix-cls}-right {
		> .@{tab-prefix-cls}-nav,
		> div > .@{tab-prefix-cls}-nav {
			.@{tab-prefix-cls}-tab {
				// border-radius: 0 @border-radius-base @border-radius-base 0;

				&-active {
					border-left-color: @component-background;
				}
			}
		}

		> .@{tab-prefix-cls}-content-holder {
			border: none;
		}
	} */
}