$o-checkout-bp1: l;
$o-checkout-field-gap: space(2);


.o-checkout {
	max-width: $site-column-size * 8px;
	margin-left: auto;
	margin-right: auto;
}


.o-checkout__back {
	margin-bottom: space(3);

	@include mq($o-checkout-bp1) {
	    @include vspacing('margin-top' -0.5);
    	position: absolute;
    	top: auto;
    	left: auto;
	}
}


.o-checkout__heading {
	@include font-size(xl);
	@include font-weight('bold');
	margin-bottom: space(3);
}


.o-checkout__form {}


.o-checkout__form-group {
	margin-bottom: space(6);
}


.o-checkout__row {
	display: flex;
	margin-top: space(3);
	width: percentage(6/8);
}


.o-checkout__field {
	flex: none;

	&[data-size="1"] {
		width: calc(#{percentage(1/6)} - #{$o-checkout-field-gap});
	}
	&[data-size="2"] {
		width: calc(#{percentage(2/6)} - #{$o-checkout-field-gap});
	}
	&[data-size="3"] {
		width: calc(#{percentage(3/6)} - #{halve($o-checkout-field-gap)});
	}
	&[data-size="5"] {
		width: calc(#{percentage(5/6)} - #{halve($o-checkout-field-gap)});
	}
	&:nth-child(n+2) {
		margin-left: $o-checkout-field-gap;
	}
}


.o-checkout__action {
	margin-top: space(6);
}