// COMPONENT : Forms

legend {
	display: block;
	color: $legend-text-color;
}

label {
	display: block;
	color: $label-text-color;
	font-weight: $label-font-weight;

	.hint {
		display: block;
		color: $label-hint-color;
		font-weight: $hint-font-weight;
		font-size: 0.85em;
	}
}

uniform-phone-number {
	display: inline-block;

	> span {
		text-align: left;
	}
}

uniform-phone-number input,
uniform-email input,
input {
	&[type="text"],
	&[type="email"],
	&[type="number"],
	&[type="url"],
	&[type="date"],
	&[type="time"],
	&[type="password"],
	&[type="file"],
	&[type="image"],
	&[type="tel"],
	&[type="email"],
	&[type="submit"],
	&[type="reset"],
	&[type="button"] {
		width: auto;

		font: {
			family: $textfield-font-family;
			weight: $textfield-font-weight;
			style: $textfield-font-style;
		}

		// Fix for Safari cursor-height bug
		line-height: normal;

		text-decoration: none;
		color: $textfield-text-color;

		background-color: $textfield-bg-color;
		border: 1px solid $grey-5;
		outline: none;

		// Submit buttons
		&.button {
			border: none;
		}

		// iOS Overrides
		-webkit-appearance: none;
		-webkit-border-radius: 0;
	  	border-radius: 0;

		// Placeholders
		// comma separated selectors do not work with placeholder.
		// https://stackoverflow.com/questions/44971077/why-do-comma-separated-placeholder-rules-not-get-applied-in-css

		&::-webkit-input-placeholder{
			color: $textfield-placeholder-color;
			font-family: $textfield-font-family;
		}
		&::-moz-placeholder{
			color: $textfield-placeholder-color;
			font-family: $textfield-font-family;
			opacity:1;
		}

		&::-ms-input-placeholder{
			color: $textfield-placeholder-color;
			font-family: $textfield-font-family;
		}
		&::placeholder {
			color: $textfield-placeholder-color;
			font-family: $textfield-font-family;
		}
	}

	&[type="radio"],
	&[type="checkbox"] {
		position: absolute;
		overflow: hidden;
		clip: rect(0 0 0 0);
		height: 1px;
		width: 1px;
		margin: -1px;
		padding: 0;
		border: 0;

		+ label {
			display: inline;
			cursor: pointer;
			font-weight: normal;

			&:before {
		    content: "";
				display: inline-block;

				width: calc(1em - ( 2 * #{$checkbox-border-width} ));
				height: calc(1em - ( 2 * #{$checkbox-border-width} ));

		    margin: 0 .618em 0 0;

				background: $checkbox-bg-color;

				box-shadow: 0 0 0 $checkbox-border-width $checkbox-border-color;

		    text-align: center;
		    vertical-align: initial;
				cursor: pointer;
			}
		}

		&:checked + label:before {
			content: "";
		}
	}

	&[type=checkbox] {
		+ label:before {
	   		border-radius: 2px;
			background: $checkbox-bg-color;
			box-shadow: 0 0 0 $checkbox-border-width $checkbox-border-color;
		}

		&:checked + label {
			position: relative;

			&:before {
				background: $checked-checkbox-bg-color;
				box-shadow: 0 0 0 $checkbox-border-width $checked-checkbox-border-color;
			}

			&:after {
				content: "";
				display: block;
				width: .32em;
				height: .72em;
				border-width: 0 3px 3px 0;
				border-style: solid;
				border-color: $checkbox-checkmark-color;
				position: absolute;
				top: .2em;
				left: .25em;
		    -webkit-transform: rotate(45deg);
		    -moz-transform: rotate(45deg);
		    -o-transform: rotate(45deg);
		    transform: rotate(45deg);
			}
		}

		&.toggle {
			+ label {
				position: relative;

				&:before {
					width: 1.382em;
					border-radius: 1em;
					border-color: $toggle-border-color;
					background-color: $toggle-bg-color;
					box-shadow: 0 0 0 $toggle-border-width $toggle-border-color;
				}

				&:after {
					content: "";
					position: absolute;
					top: .15em;;

					left: -($toggle-border-width);
					display: block;
					height: 1em;
					width: 1em;
					background: $toggle-switch-color;
					border-width: $toggle-border-width;
					border-style: solid;
					border-color: $toggle-border-color;
					border-radius: 50%;
				}
			}

			&:checked + label {
				&:before {
					background-color: $checked-toggle-bg-color;
					box-shadow: 0 0 0 $toggle-border-width $checked-toggle-border-color;
				}

				&:after {
					background: $checked-toggle-switch-color;
					border-color: $checked-toggle-border-color;
					left: calc(.382em + #{$toggle-border-width});
				}
			}
		}

		&[disabled],
		.disabled{
			+ label{
				cursor:default;
				&:before {
					cursor: default;
					background-color: $inactive-checkbox-bg-color;
					border-color: $inactive-checkbox-border-color;
					box-shadow: 0 0 0 $checkbox-border-width $inactive-checkbox-border-color;
				}

			}
			&:checked{
				+ label{
					cursor:default;
					&:before {
						background-color: $inactive-checked-checkbox-bg-color;
						border-color: $inactive-checked-checkbox-border-color;
						box-shadow: 0 0 0 $checkbox-border-width $inactive-checked-checkbox-border-color;
					}
					&:after{
						border-color: $inactive-checked-checkbox-checkmark-color;
					}
				}
			}

			&.toggle {
				+ label {
					cursor:default;
					&:before {
						cursor: default;
						border-color: $inactive-toggle-border-color;
						background-color: $inactive-toggle-bg-color;
						box-shadow: 0 0 0 $toggle-border-width $inactive-toggle-border-color;
					}

					&:after {
						cursor: default;
						background: $inactive-toggle-switch-color;
						border-color: $inactive-toggle-border-color;
					}
				}
				&:checked{
					&+ label {
						cursor:default;
						&:before {
							background-color: $inactive-checked-toggle-bg-color;
							box-shadow: 0 0 0 $toggle-border-width $inactive-checked-toggle-border-color;
						}

						&:after {
							background: $inactive-checked-toggle-switch-color;
							border-color: $inactive-checked-toggle-border-color;
						}
					}
				}
			}
		}
	}

	&[type=radio] {
		+ label:before {
	    	border-radius: 50%;
			background: $radio-bg-color;
			box-shadow: 0 0 0 $radio-border-width $radio-border-color;
		}

		&:checked + label:before {
			background: $checked-radio-bg-color;
			box-shadow:
				0 0 0 $radio-border-width $checked-radio-bg-color,
				inset 0 0 0 3px $radio-bg-color;
		}

		&.disabled,
		&[disabled]{
			+label{
				cursor: default;
				&:before{
					cursor: default;
					background: $inactive-radio-bg-color;
					box-shadow: 0 0 0 $radio-border-width $inactive-radio-border-color;
				}
			}
			&:checked{
				+label{
					cursor: default;
					&:before{
						background: $inactive-checked-radio-bg-color;
						box-shadow:
							0 0 0 $radio-border-width $inactive-checked-radio-bg-color,
							inset 0 0 0 3px $inactive-checked-radio-border-color;
					}
				}
			}
		}
	}

	// Override browser default focus styles
	&[type="file"]:focus,
	&[type="radio"]:focus,
	&[type="checkbox"]:focus {
		outline: thin dotted $grey-n03;
		outline: 5px auto -webkit-focus-ring-color;
		outline-offset: -2px;
	}

	&[type="checkbox"] {
		&:focus + label:before {
			box-shadow:
				0 0 0 2px $grey-6,
				0 0 1px 3px $blue;
		}



		&.toggle  {
			&:focus + label:before {
				box-shadow:
					0 0 0 2px $grey-6,
					0 0 1px 3px $blue;
			}
		}
	}

	&[type="radio"] {
		&:focus + label:before {
			box-shadow:
				0 0 0 2px $grey-6,
				inset 0 0 0 3px $white,
				0 0 1px 3px $blue;
		}
	}
}

textarea {
	resize: none;

	overflow: auto;
	vertical-align: middle;

	width: auto;

	font: {
		family: $textarea-font-family;
		weight: $textarea-font-weight;
		style: $textarea-font-style;
	}

	text-decoration: none;
	color: $textarea-text-color;

	background-color: $textarea-bg-color;
	border: 1px solid $grey-5;
	outline: none;

	// comma separated selectors do not work with placeholder.
	// https://stackoverflow.com/questions/44971077/why-do-comma-separated-placeholder-rules-not-get-applied-in-css
	&::-webkit-input-placeholder{
		color: $textarea-placeholder-color;
		font-family: $textarea-font-family;
	}
	&::-moz-placeholder{
		color: $textarea-placeholder-color;
		font-family: $textarea-font-family;
		opacity:1;
	}
	&::-ms-input-placeholder{
		color: $textarea-placeholder-color;
		font-family: $textarea-font-family;
	}
	&::placeholder {
		color: $textarea-placeholder-color;
		font-family: $textarea-font-family;
	}
}

// Container element for inputs with icons
.icon.input {
	@extend %flexbox;
	@include flex-direction(row);
	@include align-items(center);


	> input {
		@include flex(1,0,auto);
		@include order(1);

		margin: 0;

		background-color: $textfield-bg-color;
		border: 1px solid $grey-5;
	}

	> svg {
		// Keep svg from shrinking below its default width in Firefox
		@include flex(0,0,auto);
		@include order(0);

		fill: $textfield-icon-fill;

		background: $textfield-icon-bg-color;
		border: 1px solid $grey-5;
	}
}

uniform-phone-number,
uniform-email {

	> span,
	.error-message {
		display: none;
	}

	&.error {
		> span,
		.error-message {
			color: $orange;
			font-weight: $bold;
			display: block;
			flex: 1 1 100%;
		}
		> input,
		.main-input {
			border: 1px solid $orange;
			background: lighten($orange, 40%);
		}
	}
}

.radio-input-icon {
	+ .radio-input-icon-label {
		display: flex;
		height: 9em;
		flex-direction: column;
		width: 125px;

		.radio-input-icon-container {
			width: 6.5em;
			height: 6.5em;
			overflow: hidden;
			border: 3px solid $grey-3;
			border-radius: .240625em;
		}

		&:before {
			content: none !important;
		}

		.radio-input-icon-container .radio-input-icon-image {
			width: 6em;
			height: 6em;
			fill: $grey-3;
			transform: scale(.8);
		}
	}

	&:checked + .radio-input-icon-label {
		.radio-input-icon-container {
			border: 3px solid $green;
		}

		&:after {
			content: attr(data-selected);
			color: $green;
			font-weight: bold;
			margin: 0 auto;
		}
	}

	&:not(:checked):hover + .radio-input-icon-label {
		.radio-input-icon-container {
			border: 3px solid $blue;

			.radio-input-icon-image {
				fill: $grey-2;
			}
		}

		&:after {
			content: attr(data-unselected);
			color: $blue;
			font-weight: bold;
			margin: 0 auto;
		}
	}

	&:focus + .radio-input-icon-label > .radio-input-icon-container {
		box-shadow: 0 0 0 1px #ffffff, 0 0 3px 3px #3a97f9;
	}
}