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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	position: relative;
	overflow: hidden;
	padding: var(--components-inputFramed-padding);
	border: solid 1px var(--components-inputFramed-borderColor);
	border-radius: var(--pr-t-border-radius-default);
	background-color: var(--palettes-neutral-0);
	transition-property: box-shadow, border-color;
	transition-duration: var(--commons-animations-durations-fast);
	block-size: 100%;
	display: flex;
	flex-direction: column;

	.formLabel-info {
		position: relative;
		z-index: 1;
	}

	@at-root ($atRoot) {
		.inputFramed-header-field {
			flex: 1;

			&.form-field.form-field {
				position: static;
				margin-block: 0;
			}

			a,
			button {
				position: relative;
			}
		}

		.inputFramed-header {
			padding: var(--components-inputFramed-header-padding);
			border-radius: var(--pr-t-border-radius-50);
			background-color: var(--components-inputFramed-header-backgroundColor);
			transition-property: background-color;
			transition-duration: var(--commons-animations-durations-fast);
			position: relative;
			flex-grow: 1;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: flex-start;
			gap: var(--pr-t-spacings-100);
			align-items: var(--components-inputFramed-header-alignItems);

			.inputFramed-header-label.formLabel {
				position: static;
				font-weight: var(--pr-t-font-fontWeight-semibold);

				&::after {
					content: '';
					position: absolute;
					inset: calc(var(--pr-t-spacings-50) * -1);
				}
			}
		}

		.inputFramed-header-illustration {
			&:empty {
				display: none;
			}
		}

		.inputFramed-header-info {
			flex-basis: 100%;
			border-block-start: 1px solid var(--components-inputFramed-header-info-borderColor);
			padding-block-start: var(--components-inputFramed-header-info-paddingBlockStart);
			margin-block-start: var(--components-inputFramed-header-info-marginBlockStart);
			color: var(--components-inputFramed-header-info-color);

			&:empty {
				display: none;
			}
		}

		.inputFramed-content {
			display: var(--components-inputFramed-content-display);
			padding: var(--components-inputFramed-content-padding);
			margin-block-start: var(--components-inputFramed-content-marginBlockStart);
		}
	}
}

@mixin wrapper($atRoot: namespace.$defaultAtRoot) {
	display: flex;
	flex-direction: column;
	gap: var(--components-inputFramed-wrapper-gap);
	margin-block: var(--pr-t-spacings-50);
}