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

$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !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;

$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)) !default;
$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text)) !default;

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

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

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

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

$themes-config: accent negative !default;

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

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