/*
Currently in use at:
- NDN
		Numerous Pages
- DH.com
		services/web-design/index.html
		services/web-design/index.es.html
- Signup
		Numerous Pages

Form Components

*/

.Form {}

.Form__group {
	max-width: 100%;
	margin: 0 auto 2rem;
}

.Form__inline {
		margin: 0 auto 2rem;

	.Form__group {
		display: table-cell;
		vertical-align: top;
	}
}

.Form__inline-grid {
	margin: 0 -2rem;
}

.Form__inline-row {
	display: table;
	table-layout: fixed;
	width: 100%;
	border-collapse: separate;
	border-spacing: 2rem 0;
}

.Form__group--actions {
	margin-top: 3rem;
}

.Form__group--stacked {
	.Input + .Input {
		margin-top: 1rem;
	}
}

.Form__group--select {
	position: relative;

	&:after {
		content: '';
		position: absolute;
		pointer-events: none;
		bottom: 1rem;
		height: 0.5rem;
		right: 1rem;
		border-color: $c-g300 transparent;
		border-style: solid;
		border-width: .35rem .35rem 0 .35rem;
		transition: all .2s ease-in-out;
	}

	&:hover:after {
		border-color: $c-g400 transparent;
	}
}

.Form__label {
	color: $c-g500;
	display: block;
	@include fontsize($t-1);
	font-weight: $t-bold;
	max-width: 35rem;
}

.Form__description {
	color: $c-g500;
	@include fontsize($t-1);
	font-weight: $t-regular;
	margin-bottom: 0;
}


// Inputs
.Input {
	border: 1px solid $c-g300;

	outline: none;
	color: $c-g500;
	@include fontsize($t-1);
	font-family: $body;

	display: block;
	margin: 0;
	margin-top: 0.5rem;
	width: 100%;
	transition: all .2s ease-in-out;
	border-radius: $border-radius;
	padding: 0.4375rem 0.5rem; /* to ensure align with baseline grid. */

	&:active,
	&:focus {
		box-shadow: 0 0 5px 0 $c-g300;
		&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
			color: $white;
		}
		&::-moz-placeholder { /* Firefox 19+ */
			color: $white;
		}
		&:-ms-input-placeholder { /* IE 10+ */
			color: $white;
		}
		&:-moz-placeholder { /* Firefox 18- */
			color: $white;
		}
	}

	&::placeholder {
		color: $c-g500;
	}
}

.Input--error,
.Input--error:hover,
.Input--error:focus {
	border-color: $red;
}

.Form__label > .Form__description {
	margin-bottom: 1rem;
}

textarea.Input {
	min-height: 140px;
}


// Selects
.Select {
	border: 1px solid $c-g300;

	outline: none;
	color: $c-g500;
	@include fontsize($t-1);
	font-family: $body;

	margin-top: 0.5rem;
	border-radius: $border-radius;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding: 0.4375rem 0.5rem;
	background: $white;
	display: block;
	width: 100%;
	transition: all .2s ease-in-out;

	&:hover,
	&:focus {
		background: $c-g100;
	}
}

.Select--error,
.Select--error:hover,
.Select--error:focus {
	border-color: $c-r300;
}


// Choice: styles both radios and checkboxes
.Choice {
	color: $c-g500;
	@include fontsize($t-1);
	font-family: $body;
	display: block;
	padding-left: 1.4rem;
	position: relative;
	margin-bottom: 0.5rem;

	&:hover input{
		border-color: $c-b300;
	}

	input {
		outline: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		transition: all 0.1s ease-in-out;
		position: absolute;
		left: 0;
		top: 3px;
		border:solid $c-g300 1px;
		background: $c-w100;
		padding: 7px;
		margin: 0;

		&:checked{
			border-color: $c-b300;
		}

		&:before{
			content:'';
			background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z' fill='%230073EC'/></svg>");
			opacity: 0;
			position: absolute;
			top: 1px;
			left: 1px;
			height: 12px;
			width: 12px;
		}

		&:checked:before{
			opacity: 1;
			animation: zoomIn 1s 1 cubic-bezier(0.075, 0.82, 0.165, 1);
			animation-fill-mode: forwards;
			animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}

	}

	input[type='radio'] {
		border-radius: 50px;

		&:before{
			animation: none;
			transition: all 0.3s ease-in-out;
			background: $c-b300;
			position: absolute;
			top: 3px;
			left: 3px;
			width: 8px;
			height: 8px;
			padding: 0;
			border-radius: 50px;
			transform: scale(0);
		}

		&:hover:before{
			transform: scale(0.5);
		}

		&:checked{
			border-color:$c-b500;
		}

		&:checked:before{
			transform: scale(1);
		}
	}


}

.Choice__label {
	display: block;
}

.Choice__description {
	color: $c-g500;
	@include fontsize($t-1);
	display: block;
	margin-bottom: 1rem;
}

.Choice--error > .Choice__label {
	color: $red;
}