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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: inline-block;
	vertical-align: middle;
	border-radius: var(--components-avatar-borderRadius);
	inline-size: var(--components-avatar-size);
	aspect-ratio: 1;

	@at-root ($atRoot) {
		.avatar-picture {
			background-color: var(--components-avatar-picture-background);
			border-radius: var(--components-avatar-borderRadius);
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			inline-size: var(--components-avatar-size);
			object-fit: cover;
			object-position: center;
			aspect-ratio: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.avatar-picture-initials {
			font-size: var(--components-avatar-fontSize);
			font-weight: var(--pr-t-font-fontWeight-bold);
			font-family: var(--pr-t-font-family-brand);
			line-height: 1;
			color: var(--pr-t-color-text-reverse);
			display: var(--components-avatar-picture-initials-display);
		}

		.avatarWrapper {
			@include reset.list;

			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			row-gap: var(--components-avatarWrapper-rowGap);

			.avatar {
				box-shadow: 0 0 0 var(--components-avatar-border) var(--components-avatar-background);
			}
		}

		.avatarWrapper-item {
			&:not(:last-child) {
				margin-inline-end: calc(var(--components-avatarWrapper-overlap) * -1);
			}
		}

		.avatarWrapper-item-action {
			@include reset.button;

			display: flex;
			text-decoration: none;
			transition: transform var(--commons-animations-durations-fast);
			transform: scale(var(--components-avatarWrapper-scale));
			color: currentColor;

			&:hover,
			&:focus {
				--components-avatarWrapper-scale: 1.1;
			}

			&:focus-visible {
				@include a11y.focusVisible($borderRadius: var(--pr-t-border-radius-full));
			}
		}

		.avatarWrapper-item-action-more {
			box-shadow: 0 0 0 var(--components-avatar-border) var(--components-avatar-background);
			border-radius: var(--pr-t-border-radius-full);
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: var(--palettes-neutral-200);
			inline-size: var(--components-avatar-size);
			block-size: var(--components-avatar-size);
			font-size: var(--components-avatarWrapper-fontSize);
		}
	}
}