@use '@lucca-front/icons/src/commons/utils/icon';
@use '@lucca-front/icons/src/icon/exports' as icons;

@mixin XS {
	--components-avatar-size: 1.5rem;
	--components-avatar-fontSize: var(--pr-t-font-fontSize-150);
	--components-avatar-placeholder-size: 0.75rem;
	--components-avatar-border: 1px;
}

@mixin S {
	--components-avatar-size: 2rem;
	--components-avatar-fontSize: var(--pr-t-font-fontSize-175);
	--components-avatar-placeholder-size: 1rem;
}

@mixin L {
	--components-avatar-size: 3rem;
	--components-avatar-fontSize: var(--pr-t-font-fontSize-225);
	--components-avatar-placeholder-size: 1.75rem;
}

@mixin XL {
	--components-avatar-size: 4rem;
	--components-avatar-fontSize: var(--pr-t-font-fontSize-275);
	--components-avatar-placeholder-size: 2rem;
}

@mixin XXL {
	--components-avatar-size: 5rem;
	--components-avatar-fontSize: var(--pr-t-font-fontSize-350);
	--components-avatar-placeholder-size: 2.25rem;
}

@mixin XXXL {
	--components-avatar-size: 6rem;
	--components-avatar-fontSize: 2.25rem;
	--components-avatar-placeholder-size: 2.5rem;
}

@mixin wrapperXL {
	.avatar,
	.avatarWrapper-item-action {
		@include XL;
	}
}

@mixin wrapperL {
	.avatar,
	.avatarWrapper-item-action {
		@include L;
	}
}

@mixin wrapperS {
	--components-avatarWrapper-overlap: var(--pr-t-spacings-50);
	--components-avatarWrapper-rowGap: var(--pr-t-spacings-25);

	.avatar,
	.avatarWrapper-item-action {
		@include S;
	}
}

@mixin wrapperXS {
	--components-avatarWrapper-overlap: var(--pr-t-spacings-50);
	--components-avatarWrapper-rowGap: var(--pr-t-spacings-25);

	.avatar,
	.avatarWrapper-item-action {
		@include XS;
	}
}

@mixin placeholder {
	--components-avatar-picture-initials-display: none;

	.avatar-picture {
		background-color: var(--palettes-neutral-200) !important;

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

			color: var(--palettes-neutral-600);
			font-weight: var(--pr-t-font-fontWeight-regular);
			font-size: var(--components-avatar-placeholder-size);
		}
	}
}

@mixin AI {
	--components-avatar-borderRadius: var(--pr-t-border-radius-default);
	--components-avatar-picture-background: var(--palettes-neutral-0);
	--components-avatar-picture-initials-display: none;

	.avatar-picture {
		&::before {
			@include icons.AI;
			@include icon.generate('weather_stars');

			font-size: var(--components-avatar-AI-size);
		}
	}
}