/* Containers */
form {
	table {
		width: auto;
		table-layout: auto;

		td {
			padding: 0;
			border: 0 none;
			vertical-align: baseline;
		}
	}

	@media (min-width: 600px) {
		#main & .formbody > p, #main & .formbody .fields > p, #main & fieldset > p {
			margin-bottom: 0;
		}
		#main & .submit_container {
			margin-top: 1em;
		}
	}
}

fieldset:not(.checkbox_container):not(.radio_container) {
	margin-bottom: 1em;
	padding: 20px;
	border: 1px solid $border-primary;
	background: rgba(255, 255, 255, .5);

	td {
		padding: 0 16px 0 0;
		border: 0;
		vertical-align: middle;
	}

	> legend {
		display: block;
		float: left;
		width: 100%;
		width: calc(100% + 40px);
		margin: -20px -20px .5em;
		padding: .15em 20px;
		@include title-font();
		color: $accent-primary;
		background: $bg-well;
		font-size: 1rem;
	}
}

%label {
	display: block;
	min-width: 9em;
	margin: 0 0 .25em;
	@include title-font();
	font-size: 1.35rem;
	line-height: 1.35;
	text-transform: uppercase;
	@media (min-width: 600px) {
		display: inline-block;
		margin: 0 1em 1em 0;
	}
}

.eula {
	%label {
		@media (min-width: 600px) {
			margin: 0 0 1em;
		}
		@media (max-width: 599px) {
			margin: 0 0 2em;
		}
	}
}
#eula {
	margin-bottom: 2em;
	input, label {
		display: initial;
		margin-bottom: 0;
		vertical-align: baseline;
	}
}

fieldset.checkbox_container, fieldset.radio_container {
	legend {
		float: left;
		@extend %label;
		cursor: default;
	}
}

label {
	@extend %label;

	input[type="checkbox"] + &, input[type="radio"] + & {
		max-width: 35em;
		@include body-font();
		font-size: .875em;
		line-height: 1.25;
		text-transform: none;
	}
}

span.mandatory {
	color: $text-critical;
}

span.mandatory:nth-child(n+2) {
	margin-left: 2px;
}

p.instructions {
	margin-bottom: 1em !important;
}

/* Fields */
input[type="text"], input[type="number"], input[type="tel"], input[type="email"],
input[type="url"], input[type="search"], input[type="datetime"], input[type="date"],
input[type="time"], input[type="month"], input[type="week"], input[type="color"],
input[type="password"], textarea, .hosted-field {
	@include body-font();
	max-width: 100%;
	margin: 0 1em 0 0;
	padding: .2em .5em;
	border: 1px solid $accent-primary;
	border-radius: 0;
	color: $black;
	background-color: rgba(255, 255, 255, .5);
	font-size: 1rem;
	transition: box-shadow .2s ease-in;

	&:focus, &:active {
		outline: none;
		box-shadow: 0 0 4px 1px $accent-primary;
		background-color: transparent;
	}
}

.hosted-field {
	display: inline-block;
	width: 13em;
	height: 2em;
	padding-top: 0;
	padding-bottom: 0;
	vertical-align: middle;

	&.braintree-hosted-fields-focused {
		box-shadow: 0 0 4px 1px $accent-primary;
		background-color: transparent;
	}
}

textarea {
	margin-bottom: .75em;
	vertical-align: top;
}

input[type="checkbox"], input[type="radio"] {
	margin: .4em 1.5em .4em 0;
	transform: scale(1.5);
}

input[type="file"] {
	@include body-font();
	width: 14em;
	font-size: .875em;
	line-height: 1;
}

select {
	height: 1.75em;
	margin: 0;
	padding: .25em .25em .25em 0;
	border: 0 none;
	border-radius: 0;
	@include body-font();
	font-size: 1em;
	line-height: 1;

	&:focus, &:active {
		outline: none;
		box-shadow: 0 0 4px 3px $accent-primary;
	}
}

input[readonly], select[disabled], .styled-select.disabled {
	width: 20em;
	border: 0 none;
	color: $black;
	background: transparent;
	text-shadow: 0 0 0 $white;
	-webkit-appearance: none;

	&:focus, &:active {
		box-shadow: none;
	}
}

select[disabled] + .toggle-select {
	display: none;
}

/* Checkboxes and radios with JavaScript */
.control {
	position: relative;
	display: inline-block;
	padding-left: 1.5rem;
	color: $black;
	cursor: pointer;
	// Put the input behind the label so it doesn't overlay text
	input {
		position: absolute;
		opacity: 0;
		z-index: -1;

		+ label {
			float: left;
			cursor: pointer;
		}
	}

	.control-indicator {
		position: absolute;
		top: 1px;
		left: 0;
		display: block;
		width: 16px;
		height: 16px;
		padding: 2px;
		border: 2px solid $border-primary;
		background: transparent center no-repeat;
		background-size: 50% 50%;
		user-select: none;
		text-align: center;
		cursor: pointer;
		transition: color .2s ease-in, background-color .2s ease-in;

		&::before {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			border: 2px solid $bg-primary;
			content: "";
			z-index: 2;
		}
	}

	input[type="radio"] + label .control-indicator {
		border-radius: 10px;

		&::before {
			border-radius: 10px;
		}
	}

	// Checked and active states
	input:checked + label .control-indicator,
	input:active + label .control-indicator {
		color: $white;
		background-color: $accent-primary;
	}

	// Focus state
	input:focus + label .control-indicator {
		box-shadow: 0 0 10px $accent-primary;
	}
}

