@import (reference) 'dingtalk-theme/dingtalk-x/mob.less';

.myCardTab {
	display: flex;
	align-items: flex-end;

	&-item {
		flex: 1;
		background-color: @common_bg_z1_color;
		text-align: center;
		position: relative;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		overflow: hidden;

		&-active {
			height: 50px;
			line-height: 50px;
			font-size: 16px;
			font-weight: 600;
			border-radius: 10px 10px 0px 0px !important;
			overflow: initial;

			.myCardTab-item-bg {
				border-radius: 10px 10px 0px 0px;
				background-color: @common_bg_z1_color;
			}
		}

		&-bg {
			background-color: @common_bg_color;
		}
	}

	&-itemBorder {
		&::before {
			content: '';
			position: absolute;
			height: 22px;
			border-right: 1px solid @common_line_hard_color;
			left: 0;
			top: 9px;
		}
	}
}

.myCardTab-item:first-child {
	border-top-left-radius: 10px;
}

.myCardTab-item:last-child {
	border-top-right-radius: 10px;
}