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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	border: 0;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--components-fieldset-gap);
	grid-template-columns: auto;

	@at-root ($atRoot) {
		.fieldset-title {
			font: var(--components-fieldset-title);
			color: var(--pr-t-color-text-heading);
			padding: 0;
			margin: 0;
			inline-size: 100%;
			min-block-size: var(--pr-t-spacings-300);
			display: contents;

			&:has(.fieldset-title-content-text:empty) {
				display: none;
			}
		}

		.fieldset-title-content {
			border: 0;
			padding: 0;
			margin: 0;
			inline-size: 100%;
			background-color: transparent;
			text-align: start;
			display: flex;
			flex-wrap: var(--components-fieldset-title-content-flexWrap);
			align-items: flex-start;
			justify-content: space-between;
			gap: var(--components-fieldset-gap);
			max-inline-size: var(--components-fieldset-contentMaxWidth);

			&[aria-expanded] {
				.icon-arrowChevronBottom {
					transform: rotate(var(--components-fieldset-title-iconRotation));
					transition-property: transform;
					transition-duration: var(--commons-animations-durations-fast);
					color: var(--palettes-neutral-700);
				}
			}
		}

		.fieldset-title-content-text {
			padding-block: var(--pr-t-spacings-50);
		}

		.fieldset-title-content-text-helper {
			font: var(--pr-t-font-body-S);
			font-weight: var(--pr-t-font-fontWeight-regular);
			color: var(--palettes-neutral-700);
			display: block;
		}

		.fieldset-content {
			min-inline-size: 0;
		}
	}
}