@use "pkg:iro-design/core.vars" as core;
@use "pkg:iro-design/objects/avatar.vars" as avatar;
@use "pkg:iro-sass/props";

$avatar-size: props.def(--o-message--avatar-size, props.get(avatar.$size));

$dot-radius: props.def(--o-message--dot-radius, 6px);
$dot-width: props.def(--o-message--dot-width, 4px);

$spacing-x: props.def(--o-message--spacing-x, props.get(core.$size--200));
$spacing-y: props.def(--o-message--spacing-y, props.get(core.$size--150));
$spacing-inner: props.def(--o-message--spacing-inner, props.get(core.$size--500));
$spacing-outer: props.def(--o-message--spacing-outer, props.get(core.$size--700));
$spacing-attachments: props.def(--o-message--spacing-attachments, props.get(core.$size--200));

$line-width: props.def(--o-message--line-width, props.get(core.$border-width--medium));
$line-offset: props.def(
	--o-message--line-offset,
	calc(0.5 * props.get($avatar-size) - props.get($line-width))
);
$line-curve: props.def(--o-message--line-curve, props.get(core.$size--250));

$attachment-width: props.def(--o-message--attachment-width, props.get(core.$size--2000));

$colors: props.def(
	--o-message,
	(
		--meta: props.get(core.$theme, --text-mute-more),
		--line: props.get(core.$theme, --border),
		--dot: (
			--border: props.get(core.$theme, --text-mute-more),
			--bg: props.get(core.$theme, --bg-base),
		),
		--attachment: (
			--bg: props.get(core.$theme, --border-mute),
		),
	),
	"color"
);