@use '@lucca-front/scss/src/commons/utils/namespace';
@use '@lucca-front/scss/src/components/avatar/exports' as avatar;
@use '@lucca-front/scss/src/commons/utils/reset';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	display: flex;
	flex-direction: column;
	gap: var(--pr-t-spacings-50);
	max-inline-size: var(--components-comment-max-width);
	align-items: var(--components-comment-align);
	margin-inline-start: var(--components-comment-margin);

	&:has(.comment-infos) {
		container: comment / inline-size;
	}

	.avatar {
		@include avatar.XS;
	}

	@at-root ($atRoot) {
		.commentWrapper {
			display: flex;
			flex-direction: column;
			gap: var(--pr-t-spacings-100);
			margin: 0;
			padding: 0;
			list-style-type: none;
		}

		.comment-infos {
			display: flex;
			font-style: normal;
			gap: var(--pr-t-spacings-100);
			justify-content: flex-start;
			align-items: flex-start;
			flex-direction: var(--components-comment-info-direction);
		}

		.comment-infos-content {
			flex-direction: column;
			display: var(--components-comment-info-content-display);
			font: var(--pr-t-font-body-S);
			margin-block: var(--pr-t-spacings-25);
		}

		.comment-infos-date {
			color: var(--pr-t-color-text-subtle);
		}

		.comment-infos-name {
			color: var(--pr-t-color-text);

			& + .comment-infos-date {
				&::before {
					color: var(--palettes-neutral-400);
					padding-inline: 1ch;
					content: var(--components-comment-info-separator) / '';
				}
			}
		}

		.comment-content {
			background-color: var(--components-comment-background-color, var(--palettes-neutral-50));
			border-radius: var(--components-comment-border-radius);
			display: flex;
			flex-direction: column;
			gap: var(--pr-t-spacings-150);
			margin-block: 0;
			margin-inline: var(--components-comment-content-margin) 0;
			max-inline-size: fit-content;
			padding-block: var(--pr-t-spacings-100);
			padding-inline: var(--pr-t-spacings-150);
		}

		.comment-content-text {
			margin-block-end: 0;
			overflow-wrap: break-word;
			font: var(--components-comment-text-font);
		}

		.comment-content-textContainerOptional {
			display: flex;
			flex-direction: column;
			gap: var(--pr-t-spacings-100);
			font: var(--components-comment-text-font);

			> * {
				margin: 0;
			}
		}
	}
}

@mixin chat {
	@include reset.list;

	display: flex;
	flex-direction: column;
	gap: var(--pr-t-spacings-200);

	.comment {
		--components-comment-max-width: min(66ch, calc(100% - var(--components-comment-content-margin)));
	}
}