/* Select menu */
.styled-select {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin-right: 1em;
	border: 2px solid $accent-primary;
	background-color: rgba(255, 255, 255, .5);

	&.blue-select {
		background-color: $accent-primary;
	}

	.toggle-select {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 20px;
		height: 100%;
		background: $accent-primary svg-load("../.build/svgmin/arrowhead-dropdown.svg") center no-repeat;
		background-size: 40%;
		content: "";
	}

	select {
		position: relative;
		padding: .25em 2.25em .25em .5em;
		color: inherit;
		background: transparent;
		z-index: 1;
		-moz-appearance: none;
		-webkit-appearance: none;

		optgroup, option {
			color: $bg-well;
		}

		&::-ms-expand {
			display: none;
		}

		&:focus::-ms-value {
			color: inherit;
			background: transparent;
		}
	}

	& + .multiselect-button {
		display: inline-block;
		margin: 0 1em 0 0;
		padding: .07em 0 .1em;
		border: none;
		border-radius: 0;
		color: $accent-primary;
		background: transparent;
		font-size: 1.5rem;
		line-height: .75;
		font-weight: bold;
		text-transform: uppercase;
		cursor: pointer;
		transition: color .2s ease-in;
		-webkit-appearance: none;

		&:hover {
			color: $black;
		}
	}
}

label[for="country"] + .styled-select {
	max-width: 14em;
}

/* JavaScript character count */
span.counter {
	margin-right: .5em;
	font-size: .875rem;
}

/* Buttons */
input[type="submit"] {
	@extend .button;
	padding: .15em 1.5em;
	border-radius: 0;
	-webkit-appearance: none;
}

input[type="submit"].unbutton {
	padding: 0;
	color: $accent-primary;
	background-color: transparent;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 200;
	text-transform: inherit;

	&:hover {
		color: $white;
		background-color: transparent;
	}
}

input[type="submit"][disabled], .button.inactive {
	color: $white;
	background-color: $text-disabled;
	cursor: not-allowed;
	opacity: .75;

	&:hover {
		background-color: $text-disabled;
	}
}

/* Password strength meter */
.password-meter {
	position: relative;
	width: 13em;
	margin-top: .5em;
	margin-bottom: .75em;
	@media (min-width: 600px) {
		margin-top: 0;
		margin-left: 13.625em;
	}

	.password-meter-message {
		font-weight: 500;
		text-align: left;
	}

	.password-meter-bg, .password-meter-bar {
		height: 4px;
	}

	.password-meter-bg {
		top: 8px;
		background: $border-primary;
	}

	&.very-weak .password-meter-message {
		color: $text-critical;
	}

	&.weak .password-meter-message {
		color: $text-warning;
	}

	&.good .password-meter-message {
		color: $accent-primary;
	}

	&.strong .password-meter-message {
		color: $text-positive;
	}

	&.very-weak .password-meter-bar {
		width: 16%;
		background: $text-critical;
	}

	&.weak .password-meter-bar {
		width: 33%;
		background: $text-warning;
	}

	&.good .password-meter-bar {
		width: 75%;
		background: $accent-primary;
	}

	&.strong .password-meter-bar {
		width: 100%;
		background: $text-positive;
	}
}

/* Ajax add to cart progress */
form[data-ajax] + .ajax-progress {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 100%;
	@include title-font();
	color: $white;
	background: $accent-primary;
	font-size: 1.125em;
	text-align: center;
	text-transform: uppercase;
}

/* Find as you type */
#main .fayt-results {
	margin-bottom: 1.5em;

	h5 {
		margin: .25em 0 .5em;
	}

	ul {
		margin-bottom: 0;
	}
}

/* Inline form */
form.inline {
	label {
		@extend .only-assistive;
	}

	input {
		margin: 0;
		vertical-align: middle;
	}

	input[type="text"] {
		padding: .26em .5em;
		font-size: .85em;

		.chrome & {
			padding-top: .33em;
			padding-bottom: .33em;
		}
	}

	input[type="submit"] {
		padding: .3em 1em;
		font-size: 1.25rem;
	}
}

/* Competition Form */
._form_16 {
	.control {
		padding-left: .1rem;
	}

	.control input {
		position: relative;
		margin-right: 5px;
		opacity: 1;
		z-index: 1;
	}

	label {
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		text-transform: none;
	}
}

/* Error messages */
label.error {
	border-color: $text-critical;
	color: $text-critical;
}

legend + .message {
	margin-left: 1em;
}