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


@mixin kendo-fab--theme() {
    @include kendo-fab--theme-base();

    .k-fab {

        #{k-when-default($kendo-fab-default-fill-mode, "solid")}
        &.k-fab-solid {

            @each $name in $kendo-fab-theme-colors {
                @if $name == "base" {
                    #{k-when-default($kendo-fab-default-theme-color, $name)}
                    &.k-fab-#{$name} {
                        &:focus,
                        &.k-focus {
                            @include focus-indicator(
                                $indicator: k-color(subtle),
                                $type: "outline",
                                $outline-width: $kendo-button-focus-outline-width,
                                $outline-offset: $kendo-button-focus-outline-offset
                            );
                        }
                    }
                } @else {
                    #{k-when-default($kendo-fab-default-theme-color, $name)}
                    &.k-fab-#{$name} {
                        &:focus,
                        &.k-focus {
                            @include focus-indicator(
                                $indicator: k-color(#{$name}-on-surface),
                                $type: "outline",
                                $outline-width: $kendo-button-focus-outline-width,
                                $outline-offset: $kendo-button-focus-outline-offset
                            );
                        }
                    }
                }
            }
        }
    }

    // FAB item icon hover
    .k-fab-item.k-hover .k-fab-item-icon,
    .k-fab-item:hover .k-fab-item-icon {
        border-color: transparent;
        background-color: k-color(base-subtle-hover);
    }

    // FAB item focus
    .k-fab-item:focus .k-fab-item-icon,
    .k-fab-item.k-focus .k-fab-item-icon {
        @include focus-indicator(
            $indicator: k-color(subtle),
            $type: "outline",
            $outline-width: $kendo-button-focus-outline-width,
            $outline-offset: $kendo-button-focus-outline-offset
        );
    }

    // FAB item active
    .k-fab-item.k-active .k-fab-item-icon,
    .k-fab-item:active .k-fab-item-icon {
        border-color: transparent;
    }
}