/**
 * Forms
 *
 * Description: Styles for forms.
 * Version: 1.0.8
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Label
 * 2.0 - Fieldset & legend
 * 3.0 - Textfields, textareas & selects
 * 4.0 - Checkboxes & radio buttons
 * 5.0 - Input search
 *   5.1 - Input search (responsive)
 *   5.2 - Number of search results
 * 6.0 - Search form
 * 7.0 - Input date
 * 8.0 - Validation
 * 9.0 - EpiServer Forms
 *   9.1 - EpiServer Forms (responsive)
 * 10.0 - Xforms
 * 11.0 - Episerver forms custom
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Label
 * -----------------------------------------------------------------------------
 */

label, .form__label--invalid {
	display: block;
	@include font-size($p-small-sizes);
	font-weight: normal;

	&.error, &.form__label--invalid {
		font-size: 0.8em;
		color: #CC0000;
	}
}

legend + .form__label--invalid {
	margin-top: -$margin-standard / 2;
	margin-bottom: $margin-standard / 2;
}

.form-item, .form-group, .form__item {
	margin-bottom: $margin-standard * 0.75;
}

.form-group {
	margin-top: $margin-standard  / 2;
	margin-bottom: $margin-standard;

	> .option-select {
		margin-bottom: $margin-standard / 3;
	}
}



/**
 * 2.0 - Fieldset & legend
 * -----------------------------------------------------------------------------
 */

fieldset {
	padding: 0;
	margin: 0;
	border: 0;

	legend {
		display: block;
		width: 100%;
		padding: 0;
		margin-bottom: 1em;
		font-size: 1em;
		line-height: 2em;
		border: 0;
		border-bottom: 1px solid $grey;
		font-weight: bold;
	}
}



/**
 * 3.0 - Textfields, textareas & selects
 * -----------------------------------------------------------------------------
 */

input[type='text'], input[type='search'], input[type='url'], input[type='email'], input[type='number'], input[type='tel'], textarea, select {
	border: 2px solid $grey-dark;
	//border-radius: $border-radius;
	width: 100%;
	padding: em(10px) em(11px) em(8px);

	&:focus {
		border-color: $grey-darker;
		outline: 0;
		@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 13px rgba(0, 0, 0, 0.3));
	}
	
	&:active {
		outline: 0;
	}

	&:required:invalid, &:required:focus:invalid {
		background: url(../../img/thin-221_alert_attention_error.svg) no-repeat right 10px center #fff; 
		background-size: 20px;

		&.datepicker {
			background-position: right 40px center;
		}
	}

	&.error, &:invalid, &.form__field--invalid {
		background-color: #edd4d4; 
		@include box-shadow(none);
	}

	&.form__field--invalid {
		background: #edd4d4 !important;

		&:focus {
			border-color: $red-dark;
			@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 13px lighten(#e28281, 20%));
		}
	}

	&.error:focus, &:focus:invalid {
		@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 13px rgba(0, 0, 0, 0.3));
	}

	&:required::-ms-clear {
		margin-right: 20px;
	}

	&:required:valid {
		background: url(../../img/thin-254_check_ok_done_success.svg) no-repeat right 10px center #fff; 
		background-size: 20px;

		&.datepicker {
			background-position: right 40px center;
		}
	}
}

