// Unified Form wrapper
form { @include naked(); }

#{$all-text-inputs}, select, label.select-wrap {
	width: $form-field-w;
}

form .Row {
	vertical-align: middle;
	margin: 14px auto;
	text-align: left;

	display: flex;
	flex-direction: row;

	&:first-child {
		margin-top: 0;
	}

	&:last-child {
		margin-bottom: 0;
	}

	.spacer {
		width: $form-label-w;

		@include media($phone) {
			display: none;
		}
	}

	&.buttons {
		input, .button {
			margin-right: dist(-1);
		}
	}

	&.centered {
		justify-content: center;
	}

	&.message {
		font-size: 1em;
		//margin-left: $label-gap + $w-labels;
		text-shadow: 1px 1px 3px black;
		text-align: center;

		&.error {
			color: crimson;
		}

		&.ok {
			color: #0fe851;
		}
	}

	&.separator {
		padding-top: 14px;
		border-top: 2px solid rgba(255, 255, 255, 0.1);
	}

	textarea {
		display: inline-block;
		vertical-align: top;
		min-height: 10rem;
		flex-grow: 1;

		resize: vertical;
	}

	label {
		font-weight: bold;
		color: $c-form-label-fg;
		display: inline-block;
		width: $form-label-w;
		text-align: right;
		text-shadow: 1px 1px 3px black;

		padding: $form-label-gap;
		align-self: flex-start;

		@include noselect;
	}

	.checkbox-wrap {
		display: inline-block;
		width: $form-label-w;
		padding: $form-label-gap;
		text-align: right;
		align-self: flex-start;

		input[type=checkbox] {
			margin: auto;
			width: auto;
			height: auto;
		}

		& + label {
			width: $form-field-w;
			padding-left: 0;
			text-align: left;
			cursor: pointer;
		}
	}

	// special phone style
	@include media($phone) {
		flex-direction: column;

		&.buttons, &.centered {
			flex-direction: row;
		}

		&.buttons {
			justify-content: center;

			// remove margin on lats button
			:last-child {
				margin-right:0;
			}
		}

		label {
			padding-left: 0;
			text-align: left;
			width: auto;
		}

		.checkbox-wrap {
			order: 1;
			text-align: left;
			padding-bottom: 0;

			border-radius: .4px;
			width: auto;

			& + label {
				width: auto;
			}
		}

		#{$all-text-inputs}, textarea {
			width: 100%;
		}
	}
}

// red asterisk
form span.required {
	color: red;
}

.RadioGroup {
	display: inline-block;
	line-height: 1.5em;
	vertical-align: middle;

	label {
		width: auto;
		text-align: left;
		cursor: pointer;
		font-weight: normal;
	}

	input[type="radio"] {
		vertical-align: middle;
		margin: 0 0 0 5px;
	}
}