@include oForms(
	$opts: (
		'elements': (
			'radio-box',
			'check-box',
			'toggle',
		),
		'features': (
			'inline',
			'state',
		),
	)
);

$two-thirds-width: percentage(2 / 3);

.consent-form__intro-text {
	color: var(--o3-color-palette-black-80);
}

.consent-form {
	font-family: var(--o3-font-family-metric);
	color: var(--o3-color-use-case-body-text);
	margin-bottom: var(--o3-spacing-s);
	max-width: none;
	padding-left: 0;
	padding-right: 0;

	&.hidden {
		display: none;
	}

	.consent-form__section {
		margin-bottom: var(--o3-spacing-2xs);

		.o-forms-input {
			&.o-forms-input--toggle {
				> label:not(:last-child) {
					margin: 0 0 12px;
				}
			}
			label {
				margin: 0px;
			}
		}
	}

	.consent-form__full-width {
		@include oGridRespondTo(M) {
			width: 100%;
		}
	}

	.consent-form__section-label {
		margin-top: var(--o3-spacing-4xs);
	}

	.consent-form__switches-group {
		padding-top: var(--o3-spacing-3xs);
		margin-top: var(--o3-spacing-4xs);
		&--bordered {
			border-top: 1px solid var(--o3-color-palette-black-30);
			margin-top: var(--o3-spacing-5xs);
		}
	}

	.consent-form__fieldset {
		font-family: var(--o3-font-family-metric);
		margin: 0 0 28px;
		padding: 0;
		border: none;
	}

	.o-forms-field--inline {
		margin-bottom: 10px;

		@include oGridRespondTo(M) {
			flex-direction: row;
		}

		@include oGridRespondTo(S) {
			.o-forms-input {
				align-items: flex-end;
			}

			.o-forms-input {
				flex: initial;
			}

			.o-forms-title {
				flex: 1 0 0;
			}
		}
	}
}

.consent-form-content {
	background-color: var(--o3-color-use-case-page-background);
}

.consent-form__consent-info {
	background-color: var(--o3-color-palette-wheat);
	padding-left: var(--o3-spacing-2xs);
	padding-right: var(--o3-spacing-2xs);
	padding-top: var(--o3-spacing-3xs);
	padding-bottom: var(--o3-spacing-3xs);
}

.consent-form__consent-info-para {
	margin-bottom: var(--o3-spacing-3xs);

	&:last-of-type {
		margin-bottom: 0;
	}
}

.consent-form__item-advisory {
	background-color: var(--o3-color-palette-wheat);
	padding: var(--o3-spacing-3xs) var(--o3-spacing-2xs) var(--o3-spacing-2xs);
	margin-top: var(--o3-spacing-s);
	@include oGridRespondTo($until: S) {
		margin-bottom: var(--o3-spacing-s);
	}
}

.consent-form__item-advisory-para {
	margin-top: 0;
	margin-bottom: var(--o3-spacing-4xs);
	&:last-child {
		margin-bottom: 0;
	}
}