@use '@lucca-front/scss/src/commons/utils/form';
@use '@lucca-front/scss/src/components/formLabel/exports' as formLabel;
@use '@lucca-front/scss/src/components/inlineMessage/exports' as inlineMessage;
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: block;

	.divider:not(.mod-vertical) {
		margin-block: var(--pr-t-spacings-300);
	}

	@at-root ($atRoot) {
		.form-fieldset {
			margin: 0;
			padding: 0;
			border: 0;

			.form-field {
				margin-block: var(--pr-t-spacings-50);

				&:last-child {
					margin-block-end: 0;
				}
			}
		}
	}
}

@mixin componentDeprecated($atRoot: namespace.$defaultAtRoot) {
	padding: 0;
	border: 0;
	margin-block: 0 var(--components-form-group-margin-bottom);
	margin-inline: 0;
	position: relative;

	@at-root ($atRoot) {
		.form-header {
			display: block;
			margin-block-end: var(--pr-t-spacings-300);
		}

		.form-header-title {
			font: var(--pr-t-font-heading-2);
		}

		.form-header-mandatory {
			font-size: var(--pr-t-font-body-S-fontSize);
			line-height: var(--pr-t-font-body-S-lineHeight);
			color: var(--palettes-neutral-700);
		}

		.form-header-mandatory-asterisk {
			color: var(--palettes-error-700);
		}

		.form-field {
			position: relative;
			display: flex;
			flex-direction: column;
			gap: var(--pr-t-spacings-50);
			inline-size: var(--components-form-field-width);
			max-inline-size: 100%;

			.formLabel {
				@include formLabel.label;
			}
		}

		.form-field-contentOptional {
			display: flex;
			gap: var(--pr-t-spacings-100);
			align-items: center;

			> :first-child {
				flex-grow: 1;
			}
		}

		// deprecated

		.form-group-label,
		.form-group-legend,
		.form-group-title {
			display: block;
			font-weight: var(--pr-t-font-fontWeight-semibold);
			font-size: var(--components-form-label-font-size);
			margin: 0;
			padding-block: 0 var(--components-form-label-margin-bottom);
			padding-inline: 0;
			inline-size: 100%;
			text-align: start;
		}

		.form-group-legend,
		.form-group-title {
			font-size: var(--components-field-framed-title-font-size);
			line-height: var(--components-field-framed-title-line-height);
			padding-block-end: var(--pr-t-spacings-50);
		}

		.form-actions {
			text-align: end;
		}

		.form {
			.textfield,
			.radiosfield,
			.checkboxesfield,
			.checkbox.mod-field {
				margin-block-end: var(--components-form-field-margin-bottom);
			}
		}

		.form-group-line {
			display: flex;
			flex-wrap: wrap;
			position: relative;
		}

		.form-group-line-col {
			flex-basis: 0;
			flex-grow: 1;
			display: flex;
			flex-direction: column;

			> * {
				flex-grow: 1;
			}
		}

		.form-group-label {
			&.is-required {
				&:not(:empty) {
					&::after {
						@include form.required;
					}
				}
			}
		}

		.radiosfield-label,
		.checkboxesfield-label,
		.textfield-label {
			&.is-required {
				&:not(:empty) {
					&::after {
						@include form.required;
					}
				}
			}
		}
	}
}