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


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

    .k-bottom-nav {
        backdrop-filter: k-translucency-blur(2);

        .k-bottom-nav-item.k-focus,
        .k-bottom-nav-item:focus {
            @include focus-indicator(
                $indicator: currentColor,
                $type: "outline",
                $outline-width: $kendo-bottom-nav-item-focus-outline-width,
                $outline-offset: $kendo-bottom-nav-item-focus-outline-offset
            );
        }
        // Fillmodes: solid, flat - focus state
        @each $fill in ("solid", "flat") {
            #{k-when-default($kendo-bottom-nav-default-fill-mode, $fill)}
            &.k-bottom-nav-#{$fill} {
                @each $name in $kendo-bottom-navigation-theme-colors {
                    #{k-when-default($kendo-bottom-nav-default-theme-color, $name)}
                    &.k-bottom-nav-#{$name} {
                        .k-bottom-nav-item.k-focus,
                        .k-bottom-nav-item:focus {
                            background-color: transparent;
                        }
                    }
                }
            }
        }

        // Fillmode: solid
        #{k-when-default($kendo-bottom-nav-default-fill-mode, "solid")}
        &.k-bottom-nav-solid {
            @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}),
                        $bg: k-translucency-bg(k-color(#{$name}))
                    );

                    .k-bottom-nav-item.k-selected {
                        @if $name == "inverse" {
                            @include fill(
                                $bg: k-color(inverse-active),
                                $color: k-color(on-inverse)
                            );
                        } @else {
                            @include fill(
                                $bg: k-color(#{$name}-subtle-active),
                                $color: k-color(#{$name}-on-subtle)
                            );
                        }
                    }
                }
            }
        }

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