// ============================= Card Tabs =============================
.@{tab-prefix-cls}-card {
	// ============================= Radius corner =============================
	.@{tab-prefix-cls}-tab {
		--tab-border: 1px;
		--tab-grad: calc(78% - var(--tab-border));
		--border-radius: 4px;
		--border-color: @tabs-highlight-bg-color;
		--highlight-bg-color: @tabs-highlight-bg-color;

		&:after,
		&::before {
			transition: @tab-corner-animation;
			opacity: 0;
			content: '';
			position: absolute;
			width: var(--border-radius);
			height: var(--border-radius);
			bottom: -1px;
			z-index: 1;
			background: radial-gradient(
				circle at var(--circle-pos),
				transparent var(--tab-grad),
				var(--border-color) calc(var(--tab-grad) + 0.3px),
				var(--border-color) calc(var(--tab-grad) + var(--tab-border)),
				var(--highlight-bg-color) calc(var(--tab-grad) + var(--tab-border) + 0.3px)
			);
		}

		&:before {
			left: calc(var(--border-radius) * -1);
			--circle-pos: top left;
		}

		&:after {
			--circle-pos: top right;
			right: calc(var(--border-radius) * -1);
		}

		&-active {
			&:after,
			&::before {
				opacity: 1;
			}
		}
	}

	&.@{tab-prefix-cls}-bottom {
		.@{tab-prefix-cls}-tab {
			&:before {
				--circle-pos: bottom left;
				bottom: initial;
				top: -1px;
			}

			&:after {
				--circle-pos: bottom right;
				bottom: initial;
				top: -1px;
			}
		}
	}
}