@use "sass:map";
@use "../core/_index.scss" as *;

/// The horizontal padding of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-padding-x: k-spacing(1.5) !default;
/// The vertical padding of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
/// The spacing between the BottomNavigation items.
/// @group bottom-navigation
$kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
/// The width of the border around the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
/// The font family of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-font-family: var( --kendo-font-family, inherit) !default;
/// The font size of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-font-size: var( --kendo-font-size, 1rem ) !default;
/// The line height of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-line-height: var( --kendo-line-height-xs, normal ) !default;
/// The letter spacing of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-letter-spacing: .2px !default;

/// The horizontal padding of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-padding-x: k-spacing(2) !default;
/// The vertical padding of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-padding-y: k-spacing(0.5) !default;
/// The minimum width of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-min-width: 72px !default;
/// The maximum width of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-max-width: none !default;
/// The minimum height of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-min-height: calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) !default;
/// The border radius of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-border-radius: k-border-radius(md) !default;
/// The spacing of the BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-gap: k-spacing(1) !default;

/// The offset of the focused BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-focus-offset: k-spacing(0.5) !default;
/// The outline width of the focused BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-focus-outline-width: 1px !default;
/// The outline style of the focused BottomNavigation item.
/// @group bottom-navigation
$kendo-bottom-nav-item-focus-outline-style: solid !default;

/// The box shadow of the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-4, none ) !default;

/// The theme variations for the BottomNavigation.
/// @group bottom-navigation
$kendo-bottom-nav-brand-colors: (
    primary: primary,
    error: error,
    success: success,
    info: info,
    secondary: if($kendo-enable-color-system, secondary, neutral),
    tertiary: tertiary,
 ) !default;

// Matrix with BottomNavigation theme colors in the order: bg, color, border
$_tc-bottom-nav-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
        focus: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-white, 100, inherit)),
        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (120, $kendo-color-white, 120)),
        disabled: if($kendo-enable-color-system, (inherit, on-color-disabled, transparent), ( inherit, 40, var( --kendo-disabled-border, inherit )))
    ),
    flat: (
        normal: if($kendo-enable-color-system, (app-surface, on-app-surface, color-mix(in srgb, k-color( border ) 16%, transparent)), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-30 ))),
        focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 100, transparent, 100)),
        active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 100, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
    )
) !default;

$_tc-bottom-nav-warning-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100)),
        focus: if($kendo-enable-color-system, (color, on-color, color, app-surface), (100, k-get-theme-color-var( neutral-160 ), 100, $kendo-color-white)),
        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (120, k-get-theme-color-var( neutral-190 ), 120)),
        disabled: if($kendo-enable-color-system, (inherit, on-color-disabled, transparent), (inherit, k-get-theme-color-var( neutral-120 ), var( --kendo-disabled-border, inherit )))
    ),
    flat: (
        normal: if($kendo-enable-color-system, (app-surface, on-app-surface, color), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), 100)),
        focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 100, transparent, 100)),
        active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 100, transparent)),
        disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
    )
) !default;

$_tc-bottom-nav-dark-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
        focus: if($kendo-enable-color-system, (color, on-color, color, on-color), (160, $kendo-color-white, 160, $kendo-color-white)),
        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (180, $kendo-color-white, 180)),
        disabled: if($kendo-enable-color-system, (inherit, on-color-disabled, transparent), (inherit, 60 , var( --kendo-disabled-border, inherit )))
    ),
    flat: (
        normal: if($kendo-enable-color-system, (app-surface, on-app-surface, color), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-140 ))),
        focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 160, transparent, 130)),
        active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 170, transparent)),
        disabled: if($kendo-enable-color-system, (inherit, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (inherit, var( --kendo-disabled-text, inherit ), initial))
    )
) !default;

$_tc-bottom-nav-light-matrix: (
    solid: (
        normal: if($kendo-enable-color-system, (color, on-color, color), (50, k-get-theme-color-var( neutral-160 ), 50)),
        focus: if($kendo-enable-color-system, (color, on-color, color, app-surface), (50, 190, 50, $kendo-color-white)),
        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (70, 190, 70)),
        disabled: if($kendo-enable-color-system, (inherit, on-color-disabled, transparent), (inherit, 120 , var( --kendo-disabled-border, inherit )))
    ),
    flat: (
        normal: if($kendo-enable-color-system, (app-surface, on-app-surface, transparent), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), transparent)),
        focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 130, transparent, 130)),
        active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 130, transparent)),
        disabled: if($kendo-enable-color-system, (inherit, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (inherit, var( --kendo-disabled-text, inherit ), initial))
    )
) !default;

/// The theme colors map for the BottomNavigation variations.
/// @group bottom-navigation
$kendo-bottom-nav-theme-colors: () !default;

@each $fill-mode, $ui-states in $_tc-bottom-nav-matrix {
    @each $brand-color, $palette in $kendo-bottom-nav-brand-colors {
        $kendo-bottom-nav-theme-colors: map.deep-merge(
            $kendo-bottom-nav-theme-colors,
            k-generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
        );
    };
}

@each $fill-mode, $ui-states in $_tc-bottom-nav-warning-matrix {
    $kendo-bottom-nav-theme-colors: map.deep-merge(
        $kendo-bottom-nav-theme-colors,
        k-generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
    );
}

@each $fill-mode, $ui-states in $_tc-bottom-nav-dark-matrix {
    $kendo-bottom-nav-theme-colors: map.deep-merge(
        $kendo-bottom-nav-theme-colors,
        k-generate-fill-mode-theme-variation( $fill-mode, dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
    );
}

@each $fill-mode, $ui-states in $_tc-bottom-nav-light-matrix {
    $kendo-bottom-nav-theme-colors: map.deep-merge(
        $kendo-bottom-nav-theme-colors,
        k-generate-fill-mode-theme-variation( $fill-mode, light, if($kendo-enable-color-system, light, neutral), $ui-states )
    );
}