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

$block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default;
$spacing:    props.def(--o-tabs--spacing, props.get(core.$size--200)) !default;

$item--pad-i:     props.def(--o-navbar--item--pad-i, props.get(core.$size--175)) !default;
$item--pad-b:     props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;

$key-focus--border-width:  props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;

$default-theme-override: () !default;
$default-theme: map.deep-merge((
    --label-color:  props.get(core.$theme, --text),

    --hover: (
        --bg-color:    props.get(core.$theme, --border-mute),
        --label-color: props.get(core.$theme, --heading),
    ),

    --active: (
        --bg-color:    props.get(core.$theme, --border),
        --label-color: props.get(core.$theme, --heading),
    ),

    --disabled: (
        --label-color: props.get(core.$theme, --border-strong),
    ),

    --key-focus: (
        --label:   props.get(core.$theme, --focus, --text),
        --border:  props.get(core.$theme, --focus, --border),
        --outline: props.get(core.$theme, --focus, --outline),
    ),

    --selected: (
        --bg-color:     props.get(core.$theme, --heading),
        --label-color:  props.get(core.$theme, --base, --50),

        --hover: (
            --bg-color:     props.get(core.$theme, --text),
            --label-color:  props.get(core.$theme, --base, --50),
        ),

        --active: (
            --bg-color:     props.get(core.$theme, --text-mute),
            --label-color:  props.get(core.$theme, --base, --50),
        ),

        --disabled: (
            --bg-color:     props.get(core.$theme, --border-mute),
            --label-color:  props.get(core.$theme, --border-strong),
        ),
    ),

    --quiet: (
        --selected: (
            --bg-color:     props.get(core.$theme, --accent, --200),
            --label-color:  props.get(core.$theme, --accent, --1100),

            --hover: (
                --bg-color:     props.get(core.$theme, --accent, --300),
                --label-color:  props.get(core.$theme, --accent, --1200),
            ),
    
            --active: (
                --bg-color:     props.get(core.$theme, --accent, --400),
                --label-color:  props.get(core.$theme, --accent, --1300),
            ),

            --disabled: (
                --bg-color:     props.get(core.$theme, --accent, --200),
                --label-color:  props.get(core.$theme, --accent, --800),
            ),
        )
    )
), $default-theme-override) !default;
$default-theme: props.def(--o-navbar, $default-theme, 'color');