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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: flex;
	align-items: center;
	gap: var(--pr-t-spacings-100);
	background-color: var(--pr-t-elevation-surface-raised);
	box-shadow: 0 1px 0 var(--commons-border-100);
	padding-block: var(--pr-t-spacings-75);
	padding-inline: var(--pr-t-spacings-150);
	min-block-size: 3.5rem;

	@at-root ($atRoot) {
		.mobileHeader-title {
			flex: 1;
			text-align: center;
		}

		.mobileHeader-title-main {
			margin: 0;
			padding: 0;
			font: var(--pr-t-font-heading-4);
			font-weight: var(--pr-t-font-fontWeight-bold);
			color: var(--pr-t-color-text-heading);
		}

		.mobileHeader-title-sub {
			font: var(--pr-t-font-body-S);
			color: var(--palettes-neutral-700);
		}
	}
}