$form-element-border: #efefef;
$form-element-background: #f7f7f7;

@mixin form {

	div {
		@extend %border-box;
	}

	// labels
	label {
		@extend %border-box;
		display: inline-block;
		padding: 1em 0;
	}

	// text releted inputs
	input[type="text"],
	input[type="email"],
	input[type="password"],
	textarea {
		@extend %border-box;

		width: 100%;
		border: 1px solid $form-element-border;
		background: $form-element-background;
		padding: 1em 0.75em;
	}

	input[type="text"]:focus,
	input[type="email"]:focus,
	input[type="password"]:focus,
	textarea:focus {
		outline: 0;
		background: darken($form-element-background, 2%);
		border: 1px solid darken($form-element-border, 2%);
		transition: all 0.3s ease;
	}

	// textarea
	textarea {
		height: 5em;
	}

	// radios and checkboxes
	input[type="checkbox"],
	input[type="radio"] {
	    display: none;
	}
	input[type="checkbox"] + label,
	input[type="radio"] + label {
		cursor: pointer;
		padding: 0.7em 0;
		margin-right: 1em;
	}

	input[type="checkbox"] + label:before,
	input[type="radio"] + label:before {
		content: "\00a0";
		border: 1px solid $form-element-border;
		background: $form-element-background;
		display:inline-block;
		width: 1.5em;
		line-height: 1.5em;
		margin-right: 0.5em;
	    vertical-align: middle;
	    padding: 0;
	    text-align: center;
	}


	input[type="checkbox"] + label:before {
		@include border-radius($radius);
	}
	input[type="radio"] + label:before {
		@include border-radius(50%);
	}

	input[type="checkbox"]:checked + label:before {
		content: "\2713";
	}

	input[type="radio"]:checked + label:before {
		content: "\25CF";
	}

	// select
	select {
		@extend %border-box;
		height: 3em;
		border: 1px solid $form-element-border;
		padding: 1em 0.75em;
		text-indent: 0.5em;
	    cursor:pointer;
	    width: auto;

	   -webkit-appearance:menulist-button;
	   -moz-appearance:menulist-button;
	    appearance:menulist-button;
	}
}