input[type="file"] {
	@include font-size($p-small-sizes);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
input[type="number"] {
  -moz-appearance:textfield;
}

textarea {
	resize: none !important;
}


/**
 * 4.0 - Checkboxes & radio buttons
 * -----------------------------------------------------------------------------
 */

input[type='radio'], input[type='checkbox'] {
	vertical-align: baseline;
	line-height: 1em;
	margin-bottom: $margin-standard / 4;
	margin-right: em(5px);

	+ label {
		display: inline-block;
		font-weight: normal;
		padding-left: 0.3em;
		padding-top: em(2px);
		vertical-align: top;
		line-height: 1em;
	}
}
/*html.lt-ie8 {
	input[type='radio'], input[type='checkbox'] {
		+ label {
			display: inline; zoom: 1;
		}
	}
}*/



/**
 * 5.0 - Input search
 * -----------------------------------------------------------------------------
 */

.input-search {
	position: relative;

	&:before {
		$font-size: 30px;
		@include huddingeIcons();
		content: "\e901";
		font-size: em($font-size);
		color: $grey-dark;
		position: absolute;
		top: em(14px, $font-size);
		left: em(14px, $font-size);
	}
	
	input[type="text"], input[type="search"] {
		width: 100%;
		padding: em(14px) em(15px) em(12px) em(50px);
		margin: 0;
	}
}


/**
 * 5.1 - Input search (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.input-search {
		&:before {
			display: none;
		}

		input[type="text"], input[type="search"] {
			padding-left: em(15px);
		}
	}
}



/**
 * 6.0 - Search form
 * -----------------------------------------------------------------------------
 */

.search-number-of-results {
	border-bottom: 1px solid $grey-light;
	margin: 0 0 1px;
	padding: em(16px) 0 em(21px);
}

.facets-counter {
	position: absolute;
	@include font-size($p-small-sizes);
	top: em(8px, getFontsize($p-small-sizes, null));
	right: em(10px, getFontsize($p-small-sizes, null));
	color: $grey-darker;
	padding-right: em(10px);
}

.form-group.is-hidden-nojs .option-select .options-container label {
	position: relative;
	padding-right: em(50px);
}



/**
 * 7.0 - Input date
 * -----------------------------------------------------------------------------
 */
.input-date {
	position: relative;

	.btn-datepicker {
		$font-size: 26px;

		font-size: em($font-size);
		position: absolute;
		top: em(2px, $font-size);
		right: em(2px, $font-size);
		color: $text-color;
		z-index: 10;
		
		padding: em(6px, $font-size) em(8px, $font-size) em(5px, $font-size);

		&:focus {
			outline: none;
		}
	}
}



/**
 * 8.0 - Validation
 * -----------------------------------------------------------------------------
 */

.field-validation-error {
	font-size: 0.85em;
	color: #CC0000;
}

.field-validation-info {
	font-size: 0.85em;
	color: $grey-darker;
}



/**
 * 9.0 - EpiServer Forms
 * -----------------------------------------------------------------------------
 */

.EPiServerForms {
	.Form__Element {
		margin-bottom: $margin-standard * 0.75;
	}
	.Form__Element__Caption {
		margin-bottom: $margin-standard / 4;
		display: block;
	}
	.FormCaptcha__Refresh {
		@extend .btn-text;
		padding: em(5px);
	}
	.FormCaptcha__Image {
		margin-bottom: $margin-standard / 4;
	}
	.FormCaptcha__Input {
		width: 50%;
	}
	.FormChoice--Image__Item {
		margin-bottom: $margin-standard / 2;

		img {
			display: block;
			max-width: 50%;
			padding-top: $margin-standard / 4;
		}
	}
	.Form__Element__Caption {
		@extend label;
	}

	.Form__Status {
		.Form__Status__Message.Form__Warning__Message {
			@extend .alert;
			@extend .alert-small;
			@extend .alert-pink;
			margin-top: $margin-standard !important;
			margin-bottom: $margin-standard !important;
		}
	}

	fieldset {
		label {
			display: inline-block;
			margin-right: $margin-standard / 2;
		}
		&.orientationVertical {
			label {
				display: block;
				margin-right: 0;
			}
		}
	}
}


/**
 * 9.1 - EpiServer Forms (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.EPiServerForms {
		.FormCaptcha__Input {
			width: 100%;
		}
	}
}



/**
 * 10.0 - Xforms
 * -----------------------------------------------------------------------------
 */

.form-xform {
	margin: $margin-standard / 4 0 $margin-standard;

	fieldset {
		label {
			display: inline-block;
			margin-right: $margin-standard / 2;
		}
		&.orientationVertical {
			label {
				display: block;
				margin-right: 0;
			}
		}
	}
}


/**
 * 11.0 - Episerver forms custom
 * -----------------------------------------------------------------------------
 */
.form {
	&__headline {
		@include font-size($h2-sizes);
	}

	&__status {
		@extend .alert;
		@extend .alert-small;

		&.form__status--success {
			@extend .alert-green;
		}

		&.form__status--error {
			@extend .alert-pink;
			font-size: em(18px);
		}
	}

	&__loader {
		@include huddingeIcons();
		@extend .anim-spin;
		@extend .icon-spinner3;
		margin-right: $margin-standard / 3;
	}
	
	&__section {
		&--hidden {
			display: none;
		}
		
		&__headline {
			@include font-size($h3-sizes);
			margin-bottom: $margin-standard / 2 !important;
		}
	}

	&__fields-holder--hidden {
		display: none;
	}
	
	&__hidden-fields {
		display: none;
	}

	&__button--reset {
		@extend .btn-grey;
	}

	&__rte {
		h1, .h-headline {
			@include font-size($h2-sizes);
		}

		h2, .h-subheadline {
			@include font-size($h3-sizes);
		}

		h3, .h-byline {
			@include font-size($h4-sizes);
		}

		h4, .h-standfirst {
			@include font-size($h5-sizes);
		}

		h5, .h-related {
			@include font-size($h6-sizes);
		}
	}
}