@use 'sass:map';
@use 'sass:string';
@use 'iro-sass/src/props';
@use '../core.vars' as core;

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

$controls--pad-x: props.def(--o-lightbox--controls--pad-x, props.get(core.$size--150)) !default;
$controls--pad-y: props.def(--o-lightbox--controls--pad-y, props.get(core.$size--50)) !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;

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

$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;

@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),
			--controls-bg: props.get(core.$transparent-colors, $theme, --700),
		)
	));
}