@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	border: 0;
	padding: 0;
	margin: 0;
	max-inline-size: 100%;

	.textfield-input,
	.radiosfield-input,
	.checkboxesfield-input {
		display: flex;
		flex-direction: column;

		&.palette-error {
			box-shadow: 0 0 0 1px var(--palettes-700);
		}
	}

	.radiosfield-input,
	.checkboxesfield-input {
		row-gap: var(--pr-t-spacings-50);
	}

	.textfield-label,
	.radiosfield-label,
	.checkboxesfield-label {
		color: var(--components-field-label-color);
	}

	@at-root ($atRoot) {
		.textfield-input,
		.radiosfield-input,
		.checkboxesfield-input {
			font-family: inherit;
			font-size: var(--components-field-font-size);
			color: var(--components-field-input-color);
			outline: none;
			position: relative;
			inline-size: 100%;

			&::placeholder {
				color: var(--palettes-neutral-200);
			}
		}

		.textfield-label,
		.radiosfield-label,
		.checkboxesfield-label {
			color: var(--components-field-label-color);
			font-size: var(--pr-t-font-body-M-fontSize);
			line-height: var(--pr-t-font-body-M-lineHeight);
			min-block-size: var(--pr-t-spacings-200);
			margin-block-end: var(--components-field-label-margin-bottom);
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: all;
			overflow: hidden;
			position: relative;
			text-overflow: ellipsis;
			overflow-wrap: anywhere;
			white-space: nowrap;
			order: -1;
		}

		.textfield-messages,
		.radiosfield-messages,
		.checkboxesfield-messages {
			font-size: var(--pr-t-font-body-S-fontSize);
			line-height: var(--pr-t-font-body-S-lineHeight);
			margin-block-start: var(--components-field-message-margin-top);

			> * {
				margin: 0;
			}
		}

		.textfield-messages-error,
		.radiosfield-messages-error,
		.checkboxesfield-messages-error {
			color: var(--pr-t-color-text-critical);

			.lucca-icon {
				font-size: var(--pr-t-font-body-XS-lineHeight);
				line-height: var(--pr-t-font-body-S-lineHeight);
				vertical-align: top;
			}
		}

		.textfield-messages-warning,
		.radiosfield-messages-warning,
		.checkboxesfield-messages-warning {
			color: var(--pr-t-color-text-warning);
		}

		.textfield-messages-valid,
		.radiosfield-messages-valid,
		.checkboxesfield-messages-valid,
		.textfield-messages-success,
		.radiosfield-messages-success,
		.checkboxesfield-messages-success {
			color: var(--pr-t-color-text-success);
		}

		.textfield-messages-helper,
		.radiosfield-messages-helper,
		.checkboxesfield-messages-helper {
			color: var(--palettes-neutral-700);
		}
	}
}