@border-color:var(--border-color);
@primary-textColor: var(--primary-text-color);
@second-textColor: var(--second-text-color);

.settings-container{
	height: 100%;
	display: flex;
	flex-direction: column;
	/* background-color: #ffffff;
	margin: 15px 20px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 2px #ccc; */
	// font-family: 'NotoSerif', '微软正黑体', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
	
	.settings-header{
		height: 70px;
		border-bottom: 1px solid @border-color;
		// border-bottom: 1px solid #909090;
		
		&-item{
			display: inline-block;
			height: 40px;
			line-height: 40px;
			margin-top: 15px;
			margin-left: 50px;
			color: @second-textColor;
			// color: #1E1F21;
			// color: #909090;
			cursor: pointer;
			
			&:first-child{
				margin-left: 20px;
			}
		}
		
		.active-item{
			font-size: 14px;
			color: @primary-textColor;
			font-weight: bold;
			// color:#1CC0F3;
			// color:#393b3c;
			border-bottom: 2px solid var(--tabs-bottom-color);
			// border-bottom: 2px solid #393b3c;
		}
	}
	
	.settings-body{
		height: calc(100% - 70px);
		
		.normal-settings{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			&-item{
				padding: 50px 0;
				display: flex;
				align-items: center;
				
				.item-title{
					font-size: 18px;
					font-weight: bold;
					color:@primary-textColor;
					margin-left: 10%;
					min-width: 10%;
				}
				
				.item-description{
					color:@second-textColor;
					min-width: 30%;
					margin-left: 10%;
				}
				
				.item-content{
					margin-left: 5%;
					display: flex;
					min-width: 30%;
					
					.color-item{
						position: relative;
						display: flex;
						width: 85px;
						height: 35px;
						background: #000;
						border: 3px solid #2b2b2e;
						cursor: pointer;
						
						&:last-child{
							margin-left: 20px;
							background: #fff;
						}
						
						&-active{
							border: 3px solid @primary-color;
							
							&::after{
								position:absolute;
								content:'';
								display:block;
								width:0;
								height:0;
								right: -10px;
								top:-10px;
								transform:rotate(135deg);
								border-width:10px;
								border-style:solid;
								border-color: transparent @primary-color transparent  transparent;
							}
							
							&::before{
								content:'';
								display:block;
								width:5px;
								height:8px;
								border-right:#ffffff solid 2px;
								border-bottom:#ffffff solid 2px;
								transform:rotate(35deg);
								position:absolute;
								top:0;
								right:0;
								z-index:2;
							}
						}
					}
				}
				
				.ivu-btn{
					width: 300px;
					height: 45px;
					background: @primary-color;
					color:#fff;
					border: none;
					margin: 0 auto;
					border-radius: 0;
				}
			}
		}
	}
}