@use "../../mixins/index.scss" as *;
@use "../../functions/index.scss" as *;
@use "../../color-system/_functions.scss" as *;
@use "../../_variables.scss" as *;
@use "./variables.scss" as *;

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

    .k-bottom-nav {
    // 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: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent),
                        $bg: k-color(#{$name})
                    );

                    .k-bottom-nav-item.k-focus,
                    .k-bottom-nav-item:focus {
                        @include fill( $bg: color-mix(in srgb, k-color(on-#{$name}) 12.5%, transparent));
                    }

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

        // Fillmode: flat
        #{k-when-default($kendo-bottom-nav-default-fill-mode, "flat")}
        &.k-bottom-nav-flat {
            @include fill(
                $kendo-bottom-nav-flat-text,
                $kendo-bottom-nav-flat-bg,
                $kendo-bottom-nav-flat-border
            );

            .k-bottom-nav-item.k-focus,
            .k-bottom-nav-item:focus {
                @include fill( $bg: color-mix(in srgb, k-color(on-app-surface) 5%, transparent));
            }

            // Theme colors
            @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 {
                        @include fill( $color: k-color(#{$name}-on-surface));
                    }
                }
            }
        }
    }

}