
.search-input
	display inline-block
	vertical-align top
	width 100%
	height 30px
	padding 0 10px 0 30px
	border none
	font-family 'ProximaNova-Semibold'
	color darkgray
	font-size 11px
	-webkit-font-smoothing antialiased
	box-sizing border-box
	&:focus
		outline none
		color darkpurple

.button
	display inline-block
	vertical-align top
	font-smoothing antialiased
	border-radius 2px
	cursor pointer
	font 14px/35px 'ProximaNova-Semibold'
	padding 0 15px
	&.inactive
		cursor default
		opacity .6

.green-button,
.large-green-button
	@extends .button
	background #0055FF
	opacity 1
	text-shadow 1px 1px #002673
	color #fff
	&:hover
		background #0040C1

.purple-button
	@extends .button
	background linear-gradient(top,#c685d2 0%,#9854a5 100%)
	color white
	text-shadow 0 1px litepurple
	&:hover
		background linear-gradient(top,lighten(#c685d2, 15%) 0%,lighten(#9854a5, 5%) 100%)

button
	&.green-button
		border 0 none
		box-sizing content-box
		font-family 'ProximaNova-Semibold'

.green-button
	height 35px
	padding 0 14px
	font-size 14px
	line-height 36px
.dark-button
	@extends .green-button
	background darkpurple
	background linear-gradient(top,#6d616f ,#5f5561)
	text-shadow 0 1px darkpurple
	transition background .25s ease
	&:hover
		background linear-gradient(top,lighten(#6d616f, 10%) , lighten(#5f5561, 10%))

.button--w-icon
	padding-left 48px
	position relative
	white-space nowrap
	&:after
		content ""
		position absolute
		top 0
		bottom 0
		left 22px
		width 18px

.button--icon-right
	@extends .button--w-icon
	padding-left 14px
	padding-right 48px
	&:after
		left auto
		right 12px

.edit-btn:before
	content "⇙"
	display inline-block
	font 12px/35px 'BlogvioEditor'
	margin-right 5px

// uppercase button
.button--uc
	text-transform uppercase

.large-green-button
	height 50px
	line-height 50px
	font-size 18px

.large-green-button-v-wide
	display block
	text-align center

.dim-button
	@extends .button
	background #665b68
	background linear-gradient(top,rgba(255,255,255,0.07),rgba(0,0,0,0.07)) #665b68
	color #fff
	text-shadow 0 1px #7c6e7e
	&:hover
		background #7c6e7e

.icon-btn
	cursor pointer
	font-size 14px
	color darkpurple
	text-transform uppercase
	font-smoothing antialiased
	.icon
		display inline-block
		vertical-align middle
		margin-right 8px
	.label
		display inline-block
		vertical-align middle
		height 12px
		line-height 14px
		transition color .2s ease
	&:hover
		.label
			color litepurple

/*************/

.general-input
	display block
	position relative
	width 100%
	height 35px
	padding 0 13px
	font-family 'ProximaNova-Semibold'
	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

/**************/

input[type=checkbox]
	display inline-block
	vertical-align middle
	opacity 0
	width 20px
	height 20px
	cursor pointer
	&:hover + .custom-checkbox
		background-position -40px 0
	&:checked + .custom-checkbox
		background-position -20px 0
	&:checked:hover + .custom-checkbox
		background-position -60px 0

.custom-checkbox
	display inline-block
	vertical-align middle
	width 20px
	height 20px
	margin-left -20px
	background url('img/custom-checkbox-sprite.png') 0 0

.checkbox-label
	display inline-block
	vertical-align top
	margin-left 8px
	font-size 14px
	line-height 36px
	color darkpurple
	-webkit-font-smoothing antialiased
	cursor pointer

.checkbox-container
	display inline-block
	vertical-align top
	&:before
		display inline-block
		vertical-align middle
		height 100%
		content " "
