@use "sass:map";
@use "sass:string";
@use "pkg:iro-sass/props";
@use "../core.vars" as core;

$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
$vertical--border-width: props.def(
	--o-divider--vertical--width,
	props.get(core.$border-width--thin)
) !default;
$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
$letter-spacing: props.def(--o-divider--letter-spacing, 1px) !default;

$strong--border-width: props.def(
	--o-divider--strong--border-width,
	props.get(core.$border-width--thick)
) !default;
$strong--label-font-size: props.def(
	--o-divider--strong--label-font-size,
	props.get(core.$font-size--100)
) !default;

$medium--border-width: props.def(
	--o-divider--medium--border-width,
	props.get(core.$border-width--medium)
) !default;
$medium--label-font-size: props.def(
	--o-divider--medium--label-font-size,
	props.get(core.$font-size--75)
) !default;

$quiet--border-width: props.def(
	--o-divider--quiet--border-width,
	props.get(core.$border-width--thin)
) !default;
$quiet--label-font-size: props.def(
	--o-divider--quiet--label-font-size,
	props.get(core.$font-size--50)
) !default;

$faint--border-width: props.def(
	--o-divider--faint--border-width,
	props.get(core.$border-width--thin)
) !default;
$faint--label-font-size: props.def(
	--o-divider--faint--label-font-size,
	props.get(core.$font-size--50)
) !default;

$strong--bg-color: props.def(
	--o-divider--strong--bg-color,
	props.get(core.$theme, --text),
	"color"
) !default;
$strong--label-color: props.def(
	--o-divider--strong--label-color,
	props.get(core.$theme, --text),
	"color"
) !default;

$medium--bg-color: props.def(
	--o-divider--medium--bg-color,
	props.get(core.$theme, --border),
	"color"
) !default;
$medium--label-color: props.def(
	--o-divider--medium--label-color,
	props.get(core.$theme, --text-mute),
	"color"
) !default;

$quiet--bg-color: props.def(
	--o-divider--quiet--bg-color,
	props.get(core.$theme, --border),
	"color"
) !default;
$quiet--label-color: props.def(
	--o-divider--quiet--label-color,
	props.get(core.$theme, --text-mute-more),
	"color"
) !default;

$faint--bg-color: props.def(
	--o-divider--faint--bg-color,
	props.get(core.$theme, --border-mute),
	"color"
) !default;
$faint--label-color: props.def(
	--o-divider--faint--label-color,
	props.get(core.$theme, --text-disabled),
	"color"
) !default;

$vertical--quiet--bg-color: props.def(
	--o-divider--vertical--quiet--bg-color,
	props.get(core.$theme, --border-mute),
	"color"
) !default;

$dot--quiet--bg-color: props.def(
	--o-divider--dot--quiet--bg-color,
	props.get(core.$theme, --border-mute),
	"color"
) !default;

$static-themes: props.def(--o-divider, (), "color");

@each $theme in map.keys(props.get(core.$transparent-colors)) {
	$button-theme: --static-#{string.slice($theme, 3)};

	$static-themes: props.merge(
		$static-themes,
		(
			$button-theme: (
					--strong: (
							--bg: props.get(core.$transparent-colors, $theme, --800),
							--label: props.get(core.$transparent-colors, $theme, --900),
						),
					--medium: (
							--bg: props.get(core.$transparent-colors, $theme, --300),
							--label: props.get(core.$transparent-colors, $theme, --500),
						),
					--quiet: (
							--bg: props.get(core.$transparent-colors, $theme, --300),
							--label: props.get(core.$transparent-colors, $theme, --500),
						),
					--faint: (
							--bg: props.get(core.$transparent-colors, $theme, --200),
							--label: props.get(core.$transparent-colors, $theme, --400),
						),
				),
		)
	);
}

$themes-config: (
	accent: --accent,
	negative: --negative,
) !default;

$themes: props.def(--o-divider, (), "color");

@each $theme, $key in $themes-config {
	$themes: props.merge(
		$themes,
		(
			--#{$theme}: (
					--bg: props.get(core.$theme, $key, --800),
					--label: props.get(core.$theme, $key, --1000),
				)
		)
	);
}