@use "../core/_index.scss" as *;
@use "../core/functions/index.scss" as *;
@use "./_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_theme.scss" as *;

@mixin kendo-bottom-navigation--theme() {

    @include kendo-bottom-navigation--theme-base();

    .k-bottom-nav {
        .k-bottom-nav-item.k-selected {
            font-weight: var(--kendo-font-weight-bold, normal );
        }


        // Fillmode: solid
        #{k-when-default($kendo-bottom-nav-default-fill-mode, "solid")}
        &.k-bottom-nav-solid {
            // Theme colors
            @each $name in $kendo-bottom-navigation-theme-colors {
                #{k-when-default($kendo-bottom-nav-default-theme-color, $name)}
                &.k-bottom-nav-#{$name} {
                    @include fill(
                        $color: k-color(on-#{$name})
                    );

                    .k-bottom-nav-item.k-focus,
                    .k-bottom-nav-item:focus,
                    .k-bottom-nav-item.k-selected {
                        @include fill( $bg: k-color(#{$name}-active));
                    }
                }
            }
        }

        // Fillmode: flat
        #{k-when-default($kendo-bottom-nav-default-fill-mode, "flat")}
        &.k-bottom-nav-flat {
            // Theme colors
            @each $name in $kendo-bottom-navigation-theme-colors {
                #{k-when-default($kendo-bottom-nav-default-theme-color, $name)}
                &.k-bottom-nav-#{$name} {
                    @if $name == "primary"  {
                        color: k-color(subtle);
                    } @else {
                        $color: k-color(#{$name}-on-surface);
                    }

                    @if $name == "primary" or $name == "secondary" {
                        background: k-color(surface);
                    } @else if $name == "light" {
                        background: k-color(dark-subtle);
                    } @else if $name == "dark"  {
                        background: k-color(light-subtle);
                    } @else {
                        background: k-color(#{$name}-subtle);
                    }

                    .k-bottom-nav-item.k-focus,
                    .k-bottom-nav-item:focus,
                    .k-bottom-nav-item.k-selected {
                        background: color-mix(in srgb, currentColor 12%, transparent);
                    }

                    .k-bottom-nav-item.k-selected {
                        @if $name == "primary"  {
                            @include fill(
                                $color: k-color(on-secondary),
                                $bg: k-color(secondary)
                            );
                        } @else {
                            @include fill(
                                $color: k-color(#{$name}-on-surface),
                                $bg: color-mix(in srgb, currentColor 12%, transparent)
                            );
                        }
                    }
                }
            }
        }
    }
}