/**
 * NOTE:
 * To prevent the honey pot from working
 * the o-form can't have a position property.
 */


.o-form {
	@include mq($max: l){
		max-width: 576px;
	}

	margin: 0 auto;

	&::before,
	&::after {
		content: '';
		display: block;
	}
	&::before {
		padding-top: 29.607%;
		background-color: palette(primary, 500);
		// Extra points below for preventing subpixel rounding issues
		clip-path: polygon(50% 0%, 0% 100%, 0% 200%, 100% 200%, 100% 100%);
	}
	&::after {
		padding-bottom: 29.607%;
		background-color: palette(primary, 700);
		// Extra points below for preventing subpixel rounding issues
		clip-path: polygon(50% 100%, 100% 0%, 0% -100%, 0% -100%, 0% 0%);
	}
}

.o-form--flat-top {
	&::before{
		display: none;
	}
}

.o-form__container {
	background: linear-gradient(palette(primary, 500), palette(primary, 700));
	padding-left: 6vw;
	padding-right: 6vw;

	@include mq(l){
		padding-left: 0;
		padding-right: 0;
	}
}

.o-form__body {
	max-width: 410px;
	margin: 0 auto;

	.o-form--flat-top & {
		padding-top: space(8);
	}
}

.o-form__top {
	clip-path: polygon(50% 0%, 0% 33.17%, 0% 100%, 100% 100%, 100% 33.17%);
}

.o-form__title {
	@include font-size(l);
	@include font-family(primary);
	@include font-weight(semi-bold);
	margin-bottom: space(3);
	color: palette(neutral, 0);
	text-align: center;
}

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

.o-form__submit {
	margin-top: space(5);
	color: palette(neutral, 0);
	text-align: center;
}