@use '@lucca-front/scss/src/components/avatar/exports' as avatar;
@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) {
	inline-size: 23.5rem;
	max-inline-size: calc(100vw - var(--pr-t-spacings-200) * 2);
	padding: var(--pr-t-spacings-200);

	@at-root ($atRoot) {
		.userPopover_trigger {
			@include reset.button;

			inline-size: fit-content;

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

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

		.userPopover-details {
			display: flex;
			align-items: flex-start;
			gap: var(--pr-t-spacings-200);
		}

		.userPopover-details-info {
			min-inline-size: 0;
			flex-grow: 1;
		}

		.userPopover-details-info-name {
			margin: calc(var(--pr-t-spacings-50) * -1);
			padding: var(--pr-t-spacings-50);
			font: var(--pr-t-font-highlight-L);
			color: currentColor;
		}

		.userPopover-details-info-name-linkOptional {
			color: currentColor;
			text-decoration: underline;
			text-decoration-thickness: 0.75px;
			text-underline-offset: 3px;

			&:hover {
				color: currentColor;
				text-decoration-thickness: 1.5px;
			}
		}

		.userPopover-details-info-detail {
			margin-block-end: 0;
			font: var(--pr-t-font-body-S);
		}

		.userPopover-details-info-detail-workplace {
			display: flex;
			align-items: flex-start;
			gap: var(--pr-t-spacings-50);
			color: currentColor;
			text-decoration: none;

			&:is(a, button) {
				&:hover,
				&:focus {
					color: currentColor;

					.userPopover-details-info-detail-workplace-state {
						text-decoration: underline;
					}
				}
			}
		}
	}

	.userPopover-details-avatar {
		// :not(.class) is only there to increase specificity when the class isn’t present
		// but the class should be present, and this code is temporary
		&.avatar,
		&:not(.avatar) {
			@include avatar.XXXL;

			margin-block: var(--pr-t-spacings-50);
			margin-inline: 0;
		}
	}
}