#generator {
	background-color: $color__navy-light;
	color: $color__offwhite;
	max-height: 100%;
	position: relative;
	text-align: center;

	&[tabindex="-1"]:focus {
		outline: 0;
	}

	.wrap {
		max-width: 700px;
		position: relative;
	}

	h2 {
		color: $color__teal-light;
	}
}

.hide-overflow {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.generator-form {
	padding-bottom: 1.5em;
	position: relative;
	text-align: left;
}

/* Type selection */
.generator-form-primary {

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

	legend.components-label {
		@extend label;
	}

	.components-radio-block {

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

		label {
			color: $color__offwhite;
			cursor: pointer;
			font-family: $font__sans;
			@include font-size(1.7);
			letter-spacing: 0;
			margin: 5px 0;
			text-transform: none;
		}

		label:before {
			background-color: $color__navy-light;
			border: 4px solid $color__navy-light;
			bottom: -2px;
 			box-shadow: 0 0 0 2px $color__teal-light;
			border-radius: 50%;
			content: "";
			display: inline-block;
			height: 17px;
			margin-right: 10px;
			position: relative;
			width: 17px;
			-webkit-transition: background-color 0.2s;
			-moz-transition: background-color 0.2s;
			transition: background-color 0.2s;
		}

		input[type="radio"]:focus + label:before {
			box-shadow: 0 0 0 2px lighten($color__teal-light, 30%);
		}

		input[type="radio"]:checked + label:before {
			background-color: $color__pink;
		}

		input[type="radio"]:checked + label {
			color: $color__teal-light;
		}
	}
}

.generator-form-submit {
	margin-top: $size__gutter/4;
}

.components-form-cancel {
	background-color: transparent;
	box-shadow: 0 0 transparent;
	color: $color__teal-light;
	display: none;
	font-size: 90%;
	margin-left: 20px;
	padding: 0;

	&:before {
		content: "\0078";
		display: inline-block;
		font-family: helvetica, arial, sans-serif;
		font-size: 80%;
		margin-right: 10px;
		text-transform: uppercase;
	}

	&:focus,
	&:hover {
		box-shadow: 0 0 transparent;
		color: lighten( $color__teal-light, 10% );
		top: auto;
	}

	&:active,
	&:focus {
		color: #fff;
		outline: 0;
	}
}

/* Errors */
.error ul {
	background-color: #CD7C3A;
	border-radius: 4px;
	padding: 0;

	li {
		font-size: 90%;
		padding: 0.2em 1.0em;

		a {
			color: #fff;
			text-decoration: underline;
		}

		&:first-child {
			padding-top: 0.75em;
		}

		&:last-child {
			padding-bottom: 0.75em;
		}

		&::before {
			background: url("assets/img/error.svg") no-repeat;
			height: 16px;
			width: 16px;
		}
	}
}

input[aria-invalid=true] {
	border: 4px solid #CD7C3A;
}

// Gear styles
.gear-set-one,
.gear-set-two {
	position: absolute;
	top: 0;
}

.gear-set-one {
	left: -225px;
	top: -80px;

	svg {
		height: 552px;
		width: 800px;
	}
}

.gear-set-two {
	bottom: -100px;
	right: -180px;
	-ms-transform: rotate(190deg);
	-webkit-transform: rotate(190deg);
	transform: rotate(190deg);

	svg {
		height: 414px;
		width: 600px;
	}
}

.gear-set0 {
	fill: #23334e;
}

.gear-set1 {
	fill: #293b5a;
}

.gear-set2 {
	fill:#202f49;
}

/**
 * Media queries
 */
@include mobile {
	// Hide the form on mobile
	#generator {
		display: none;
	}
}

// On tablets and larger, show two columns
@include tablet {
	.generator-form-primary {
		display: inline-block;
		width: 200px;
		vertical-align: top;
	}

	.generator-form-secondary {
		display: inline-block;
		width: calc(100% - 250px);
		vertical-align: top;
	}
}

// Adjust background elements and padding for smaller screens
@include desktop-max {
	#types #generator {
		left: -20px;
		right: -20px;
		width: calc( 100% + 40px );

		.wrap {
			padding-left: 20px;
			padding-right: 20px;
		}
	}
}
