.font-family, .font-size
	display inline-block
	vertical-align top
	line-height 33px

.font-family
	width 197px
	cursor pointer
	position relative

.font-family-icon
	pointer-events none
	display inline-block
	absolute top 5px right 5px
	width 24px
	height 24px
	background url('img/content/with-control-text.png') center center no-repeat
	border-radius 2px

.control.font-size
	width 143px
	padding-bottom 0
	margin-right 10px
	.input-spinner input
		text-align center
	.font-popup &
		width 80px
		.input-spinner input
			padding 2px 10px 0 13px
			text-align left
		.spinner-button
			display none

.font-popup
	z-index 9
	height 314px
	relative top left
	width 245px
	border 1px solid mediumgray
	box-shadow 0 0 0 2px #f0f0f0
	border-radius 2px
	background white
	box-sizing initial

.search-input-control
	position relative

.clear-search-input
	display none
	absolute top right
	height 28px
	width 28px
	line-height 32px
	text-align center
	font-size 10px
	cursor pointer
	color darkgray
	margin 1px
	&:hover
		color darkpurple

.search-icon
	content ""
	display inline-block
	absolute top 1px left 1px
	width 30px
	height 28px
	background url('img/search-icon-sprite.png') 0 0 no-repeat

.search-input-control .search-input
	width 225px
	border-radius 2px
	border 1px solid litegray
	font-size 12px
	&:focus
		box-shadow 0 0 0 2px #f0f0f0
		& + .search-icon
			background-position -30px 0

.font-popup-wrapper
	padding 10px

.font-family-text
	font-family 'ProximaNova-Regular'
	color darkgray

.font-list-wrapper
	height 223px

.font-list
	height 190px
	margin-top 1px
	padding-left 10px

.font-list .scroll-pane
	&, .controls &
		top 3px
		bottom 3px
		margin-right 0px

.font-item
	display block
	line-height 32px
	cursor pointer
	height 32px
	opacity 0
	transition opacity .1s ease
	&.loaded
		opacity 1
	&:hover .font-family-text
		color darkpurple
	&.no-result
		pointer-events none		
		display none

.font-family-select
	display none
	&:checked + .font-family-text
		color darkpurple

.font-footer
	height 60px
	margin 0 -10px -10px
	padding 10px 20px
	background #fafafa
	border-top 1px dashed mediumgray

.control.font-size
.control.font-weight
	display inline-block
	.control-label
		line-height 16px
		font-size 14px

.font-footer .control.font-size
	margin-right 15px

.control.font-weight
	width 110px
	margin 0
	padding 0

.no-size-input
	.font-size.control
		display none
		&+.control-input.font-family, &+.control.font-weight
			width 100%