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

$pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;

$controls--pad-i: props.def(--o-lightbox--controls--pad-i, props.get(core.$size--150)) !default;
$controls--block-size: props.def(
	--o-lightbox--controls--block-size,
	props.get(core.$size--550)
) !default;

$controls--shadow-x: props.def(
	--o-lightbox--controls--shadow-x,
	props.get(core.$shadow--l2--x)
) !default;
$controls--shadow-y: props.def(
	--o-lightbox--controls--shadow-y,
	props.get(core.$shadow--l2--y)
) !default;
$controls--shadow-blur: props.def(
	--o-lightbox--controls--shadow-blur,
	props.get(core.$shadow--l2--blur)
) !default;
$controls--shadow-grow: props.def(
	--o-lightbox--controls--shadow-grow,
	props.get(core.$shadow--l2--grow)
) !default;

$thumbnail--width: props.def(--o-lightbox--thumbnail--width, props.get(core.$size--600)) !default;
$thumbnail--spacing: props.def(
	--o-lightbox--thumbnail--spacing,
	props.get(core.$size--100)
) !default;
$thumbnail--active--width: props.def(
	--o-lightbox--thumbnail--active--width,
	props.get(core.$size--1000)
) !default;
$thumbnail--active--spacing: props.def(
	--o-lightbox--thumbnail--active--spacing,
	props.get(core.$size--250)
) !default;

$thumbnail--width--md: props.def(
	--o-lightbox--thumbnail--width,
	props.get(core.$size--400),
	"md"
) !default;
$thumbnail--active--width--md: props.def(
	--o-lightbox--thumbnail--active--width,
	props.get(core.$size--600),
	"md"
) !default;

$controls--bg: props.def(
	--o-lightbox--controls--bg,
	props.get(core.$transparent-colors, --black, --700),
	"color"
) !default;
$controls--shadow-color: props.def(
	--o-lightbox--controls--shadow-color,
	props.get(core.$transparent-colors, --black, --300),
	"color"
) !default;

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

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

	$static-themes: props.merge(
		$static-themes,
		(
			$lightbox-theme: (
					--text: props.get(core.$transparent-colors, $theme, --text),
				),
		)
	);
}