$color = #6200EE

.input
	position relative

	*:not(input)
		display inline

	&:focus
		// Chrome outline on focus
		outline none

	&.inline
		display inline-block

		&:not(:last-of-type)
			margin-right 10px
	input, select
		display block
		border-radius 10px
		background-color #EEE
		border none
		color black
		padding 15px 20px
		margin 3px
		box-shadow inset 0 0 0 2px #BDBDBD
		transition-property background-color, box-shadow, border
		transition-duration 200ms
		transition-timing-function cubic-bezier(.2, 0, .6, 1)

		// Make input follow .input size
		width: inherit
		max-width calc(100% - 46px) // padding * 2 + margin * 2

		&::placeholder
			text-transform: lowercase
			color #666

		:disabled
			background-color #EFEFEF
			box-shadow none

		&:not([readonly]):not([disabled])

			&:hover
				background-color #DDD

			&:focus
				background-color #FFF
				box-shadow inset 0 0 0 2px $color, 0 0 0 3px rgba(204,204,204, .75)


	select
		-webkit-appearance none
		-moz-appearance none
		appearance none
		display inline-flex

	label
		text-transform uppercase
		margin auto
		font-weight 700

	.helper
		text-transform lowercase
		font-weight 300

	.status
		float right
		text-transform lowercase
		font-weight 300
		font-style italic

	// Icons
	i
		width 24px
		height 24px
		position absolute
		left 20px
		top 50%
		transform translateY(-50%)
		// pointer-events none
		color #666
		transition color 200ms cubic-bezier(.2,0,.6,1)

	select + i {
		pointer-events none
	}

	select option:hover
		box-shadow 0 0 10px 100px $color inset

	&.icon-right i
		left initial
		right 20px

	&.icon-left input,
	&.icon-left select
		padding-left 50px

	&.icon-right input,
	&.icon-right select
		padding-right 50px


	&.icon-right input, &.icon-left input,
	&.icon-right select, &.icon-left select
		max-width calc(100% - 76px)

	&.icon-right select, &.icon-left select
		max-width 100%

	input:focus:not([readonly]) + i,
	select:focus:not([readonly]) + i
		color $color

// Fix Firefox outline in selects
select:-moz-focusring
	color transparent
	text-shadow 0 0 0 #000