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

.myStep {
	&-item {
		display: flex;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			width: 1px;
			height: 100%;
			top: 0;
			left: 8px;
			background-color: @common_line_light_color;
		}

		&-icon {
			height: 18px;
			width: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: @theme_primary1_color;
			border-radius: 50%;
			margin-top: 2px;
			margin-right: 8px;
		}

		&-content {
			flex: 1;
			padding-bottom: 12px;

			&-title {
				font-weight: 600;
			}

			&-subtitle {
				font-size: 12px;
				line-height: 20px;
				color: @common_level2_base_color;
				display: flex;
			}
		}

		&-green {
			color: @common_green1_color;
		}

		&-orange {
			color: @common_orange1_color;
		}

		&-red {
			color: @common_red1_active_color;
		}
	}

	&-item:last-child {
		&::before {
			display: none;
		}
	}
}