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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	padding: var(--components-pageHeader-padding);

	@at-root ($atRoot) {
		.pageHeader-containerOptional {
			padding: var(--commons-container-padding);
			max-inline-size: var(--commons-container-maxWidth);
		}

		.pageHeader-content {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			row-gap: var(--pr-t-spacings-100);
		}

		.pageHeader-content-title {
			display: flex;
			column-gap: var(--pr-t-spacings-150);
			align-items: center;
			flex-wrap: wrap;
			min-block-size: var(--pr-t-spacings-500);
		}

		.pageHeader-content-actions,
		.pageHeader-content-title-back,
		.pageHeader-content-title-actions,
		.pageHeader-content-title-leading,
		.pageHeader-content-title-trailing {
			&:empty {
				display: none;
			}
		}

		.pageHeader-content-actions {
			gap: var(--pr-t-spacings-150);
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			row-gap: var(--pr-t-spacings-200);

			.button {
				margin: 0;

				@include media.max('XS') {
					flex: 1;
				}
			}

			.textfield.mod-search,
			.form-field:has(.icon-searchMagnifyingGlass) {
				@include media.max('XS') {
					flex-basis: 100%;
				}
			}
		}

		.pageHeader-description {
			max-inline-size: var(--components-pageHeader-description-max-width);
			margin-block-start: var(--pr-t-spacings-100);
			color: var(--pr-t-color-text);
		}

		.pageHeader-description-paragraph {
			margin: 0;
		}
	}
}