.control-input
	display block
	position relative
	width 100%
	height 35px
	padding 0 13px
	font-family 'ProximaNova-Semibold',Helvetica,sans-serif
	font-size 14px
	color darkgray
	font-smoothing antialiased
	border-radius 2px
	border 1px solid mediumgray
	box-sizing border-box
	background #fff
	appearance none
	&:hover
		border-color #c8c8c8

.control
	position relative
	&:hover
		.control-help, .control-edit-btn
			opacity 1
			visibility visible
			.content-browser &
				opacity 0
				visibility hidden

.control.control--restricted > *:not(.control-upgrade)
	opacity .4
	pointer-events none
	user-select none

.control.control--restricted > .control-help
	display none

.control-upgrade
	position absolute
	top 0
	right 0
	color #ec574d
	text-decoration underline
	text-decoration-skip ink
	font-weight normal
	font-size 13px

.control-label
	display block
	line-height 20px
	margin-bottom 5px
	font-family 'ProximaNova-Regular',Helvetica,sans-serif
	user-select text
	color darkpurple
	-webkit-font-smoothing antialiased

.control-edit-btn
	display inline-block
	absolute top -2px right
	opacity 0
	visibility hidden
	transition opacity .2s ease, visibility .2s ease,color .2s ease
	.control-help + &
		right 27px

.control-help
	position absolute
	top 0
	right 0
	z-index 2
	width 20px
	height 20px
	font-size 20px
	opacity 0
	visibility hidden
	transition opacity .2s ease, visibility .2s ease,color .2s ease
	cursor pointer
	color #c8c8c8
	&:hover
		color darkgray
	&:before
		@extend [data-icon]:before
		content "?"
html.isTouch .control-help
	opacity 1
	visibility visible

.general-help-tooltip.image-tooltip
	padding 2px
	border-radius 4px
.tooltip-image
	width 150px
	display inline-block
	vertical-align middle
	border-radius 2px
