@import  "coco-variables.scss";



.textnum{
	position: relative; background: none;
	
	// 图标
	&.icon{
		&.round>i{ border-radius: 100px;}
		&.roundrect>i{ border-radius: 4px; overflow: hidden;}
		&.rect>i{ border-radius: 0px;}
		
		
		i{
			display: inline-block;
			color: $--text-color2;
			text-align: center;
			background-size: cover;
			background-position: center center;
			transition: all .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1);
			img{ width: 100%; height: 100%; float: left;}
			&::after{ content: ""; display: block; clear: both;}
			img{ padding:8%}
		}
	}
	&[class*='bg']>i img{ padding:24%; }
	
	// name就是sectext
	.name{ color: $--text-color-regular; display: block;}
	
	// num就是maintext(text/unit)
	.num{ color: $--text-color-primary;
		// .text{ font-weight: bold}
		.unit{ color: $--text-color-regular}
	}
	
	// detail
	.detail{ font-size: 12px; color: $--text-color-regular;
		.title{ color: $--text-color-regular;}
	}
	
	
	// 功能
	.badge{
		top: -8px;
		right: -8px;
		font-style: normal;
		position: absolute;
		background-color: #f00;
		line-height: 16px;
		font-size: 12px;
		padding: 0 4px;
		min-width: 16px;
		text-align: center;
		border-radius: 100px;
		border: 1px solid #fff;
	}
	
	&.column{
		text-align: center;
		i{ position: relative;}
		.num .text,.num .unit{ vertical-align: top; padding-left:2px; padding-right: 2px;}
	}
	&.row{
		i{ position: absolute; left: 0px; top:0;}
		.num::after{ content: ""; display: block; clear: both;}
		&.textnum-text{
			.num .text{ padding-right: 8px}
			.num .unit{ display: inline-block;}
		}
		&.textnum-default,&.textnum-bebas{
			.num .text{ float:left; padding-right: 4px;}
			.num .unit{ float:left }
		}
		
	}
	
	// 默认文字链接
	a{ color: $--text-link-normal; text-decoration: none;
		&:hover{ color: $--text-link-hover; text-decoration: underline;}
	}
	&.hover{
		cursor: pointer;
		&:hover{
			i{ transform: scale(1.2);}
			.num{ text-decoration: underline}
		}
	}
	
	&.textnum-bebas{
		.num .text{ font-family: 'CO-NUMS','Source Sans Pro','PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,Arial,Helvetica,sans-serif;}
	}
	
	
	&.light{
		.num,.unit,.name{ color:#FFF}
		// &>i{ background-color: #FFF; }
	}
}


$--textnum-xxs-icon:18px;
$--textnum-xxs-name:12px;
.xxs{
	&.textnum{ min-height: $--textnum-xxs-icon;
		.name{ font-size: $--textnum-xxs-name; line-height:$--textnum-xxs-name+3; padding-top:2px}
		.num{ line-height:18px}
		.unit{ font-size: 14px}
		
		&>i{
			width: $--textnum-xxs-icon; height: $--textnum-xxs-icon; font-size:16px; line-height:$--textnum-xxs-icon;
			// &+div{ padding-top:2px}
			&+div+div{ padding-top:5px}
		}
		&[class*='bg']>i{ font-size:12px }
		&.row{
			&.icon{ padding-left: $--textnum-xxs-icon+8;}
			&.only{
				i+*{ line-height: $--textnum-xxs-icon;}
			} 
		}
		.detail{ margin-top: 5px;}
	}
	&.textnum-text{
		.num{ font-size: 12px; line-height:14px } 
		&>i+div+.name{ padding-top:5px}
		.unit{ font-size: 12px;}
	}
	&.textnum-default{
		.num{ font-size: 14px}
		&>i+div+.name{ padding-top:5px}
		&>i+div+.num{ padding-top:4px}
	}
	&.textnum-bebas{
		.num{ font-size: 18px;
			// .text{ position: relative; top: 2px;}
		}
		&>i+div+.name{ padding-top:5px}
		&>i+div+.num{ padding-top:4px}
	}
}




$--textnum-xs-icon:24px;
$--textnum-xs-name:13px;
.xs{
	&.textnum{ min-height: $--textnum-xs-icon;
		.name{ font-size: $--textnum-xs-name; line-height:$--textnum-xs-name+4; padding-top:4px}
		.num{ line-height:18px}
		.unit{ font-size: 14px}
		
		&>i{
			width: $--textnum-xs-icon; height: $--textnum-xs-icon; font-size:18px; line-height:$--textnum-xs-icon;
			&+div+div{ padding-top:5px}
		}
		&[class*='bg']>i{ font-size:16px }
		&.row{
			&.icon{ padding-left: $--textnum-xs-icon+10;}
			&.only{
				i+*{ line-height: $--textnum-xs-icon; padding-top:0}
			} 
		}
		.detail{ margin-top: 6px;}
	}
	&.textnum-text{
		.num{ font-size: 14px} 
		
	}
	&.textnum-default{
		.num{ font-size: 16px}
		&>i+.num{ padding-top:4px }
	}
	&.textnum-bebas{
		.num{ font-size: 22px;
			.unit{ position:relative; top:2px}
		}
		&>i+.num{ padding-top:3px }
	}
}



$--textnum-sm-icon:40px;
$--textnum-sm-name:13px;
.sm{
	&.textnum{ min-height: $--textnum-sm-icon;
		.name{ font-size: $--textnum-sm-name; line-height:$--textnum-sm-name+4}
		.num{ line-height:18px}
		.unit{ font-size: 14px}
		
		&>i{ width: $--textnum-sm-icon; height: $--textnum-sm-icon;font-size:36px; line-height:$--textnum-sm-icon; }
		&[class*='bg']>i{ font-size:25px }
		&.row{
			&.icon{ padding-left: $--textnum-sm-icon+10;}
			&.only{
				i+*{ line-height: $--textnum-sm-icon; padding-top:0}
			} 
		}
		.detail{ margin-top: 6px;}
	}
	&.textnum-text{
		.num{ font-size: 14px}
		&>i+div{ padding-top:0px}
		&>i+div+div{ padding-top:6px}
	}
	&.textnum-default{
		.num{ font-size: 16px}
		&>i+div{ padding-top:0px}
		&>i+div+.name{ padding-top:5px }
		&>i+div+.num{ padding-top:6px }
	}
	&.textnum-bebas{
		.num{ font-size: 24px;
			.unit{ position:relative; top:2px}
		}
		&>i+.name{ padding-top:0px }
		&>i+.num{ padding-top:2px }
		&>i+div+div{ padding-top:4px}
	}
}




$--textnum-smplus-icon:48px;
$--textnum-smplus-name:13px;
.smplus{
	&.textnum{ min-height: $--textnum-smplus-icon;
		.name{ font-size: $--textnum-smplus-name; line-height:$--textnum-smplus-name+6}
		.num{ line-height:20px}
		.unit{ font-size: 14px}
		
		&>i{ width: $--textnum-smplus-icon; height: $--textnum-smplus-icon;font-size:45px; line-height:$--textnum-smplus-icon; }
		&[class*='bg']>i{ font-size:30px }
		&.row{
			&.icon{ padding-left: $--textnum-smplus-icon+10;}
			&.only{
				i+*{ line-height: $--textnum-smplus-icon; padding-top:0}
			} 
		}
		.detail{ margin-top: 6px;}
	}
	
	&.textnum-text{
		.num{ font-size: 14px}
		&>i+div{ padding-top:2px}
		&>i+div+div{ padding-top:6px}
	}
	&.textnum-default{
		.num{ font-size: 18px}
		&>i+div{ padding-top:2px}
		&>i+div+div{ padding-top:6px}
	}
	&.textnum-bebas{
		.num{ font-size: 26px;
			.unit{ position:relative; top:3px}
		}
		&>i+.name{ padding-top:0px }
		&>i+.num{ padding-top:3px }
		&>i+div+div{ padding-top:6px}
	}
}





$--textnum-md-icon:60px;
$--textnum-md-name:14px;
.md{
	&.textnum{ min-height: $--textnum-md-icon;
		.name{ font-size: $--textnum-md-name; line-height:$--textnum-md-name+4}
		.num{ line-height:24px}
		.unit{ font-size: 14px}
		
		&>i{width: $--textnum-md-icon; height: $--textnum-md-icon;font-size:54px; line-height:$--textnum-md-icon; }
		&[class*='bg']>i{ font-size:38px }
		&.row{
			&.icon{ padding-left: $--textnum-md-icon+16;}
			&.only{
				i+*{ line-height: $--textnum-md-icon; padding-top:0}
			} 
		}
		.detail{ margin-top: 10px;}
	}
	
	&.textnum-text{
		.num{ font-size: 16px}
		&>i+div{ padding-top:4px}
		&>i+div+div{ padding-top:10px}
		.unit{ font-size: 16px;}
	}
	&.textnum-default{
		.num{ font-size: 24px;
			.unit{ position:relative; top:3px}
		}
		&>i+.name{ padding-top:4px }
		&>i+.num{ padding-top:6px }
		&>i+div+div{ padding-top:8px}
	}
	&.textnum-bebas{
		.num{ font-size: 36px;
			.unit{ position:relative; top:6px}
		}
		&>i+.name{ padding-top:0px }
		&>i+.num{ padding-top:6px }
		&>i+div+div{ padding-top:10px}
	}
}



$--textnum-xl-icon:80px;
$--textnum-xl-name:16px;
.xl{
	&.textnum{ min-height: $--textnum-xl-icon;
		.name{ font-size: $--textnum-xl-name; line-height:$--textnum-xl-name+6}
		
		.unit{ font-size: 14px}
		
		&>i{ width: $--textnum-xl-icon; height: $--textnum-xl-icon; font-size:72px; line-height:$--textnum-xl-icon; }
		&[class*='bg']>i{ font-size:54px }
		&.row{
			&.icon{ padding-left: $--textnum-xl-icon+16;}
			&.only{
				i+*{ line-height: $--textnum-xl-icon; padding-top:0}
			} 
		}
		&.column{
			&>i+.name{ padding-top:5px }
			&>i+div+div{ padding-top:4px}
		}
		.detail{ margin-top: 14px;}
	}
	&.textnum-text{
		.num{ font-size: 18px; line-height:26px}
		&>i+div{ padding-top:8px}
		&>i+div+div{ padding-top:16px}
		.unit{ font-size: 18px;}
	}
	&.textnum-default{
		.num{ font-size: 28px; line-height:36px;
			.unit{ position:relative; top:4px}
		}
		&>i+.name{ padding-top:10px }
		&>i+.num{ padding-top:5px }
		&>i+div+div{ padding-top:10px}
	}
	&.textnum-bebas{
		.num{ font-size: 44px; line-height:36px;
			.unit{ position:relative; top:8px}
		}
		&>i+.name{ padding-top:5px }
		&>i+.num{ padding-top:7px }
		&>i+div+div{ padding-top:12px}
	}
}




// 背景色
.textnum{
	&.bg0{
		&>i{ color: $--color-1;}
	}
	&.bg1{
		&>i{ background-color: $--color-1; color: #FFF;}
	}
	&.bg2{
		&>i{ background-color: $--color-2; color: #FFF;}
	}
	&.bg3{
		&>i{ background-color: $--color-3; color: #FFF;}
	}
	&.bg4{
		&>i{ background-color: $--color-4; color: #FFF;}
	}
	&.bg5{
		&>i{ background-color: $--color-5; color: #FFF;}
	}
	&.bg6{
		&>i{ background-color: $--color-6; color: #FFF;}
	}
	&.bg7{
		&>i{ background-color: $--color-7; color: #FFF;}
	}
	&.bg8{
		&>i{ background-color: $--color-8; color: #FFF;}
	}
	&.bg9{
		&>i{ background-color: $--color-9; color: #FFF;}
	}
	&.bg10{
		&>i{ background-color: $--color-10; color: #FFF;}
	}
	&.bg11{
		&>i{ background: $--color-11; color: #FFF;}
	}
	&.bg12{
		&>i{ background: $--color-12; color: #FFF;}
	}
	&.bg13{
		&>i{ background: $--color-13; color: #FFF;}
	}
	&.bg14{
		&>i{ background: $--color-14; color: #FFF;}
	}
	&.bg15{
		&>i{ background: $--color-15; color: #FFF;}
	}
	&.bg16{
		&>i{ background: $--color-16; color: #FFF;}
	}
	&.bg17{
		&>i{ background: $--color-17; color: #FFF;}
	}
	&.bg18{
		&>i{ background: $--color-18; color: #FFF;}
	}
	&.bg19{
		&>i{ background: $--color-19; color: #FFF;}
	}
	// &.bg20{
	// 	&>i{ background: $--color-20; color: #FFF;}
	// 	&.light>i{ color:$--color-20;}
	// }
	&.bg21{
		&>i{ background: $--color-21; color: #FFF;}
	}
	&.bg22{
		&>i{ background: $--color-22; color: #FFF;}
	}
	&.bg23{
		&>i{ background: $--color-23; color: #FFF;}
	}
	&.bg24{
		&>i{ background: $--color-24; color: #FFF;}
	}
	&.bg25{
		&>i{ background: $--color-25; color: #FFF;}
	}
	&.bg26{
		&>i{ background: $--color-26; color: #FFF;}
	}
	&.bg27{
		&>i{ background: $--color-27; color: #FFF;}
	}
	&.bg28{
		&>i{ background: $--color-28; color: #FFF;}
	}
	&.bg29{
		&>i{ background: $--color-29; color: #FFF;}
	}
}

.textnumbox{
	padding: 10px 15px; border-radius:$-textnumbox-radius; position:relative;
}