@import "bourbon";
@Import "neat";
@import "base/base";
@import "hero";
@import "button";

.onboarding {
	$content-max-width: 600px;
	$content-width: 100%;

	padding: 1.5em;
	font-size: 1.25em;
	max-width: $content-max-width;
	width: $content-width;
	margin: 0px auto;
	background-color: transparentize(white, .5);

	ul, ol {
		list-style-type: square;
	}

	#{$all-text-inputs}, label, select {
		display: inline-block;
	}

	label {
		max-width: 35%;
	}

	#{$all-text-inputs}, select {
		width: 65%;
	}

	&.register {
		#{$all-text-inputs}, select {
			width: 60%;
		}

		label {
			width: 35%;
			text-align: right;
			padding-right: 1em;
		}

		form {
			font-size: 75%;
			margin: 0px auto;
		}
	}
	&.payment {
		#{$all-text-inputs}, select {
			width: 60%;
		}

		select {
			font-size: 1.5em;
		}

		input.expiration {
			width: 10%;
		}

		label.expiration {
			max-width: 20%;
			margin-left: 2%;
			margin-right: 2%;
		}
		
		input.month {
			margin-right: 1%;
		}

		input.year {
			margin-left: 1%;
		}
		
		input.cvc {
			width: 13%;
		}

		label {
			width: 35%;
			text-align: right;
			padding-right: 1em;
		}

		select.plan {
			margin-bottom: 0.5em;
		}

		form {
			font-size: 75%;
			margin: 0px auto;
		}
	}
	&.login {
		label {
			width: 25%;
			text-align: right;
			padding-right: 1em;
		}

		form {
			font-size: 85%;
			margin: 0px auto;
		}
	}
}

.hero img.settings-toggle {
	width: 1.25em;
	top: 0px;
	float: right;
	margin: 1em;
	cursor: pointer;
}

.actionbuttons {
	padding-top: 1em;
	text-align: center;
	max-width: 400px;
	margin: 0px auto;

	button {
		min-width: 48%;
		margin: 0px 1%;
	}

	button:focus {
		outline: none;
	}
}