/* natUIve  – Form */

@import 'natuive-setup';

form {
	
	overflow: hidden;
	position: relative;
	
}

	form > * {
		
		clear: both;
	
	}
	
	input[type=submit], label, form .checkbox span, form label > span {
		
		font-size: $font-size;
		line-height: $line-height;
	// 	line-height: var(--line-height);
		min-height: $line-height-em;
	// 	min-height: var(--line-height-em);
	
	}
	
	input[type=submit], form button, input[type=submit], form .file-input, form .file-input span {
		
		line-height: $line-height * 2;
	// 	line-height: calc(var(--line-height) * 2);
		min-height: $line-height-em * 2;
	// 	min-height: calc(var(--line-height-em) * 2);
		
	}

	form span { /* When used as a wrapper for inline checkboxes */
		
		display: inline-block;
		vertical-align: middle;

	}

	#content form, .banner form {
		
		padding-top: $line-height-em;
// 		padding-top: var(--line-height-em);
		overflow: hidden;

	}

	label {
		
		display: inline-block;
		font-weight: bold;
		max-width: 100%;
		position: relative;
		padding: 0;
		margin: 0 0 $line-height-em 0;
// 		margin: 0 0 var(--line-height-em) 0;
		min-height: $line-height-em*2;
// 		min-height: calc(var(--line-height-em)*2);

	}
	
	form.wide label {
		
		width: 100%;

	}
	
	label > input {
		
		margin-top: -$line-height-em/2;
	// 			margin-top: calc(-var(--line-height-em)/2);
	
	}

	input[type=submit] {
		
		height: auto;
		line-height: $line-height;
// 		line-height: var(--line-height);
		white-space: normal;
		word-break: break-all;
		margin-bottom: 0;

	}
	
	form.sticky-submit input[type=submit] {
		
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);

	}

	form.wide input[type=submit] {

		margin-bottom: calc(#{$line-height-em} - 2px); /* fix for the failed box-sizing: border-box */
// 		margin-bottom: calc(var(--line-height-em) - 2px); /* fix for the failed box-sizing: border-box */
		min-height: calc(#{$line-height-em}*2 + 2px);
// 		min-height: calc(var(--line-height-em)*2 + 2px);
		
	}
	
	input, select, textarea, input[type=search], form button {
		
// 		background: #eee;
		background-color: rgba(0, 0, 0, .1);
		font-family: inherit;
		display: inline-block;
		overflow: hidden;
		resize: none;
		vertical-align: top;
		border-radius: 0;
		padding: 0 $line-height-em/2;
// 		padding: 0 calc(var(--line-height-em)/2);
		min-height: $line-height-em * 2;
// 		min-height: calc(var(--line-height) * 2em);
		border: 0;
		font-size: 1em;
		width: 100%;
		outline: none;
		border: 1px dotted transparent;
		color: inherit;

	}

	input[type=text], input[type=email], input[type=url] {
		
// 		padding-top: 1px;

	}
	
	input:focus, select:focus, textarea:focus {
		
		border-color: #bbb;
		
	}


	form .checkbox span {
		
		display: inline-block;
		font-weight: bold;
		margin-top: 0;
		cursor: default;

	}
	
	.checkbox label {
		
		text-align: start;
		font-weight: normal;
		clear: right;
		margin: 0;
		cursor: pointer;
		min-height: 0;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		
	}
	
	form .checkbox {
	
		clear: both;
		min-height: $line-height-em;
	// 		min-height: var(--line-height-em);
		margin-bottom: $line-height-em;
	// 		margin-bottom: var(--line-height-em);
	
	}
	
	form .checkbox:after {
		
		content: '';
		display: block;
		clear: both;
	
	}
		
	form .checkbox label span {
		
		width: auto;
	
	}
	
	form .mandatory span.checkbox:before, form .mandatory span.tip:after, select::-ms-expand {
	
		display: none;
		
	}
	
	form input[type=submit], form button {
		
		margin-right: 0;
		min-width: 50%;
		max-width: 100%;
		padding: 0 1em;
		margin-top: 0;
		
	}
	
	form textarea {
		
		display: block;
		margin: -$line-height-em/2 0 $line-height-em/2 0;
// 		margin: calc(-1*var(--line-height-em)/2) 0 calc(var(--line-height-em)/2) 0;
		border-bottom: 1px dotted transparent;
		min-height: $line-height-em * 3;
// 		min-height: calc(var(--line-height-em) * 3);
		padding-top: $line-height-em/2;
	
	}

	form .mandatory {
		
		position: relative;
		
	}

	form .mandatory:before {
		
		content: '*';
		color: #a00;
		position: absolute;
		top: 0;
		font-weight: bold;
		
	}

	form .mandatory.alert span, form .mandatory.alert p {
		
		background: #666;
		color: #eee;
		
	}

	form .mandatory.alert span.checkbox {
		
		background: transparent;
		color: #555;
		
	}

	form .mandatory.alert span.tip {
		
		background: #222;
		
	}
	
	form select {
		
		-moz-appearance: none;
		text-indent: 0.01px;
		text-overflow: '';
		min-height: 0;
		width: 100%;
		text-indent: 0px;
		padding: 0 1.6em 0 .8em;
		height: $line-height-em * 2;
// 		height: calc(var(--line-height-em) * 2);
		white-space: nowrap;
		-webkit-appearance: none;
		appearance: none;
		font-family: inherit;
	    text-indent: -1px;
	    text-overflow: '';	
	    margin: 0;
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC");
		background-repeat: no-repeat;
		background-position: calc(100% - 1em) 50%;
		text-indent: 1px;
	
	}
	
	form.wide select {
		
		height: $line-height-em * 2;
		// 		height: calc(var(--line-height-em) * 2);
		margin: -$line-height-em/2 0 $line-height-em/2 0;
		// 		margin: calc(-1*var(--line-height-em)/2) 0 calc(var(--line-height-em)/2) 0;
		
	}
	
	[dir=rtl] form select {
		
		padding-left: 0;
		padding-right: .8em;
	
	}

	form select, form .file-input {

		vertical-align: top;
		border: none;
		overflow: hidden;
		margin-left: 0;

	}
	
	form select option {
		
		padding: 0 1.5em 0 0;

	}
	
	select:hover {
		
		cursor: pointer;
		
	}

	form .checkbox label:first-of-type { /* To do: not needed when checkboxes are inline */
		
// 		margin-top: $line-height-em/2;
// 		margin-top: var(--line-height-em);
		
	}

	:root form .checkbox label { /* Not IE9 */

		padding-left: 0;
		padding-bottom: 0;

	}
	
	form .checkbox label + label {
		
		margin-top: 0; 

	}

	form .checkbox label:last-child {
		
		margin-bottom: $line-height-em;
// 		margin-bottom: var(--line-height-em);

	}
	
	.checkbox-icon {
		
		width: 1em;
		height: 1em;
		display: inline-block;
		background: #eee;
		margin-top: 0;
		line-height: ($line-height + 1)*(2/3);
// 		line-height: calc((var(--line-height) + 1)*(2/3));
		font-size: ($line-height - 2)*(2/3);
// 		font-size: calc((var(--line-height) - 1)*(2/3));
		text-align: center;
		color: #333;
		margin-right: .5em;
		display: none;
		border: 1px dotted transparent;
		border: none;

	}

	input[type=checkbox] + .checkbox-icon:before {
		
		content: '✓';
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		width: 1em;
	
	}

	:root .checkbox-icon { /* Not IE8 */

		display: inline-block;
		vertical-align: middle;

	}

	input[type=checkbox]:checked + .checkbox-icon:before {
		
		opacity: 1;
	
	}

	input[type=checkbox], input[type=radio] {
		
		-webkit-appearance: none;
		-moz-appearance: window;
		-ms-appearance: none;
		position: absolute;
		background: transparent;
		cursor: pointer;
		opacity: 0;
		padding: 0;
		border: 1px dotted transparent;
		left: 0;
		outline: none;
		float: left;
		width: auto;
		min-height: 0;
		opacity: 0;
		margin: 0 .5em 0 -1.5em;

	}

	input[type=checkbox], input[type=radio] {
		
		float: right;

	}
	
	input[type=radio] + .checkbox-icon {
		
		border-radius: 50%;
		position: relative;

	}

	input[type=radio]:checked + .checkbox-icon:before {
		
		content: '';
		position: absolute;
		background: #333;
		top: 25%;
		right: 25%;
		bottom: 25%;
		left: 25%;
		border-radius: 50%;

	}

	input[type=checkbox]:focus + .checkbox-icon, input[type=radio]:focus + .checkbox-icon {
		
		border: 1px dotted #666;

	}

	input[type=file] {
		
		position: absolute;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		cursor: pointer;
		z-index: 1;
		text-indent: -100%;
		top: 0;
		bottom: 0;
		background: transparent;
		padding-left: 200%;
		font-size: 0;
		margin-top: 0;
		background: transparent;

	}
	
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE10 */
	
		input[type=file] {
			
			margin-left: -100%;

		}
	
	}
	
	form .file-input {

		font-weight: normal;
		margin: 0 0 $line-height-em 0;
// 		margin: calc(-1*var(--line-height)/2) 0 calc(var(--line-height)/2) 0;
		cursor: pointer;
		font-style: italic;
		padding: 0;
		
	}

	form .file-input span {

		text-align: start;
		white-space: nowrap;
		background: rgba(0, 0, 0, 0.1);
		z-index: 0;
		margin: 0;
		width: 100%;
		border: 1px dotted transparent;

	}
	
	input[type=file]:focus + span {
		
		border-color: #bbb;

	}

	input[type=search] {
	
	    -webkit-appearance: textfield;
	    border-radius: 0;
	
	}
	
	input[type=search]::-webkit-search-decoration,
	input[type=search]::-webkit-search-cancel-button {
	
	    -webkit-appearance: none;
	
	}

	form label, form label span, form .checkbox span {
		
		margin: 0;
		text-align: start;
		
	}
	
	form.wide label, form.wide label span, form.wide .checkbox span {
		
		display: block;
		width: 100%;
		
	}
	
	form span.file-input span {
		
		padding-left: .75em;
		line-height: $line-height-em;
		padding-top: $line-height-em/2;
		
	}
	
	form input, form select {
		
		display: inline-block;
		width: auto;
		padding-top: 0;
		margin: $line-height-em 0;
		vertical-align: middle;
		
	}
	
	form.wide input, form.wide textarea, form.wide select {
		
		display: block;
		width: 100%;
		margin: 0 0 $line-height-em 0;
// 		margin: 0 0 calc(var(--line-height-em) / 2) 0;
	
	}

	form textarea {
		
		padding-top: .85em;;
		
	}
	
	form input[type=submit] {
		
		width: auto;
		min-width: 0;
		padding: 0 1em;
// 		margin-top: $line-height-em/2;
// 		margin-top: calc(var(--line-height-em) / 2);

	}
	
	form .mandatory:before {
		
		left: auto;
		right: 0;

	}
	
	form .checkbox label:last-child {
		
		margin-bottom: 0;
		
	}
	
	form input[type=checkbox], form input[type=radio] {
		
		width: auto;
		margin-top: 0;
		
	}
	
	@-moz-document url-prefix() {

		form select { padding-left: 0; text-indent: .3em; }
		form select option { padding: 0; }
		input::-moz-focus-inner,
		button::-moz-focus-inner {
		  padding: 0;
		  border: 0;
		}
		input[type=text], input[type=email], input[type=url] { padding-top: 0; }
		form .file-input span { margin-top: -1px; }
		input[type=file] { 
			padding-left: 100%; 
			text-indent: -1em;
			margin-top: -$line-height-em; 
// 			margin-top: -var(--line-height-em); 
		}

	}

/* Mast form with labels/inputs on either side */

form.mast {
	
	padding-top: $line-height-em;
	padding-top: va(--line-height-em);
	
}

	form.mast label {
		
		float: left;
		margin-bottom: $line-height-em;
		width: 100%;
		
	}

	form.mast .checkbox label {
		
		margin: 0;

	}
	
	[dir=rtl] form.mast label {
		
		float: right;
	
	}

	form.mast label span {
		
		text-align: end;
		
	}
	
	form.mast label input, form.mast label textarea, form.mast label input[type=search], form.mast label button {
		
		width: 50%;
		float: right;
		margin: -$line-height-em/2 0 0 0;
		
	}
	
	[dir=rtl] form.mast input, [dir=rtl] form.mast select, [dir=rtl] form.mast textarea, [dir=rtl] form.mast input[type=search], [dir=rtl] form.mast button {
		
		float: left;
		
	}
	
	form.mast .mandatory:before {
	
		left: 47.5%;
	
	}
	
	[dir=rtl] form.mast .mandatory:before {
	
		right: 47.5%;
		left: auto;
	
	}
	
	form.mast label textarea {
		
		margin-bottom: $line-height-em/2;

	}
	
	form.mast select {
	
		width: 45%;
		margin-bottom: $line-height-em/2;
	
	}
	
	form.mast select, form.mast .file-input {
	
		width: 50%;
		margin-top: -$line-height-em/2;
	
	}
	
	form.mast label > span.file-input {
		
		margin-bottom: $line-height-em/2;
		padding: 0;
	
	}
	
	[dir=rtl] form.mast select {
	
		background-position: 1em 50%;
	
	}
		
	form.mast .checkbox label {
	
		width: 50%;
	
	}

	form.mast .checkbox span {
	
		text-align: end;
		float: left;
		padding-right: 3%;
		width: 50%;
	
	}
	
	[dir=rtl] form.mast .checkbox span {
		
		float: right;
		padding-right: 0;
		padding-left: 3%;
	
	}

	form.mast > label span {
		
		position: relative;
		display: inline-block;
		padding: 0 3% 0 0;
		float: left;
		width: 50%;
	
	}
	
	[dir=rtl] form.mast > label span {
		
		float: right;
		padding: 0 0 0 3%;
	
	}

	form.mast > label .file-input span {

		width: 100%;
		padding: calc(#{$line-height-em}/2 + .3em) 0 0 $line-height-em/2;
		line-height: $line-height-em/2;
		text-align: left;

	}
	
	form.mast .checkbox label {
		
		float: right;
	
	}

	[dir=rtl] form.mast .checkbox label {
		
		float: left;
		clear: left;
		
	}

	form .file-input span {
	
		padding: 0 0 0 .8em;
	
	}

	[dir=rtl] form.mast .file-input span {
	
		padding: 0 .8em 0 0;
	
	}
	
	form.mast input[type=submit], form.mast button {
		
		float: right;

	}

header form {
	
	display: inline-block;
	vertical-align: middle;

}

	header form noscript input[type=submit] {
		
		margin: 0;
		padding: 0;
		min-width: 0;
		min-height: 1em;

	}
	
	header form select {
		
		width: 100%;
		display: inline-block;
		margin: 0;

	}
	
