$o-form-bp1: 600;
$o-form-row-gap: space(1);


/**
 * To prevent the honey pot from working
 * the o-form can't have a 'POSITION' property.
 */
.o-form { }


.o-form__title {
	margin: 0 0 space(4) 0;
}


.o-form__row {
	& + & {
		margin-top: space(2);
	}

	@include mq($o-form-bp1){
		display: flex;
		justify-content: flex-start;
	}
}


.o-form__field {
	@include mq($max: $o-form-bp1){
		width: 100%;

		&[data-size="1"] {
			width: percentage(1/3);
		}
		&[data-size="2"] {
			width: percentage(2/3);
		}
		& + & {
			margin-top: space(2)
		}
	}

	@include mq($o-form-bp1) {
		margin-right: $o-form-row-gap;
		//flex: none;

		&[data-size="1"] {
			width: calc(#{percentage(1/6)} - #{$o-form-row-gap});
		}
		&[data-size="2"] {
			width: calc(#{percentage(2/6)} - #{$o-form-row-gap});
		}
		&[data-size="3"] {
			width: calc(#{percentage(3/6)} - #{$o-form-row-gap});
		}
		&[data-size="4"] {
			width: calc(#{percentage(4/6)} - #{$o-form-row-gap});
		}
		&[data-size="5"] {
			width: calc(#{percentage(5/6)} - #{$o-form-row-gap});
		}
		&[data-size="6"] {
			width: 100%;
		}
	}
}

.o-form__notes {
	@include font-size(s);
	@include font-weight(extra-bold);
	text-transform: uppercase;
}

.c-form__note {
	:first-child {
		display: inline-block;
		width: space(3);
	}
}

.o-form__submit {
	margin-top: space(4);
}