/////////////////////
// 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;
	}
	.font-style,
	.font-family,
	.font-size,
	.font-weight,
	.line-height,
	.letter-spacing {
		width: 120px;
		display: inline-block;
		h5 {
			margin-bottom: .5em;
		}
		.dashicons {
			width: 30px;
			float: left;
			line-height: 25px;
			color: rgba(0,0,0,.2);
		}
	}
	.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%;
		.select2-container {
			min-width: calc(100% - 30px) !important;
			width: calc(100% - 30px) !important;
			float: left;
		}
	}
	.font-size {
		width: 150px;
		input {
			width: 60px;
		}
		select {
			width: 50px;
			min-width: 50px;
		}
	}
	.font-weight {
		select {
			width: 70px;
		}
	}
	.line-height {
		width: 100px;
		input {
			width: 60px;
		}
	}
	.letter-spacing {
		width: 150px;
		input {
			width: 60px;
		}
		select {
			width: 50px;
			min-width: 50px;
		}
	}
}