@use "sass:map";
@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 {

        // 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} {
                    color: k-color(on-#{$name});
                    background-color: k-color(#{$name});
                    border-color: k-color(#{$name});

                    .k-bottom-nav-item {
                        &:focus,
                        &.k-focus {
                            color: k-color(on-#{$name});
                            background-color: k-color(#{$name});
                            border-color: k-color(#{$name});
                            box-shadow: 0 0 0 2px k-color(border-alt) inset, 0 0 0 3px k-color(surface) inset;
                        }

                        &:active,
                        &.k-active,
                        &.k-selected {
                            color: k-color(on-#{$name});
                            background-color: k-color(#{$name}-active);
                            border-color: k-color(#{$name}-active);
                        }

                        &:disabled,
                        &.k-disabled {
                            color: color-mix(in srgb, k-color(on-#{$name}) 46%, transparent);
                            background-color: inherit;
                            border-color: transparent;
                        }
                    }
                }
            }
        }

        // 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} {
                    color: k-color(on-app-surface);
                    background-color: k-color(app-surface);
                    border-color: color-mix(in srgb, k-color(border) 16%, transparent);

                    @if ($name == "warning" or $name == "dark" or $name == "inverse") {
                        border-color: k-color(#{$name});
                    }

                    .k-bottom-nav-item {
                        &:focus,
                        &.k-focus {
                            color: k-color(#{$name}-on-surface);
                            background-color: inherit;
                            border-color: transparent;
                            box-shadow: 0 0 0 2px k-color(border-alt) inset;
                        }

                        &:active,
                        &.k-active,
                        &.k-selected {
                            color: k-color(#{$name}-on-surface);
                            background-color: inherit;
                            border-color: transparent;
                        }

                        &:disabled,
                        &.k-disabled {
                            color: color-mix(in srgb, k-color(on-app-surface) 46%, transparent);
                            background-color: initial;
                            border-color: initial;
                        }
                    }
                }
            }
        }
    }
}