.input
{
    /*
        Remove inner shadow for iOS. If ommited, must define background-image
        to prevent UA default
    */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;

    border: $input_border_sizepx solid $input_border_color;

    /* undo iOS default border radius */
    -moz-border-radius: $input_border_radius_px;
    -webkit-border-radius: $input_border_radius_px;
    border-radius: $input_border_radius_px;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    display: block;

    font: 1em/$input_line_height $input_font_family;

    padding: $input_padding_em;

    width: 100%;
}

/*
    Some .input elements are displayed next to
    submit btns and the following rule helps control
    the vertical spacing/heights in a cross browser way.

    Do not apply to textareas!
*/
input.input
{
    height: $input_height_em;

    padding: 0 $input_padding_em; /* reset .input */
}

.input--dark
{
    border-color: $input_border_color_dark;
}

.input--fancy
{
    /* get rid of focus flash on iOS */
    -webkit-tap-highlight-color: transparent;
}

/* hide ugly down arrow on IE10+ */
select.input--fancy::-ms-expand
{
    display: none;
}

.input--fancy:hover,
.input--fancy:focus
{
    background-color: $input_fancy_background_color;
    border-color: $input_fancy_border_color;
    outline-color: $input_fancy_outline_color;
}

/*
	required variables:
		$input_height
*/

.input-invalid,
.input-invalid-block
{
	background-color: #FFDFDF;

	padding: .8em;
}

.input-invalid
{
	font-weight: bold;

	/* offset padding so that neighboring elements do not shift */
	margin: -.8em 0;

	/* for tooltip*/
	position: relative;

	/* IE7 bug: invoke hasLayout */
	*zoom: 1;
}

.input-tooltip
{
	background-color: #FFF;
	border: 1px solid #CCC;

	bottom: $input_height + .8em;

	-moz-box-shadow: 0 0 7px 0 #CCC;
	-webkit-box-shadow: 0 0 7px 0 #CCC;
	box-shadow: 0 0 7px 0 #CCC;

	display: none;

	font-weight: normal; /* reset .input-invalid */

	padding: 7px;
	position: absolute;

	right: .8em;
}

.input-invalid:hover          > .input-tooltip,
.input-invalid > .input:focus + .input-tooltip
{
	display: block;
}

.input-arrow
{
	/* triangle height + border */
	bottom: -8px;

	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid #C0C0C0;

	left: 7px;

	position: absolute;

	height: 0;
	width: 0;
}

/*
	Prevent input:focus zooming on mobile devices
	
	@link http://mydevice.io/devices/
	NOTE: largest width and height for smartphones and phablets
*/
@media
	only screen and ( max-width: 504px ) and ( orientation: portrait  ),
	only screen and ( max-width: 768px ) and ( orientation: landscape )
{

	.input
	{
		font-size: 1rem;
	}

	.input-tooltip
	{
		bottom: calc( 1rem * $input_height /*nop*/ + /*nop*/ .8em );
	}

}