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


.o-form {
	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__container {
	background: linear-gradient(palette(primary, 500), palette(primary, 700));
	padding-left: 6vw;
	padding-right: 6vw;

	&[data-ornament-type="filled"] {
		position: relative;

		@include mq(m) {
			&::after {
				@include ornament-hex-filled(bottomright);
				content: '';
				display: block;
				z-index: -1;
			}
		}
	}
}

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

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

.o-form__title {
	@include text-style(2);
	margin-bottom: space(3);
	color: palette(neutral, 0);
}

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

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