@import  "coco-variables.scss";


/* 标题前图标 */
.co-rect{ position: relative; text-align: left; color: $--rect-text-color; line-height: 32px; display: inline-block;

	
	
	
	i{ vertical-align: middle; display: inline-block;}
	i+span{ padding-left: 4px;}
	img{ border: none; vertical-align: middle; margin-top: -3px;}

	&.inside,&.outside{
		&::before,&::after{ content: "";position: absolute; top: 50%; left: -6px;width: 3px; }
		&::before{ height: 16px;margin-top: -8px; background:$--sys-primary; border-radius: 10px; }
		&::after{ height: 2px;margin-top: -1px; background: #FFF; }
	}
	&.rect--i,&.inside{ padding-left: 14px;
		&::before,&::after{ left: 0px; }
	}

	&.rect--o,&.outside{ padding-left: 0px;
		&::before,&::after{ left: -14px; }
	}
	
	
	

	// 加粗
	&.bold{ font-weight: bold;}

	// rect-圆圆矩形
	&.rect::before{ width:3px; height:16px; margin-top:-8px}
	&.rect::after{ display:none }

	// cir-圆点
	&.cir::before{ width:6px; height:6px; margin-top:-2px}
	&.cir::after{ display:none }
	
	//line-下边线
	&.line::before{
		content: "";
		width: 100%;
		height: 4px;
		background: #1890FF;
		position: absolute;
		left: 0;
		bottom: -8px;
		border-radius: 0;
	}
	
	&.none{
		padding-left: 0;
		&::before{ display: none;}
	}
	
	

}

.dark.co-rect{
	
	font-weight: bold;

	&:not(.light){
		color: #ffffff;
		&::before{ background:$--sys-primary}
		&::after{ background: #000; }
	}
	
}


.xl{
	&.co-rect{
		font-size:20px; 
		&::after{ height: 2px;margin-top: -1px;}
		i{ margin-top: -4px; }
	}
}
.md{
	&.co-rect{
		font-size:16px; 
		&::after{ height: 2px;margin-top: -1px;}
		i{ margin-top: -3px; }
	}
}
.sm{
	&.co-rect{
		font-size:14px; 
		&::after{ height: 2px;margin-top: -1px;}
		i{ margin-top: -3px; }
	}
}
.xs{
	&.co-rect{
		font-size:12px; 
		&::after{ height: 2px;margin-top: -1px;}
		i{ margin-top: -3px; }
	}
}