// -------------
// FORM 
// -------------

$input-padding       : em(10px);
$input-border-style  : 1px solid;
$input-border-color  : $passive-color;

$input-border        : $input-border-style $input-border-color;
$input-border-hover  : $input-border-style darken($input-border-color, 10%);
$input-border-focus  : $input-border-style $main-color;

$prefix-bg-color     : $passive-color;

@mixin input() {
	[type="text"],
	[type="password"],
	[type="date"],
	[type="datetime"],
	[type="datetime-local"],
	[type="month"],
	[type="week"],
	[type="email"],
	[type="number"],
	[type="search"],
	[type="tel"],
	[type="time"],
	[type="url"],
	select,
	textarea {
		@content;
	}
}

// Style for generic input
@mixin form-input($padding: $input-padding) {
	width: 100%;
	outline: none;
	padding: $input-padding;
	border: $input-border;
	border-top: $input-border-style darken($input-border-color, 5%);

	&:hover {
		border: $input-border-hover;
		@include box-shadow(inset 0 0 3px $input-border-color);
	}

	&:focus {
		border: $input-border-focus;
		@include box-shadow(inset 0 1px 2px rgba(black, 0.2));
	}
}

// Style for label
@mixin form-label($padding: $input-padding, $bg-color: $prefix-bg-color) {
	display: block;
	line-height: normal;
	padding-top: $padding;
	padding-bottom: $padding;
	border: $input-border-style transparent; // to make it vertically centered
	
	&.prefix,
	&.postfix {
		border: $input-border-style $bg-color;
		border-top: $input-border-style darken( $input-border-color, 5% );
		text-align: center;
		color: contrast-color($bg-color, #333, white, 60%);
		background: $bg-color;
		overflow: hidden;
	}

	&.prefix {
		border-right: none;
	}

	&.postfix {
		border-left: none;
	}
}

// Disable unnecessary default styling from browser
@mixin form-disable-default() {
	// Disable Chrome's datepicker
	input::-webkit-calendar-picker-indicator{
		display: none;
	}

	input[type="date"]::-webkit-input-placeholder{ 
		visibility: hidden !important;
	}
}

@if $include-form {

/* ---------------
EDGE Form
--------------- */

@include input {
	@include form-input();
}

label {
	@include form-label();
}

@include form-disable-default();

} // $include-form