/////////////////////
// typography controls
/////////////////////
.customize-control-typography {
	.wrapper {
		-webkit-box-shadow:inset 0 0 10px 0 rgba(0,0,0,.1);
		box-shadow:inset 0 0 10px 0 rgba(0,0,0,.1);
		padding: 10px;
		border-radius: 3px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.font-style {
		width: 100%;
		.bold,
		.italic,
		.underline,
		.strikethrough {
			display: inline-block;
		}
		input[type="checkbox"] {
			display: none;
			&:checked + .dashicons {
				background: #3498DB;
				color: #fff;
			}
		}
		.dashicons {
			border-radius: 50%;
			padding: 10px;
			width: 20px;
			height: 20px;
			line-height: 20px;
			color: #777;
		}
	}
	.font-family {
		width: 100%;
	}
	.font-size,
	.font-weight,
	.line-height,
	.letter-spacing {
		width: 48%;
		h5 {
			width: 100%;
			margin: 10px 0 7px 0;
		}
	}
	.font-size,
	.letter-spacing {
		display: flex;
		flex-wrap: wrap;
		input[type="number"] {
			width: 50%;
			height: 36px;
		}
		.selectize-control.single {
			width: 50%;
			> .selectize-input {
				height: 36px;
			}
		}
	}
	.font-weight {
		.selectize-control.single {
			width: 100%;
			> .selectize-input {
				height: 36px;
			}
		}
	}
	.line-height {
		input[type="number"] {
			width: 100%;
			height: 36px;
		}
	}
}