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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	box-shadow: var(--pr-t-elevation-shadow-overflow);
	background-color: var(--components-header-background);
	min-block-size: var(--components-header-height);
	padding: var(--components-header-padding);
	position: var(--components-header-position);
	display: flex;
	align-items: center;
	z-index: 99;

	@at-root ($atRoot) {
		.header-contentLeft {
			display: flex;
		}

		.header-contentRight {
			display: flex;
			margin-inline-start: auto;
		}

		.header-nav {
			block-size: var(--components-header-height);
			padding-inline-start: calc(var(--components-header-height) + var(--pr-t-spacings-200));
			align-items: flex-start;
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: relative;
		}

		.header-nav-back {
			transition-duration: var(--commons-animations-durations-fast);
			transition-property: all;
			border-inline-end-color: var(--commons-divider-color);
			border-inline-end-width: var(--commons-divider-width);
			border-inline-end-style: solid;
			color: var(--palettes-neutral-500);
			block-size: var(--components-header-height);
			inline-size: var(--components-header-height);
			line-height: var(--components-header-height);
			font-size: 1.3rem;
			inset-inline-start: 0;
			inset-block-start: 0;
			position: absolute;
			display: block;
			text-align: center;
			text-decoration: none;

			&:hover {
				background-color: var(--palettes-neutral-25);
				color: var(--palettes-neutral-800);
			}

			&::before {
				@include icon.generate('arrow_left');
			}
		}

		.header-nav-category {
			color: var(--palettes-neutral-500);
			font-size: var(--pr-t-font-body-S-fontSize);
		}

		.header-nav-title {
			color: var(--palettes-product-700);
			line-height: var(--pr-t-font-body-XS-lineHeight);
			margin: 0;
		}
	}
}