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

@mixin S {
	--components-comment-text-font: var(--pr-t-font-body-S);
}

@mixin wrapperS {
	.comment {
		@include S;
	}
}

@mixin noAvatar {
	--components-comment-content-margin: 0;
}

@mixin narrow {
	@at-root (namespace.$defaultAtRoot) {
		.comment-infos-content {
			--components-comment-info-content-display: flex;
		}

		.comment-infos-name + .comment-infos-date {
			&::before {
				--components-comment-info-separator: none;
			}
		}
	}
}

@mixin wrapperCompact {
	.commentWrapper-item {
		&:not(:first-child) {
			.comment-infos {
				@include a11y.mask;
			}
		}
	}
}

@mixin chatAnswer {
	.comment {
		--components-comment-info-direction: row-reverse;
		--components-comment-background-color: var(--palettes-product-50);
		--components-comment-align: end;
		--components-comment-margin: auto;
		--components-comment-border-radius:
			var(--pr-t-border-radius-default)
			var(--pr-t-border-radius-small)
			var(--pr-t-border-radius-default)
			var(--pr-t-border-radius-default);
	}

	.comment-content {
		margin-block: 0;
		margin-inline: 0 var(--components-comment-content-margin);
	}
}