@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.signup-personalization-form {
	.multi-checkbox {
		display: flex;
		flex-wrap: wrap;
		gap: 12px 24px;
	}

	.signup-personalization-form__checkbox {
		padding-block: 8px;

		.a4a-form__section-field {
			gap: 16px;

			@include break-xlarge {
				gap: 8px;
			}
		}

		&.is-horizontal .a4a-form__content-wrapper {
			display: flex;
			flex-direction: row;
			gap: 16px;
		}
	}

	.multi-checkbox label {
		display: flex;
		align-items: center;
		margin: 0;
		cursor: pointer;
		@include body-medium;
		color: var(--color-neutral-80);
		flex: 0 1 100%; // Full width on mobile

		@include break-xlarge {
			flex: 0 1 calc(50% - 12px); // 2 columns
		}
	}

	.multi-checkbox .form-checkbox + span {
		margin-left: 8px;
	}
}

.signup-personalization-form__description {
	margin-block-start: 8px;
	@include body-medium;

	@media (prefers-color-scheme: dark) {
		color: var(--color-text-inverted);
	}
}