@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/fab/_theme.scss" as *;

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

    .k-fab {
        &.k-generating {
            animation: k-fab-generating 1.5s ease-in-out 0.5s infinite;
        }

        @keyframes k-fab-generating {
            0% {
                background-color: $kendo-fab-item-active-bg;
                border-color: $kendo-fab-item-active-bg;
            }
            50% {
                background-color: color-mix(in srgb, $kendo-fab-item-active-bg $kendo-fab-generating-opacity, k-color(surface-alt));
                border-color: color-mix(in srgb, $kendo-fab-item-active-bg $kendo-fab-generating-opacity, k-color(surface-alt));
            }
            100% {
                background-color: $kendo-fab-item-active-bg;
                border-color: $kendo-fab-item-active-bg;
            }
        }

        &:focus::before,
        &.k-focus::before {
            outline-color: $kendo-fab-item-focus-outline;
        }

        &:focus::after,
        &.k-focus::after {
            outline-color: k-color(surface);
        }

        &:disabled,
        &.k-disabled {
            color: $kendo-fab-disabled-text;
            background-color: $kendo-fab-disabled-bg;
            border-color: $kendo-fab-disabled-border;
            box-shadow: none;
        }

        #{k-when-default($kendo-fab-default-fill-mode, "solid")}
        &.k-fab-solid {
            #{k-when-default($kendo-fab-default-theme-color, ("warning", "light"))}
            &.k-fab-warning,
            &.k-fab-light {
                &:focus::after,
                &.k-focus::after {
                    outline-color: k-color(app-surface);
                }
            }
        }
    }

    .k-fab-item-text,
    .k-fab-item-icon {
        @include fill(
            $kendo-fab-item-text,
            $kendo-fab-item-bg,
            $kendo-fab-item-border
        );
    }

    .k-fab-item {

        // Hover
        &:hover,
        &.k-hover {
            .k-fab-item-icon {
                color: $kendo-fab-item-hover-text;
                background-color: $kendo-fab-item-hover-bg;
                border-color: $kendo-fab-item-hover-border;
            }

            .k-fab-item-text {
                color: $kendo-fab-item-hover-text;
                background-color: $kendo-fab-item-hover-bg;
                border-color: $kendo-fab-item-hover-border;
            }
        }

        // Focus
        &:focus,
        &.k-focus {
            .k-fab-item-text,
            .k-fab-item-icon {
                color: $kendo-fab-item-focus-text;
                background-color: $kendo-fab-item-focus-bg;
                border-color: $kendo-fab-item-focus-border;
                outline-color: $kendo-fab-item-focus-outline;
            }
        }

        // Active
        &:active,
        &.k-active {
            .k-fab-item-icon {
                color: $kendo-fab-item-active-text;
                background-color: $kendo-fab-item-active-bg;
                border-color: $kendo-fab-item-active-border;
            }

            .k-fab-item-text {
                color: $kendo-fab-item-active-text;
                background-color: $kendo-fab-item-active-bg;
                border-color: $kendo-fab-item-active-border;
            }
        }

        // Disabled
        &:disabled,
        &.k-disabled {
            background-color: transparent;
        }

        &:disabled .k-fab-item-icon,
        &.k-disabled .k-fab-item-icon,
        &:disabled .k-fab-item-text,
        &.k-disabled .k-fab-item-text {
            @include disabled(
                $kendo-fab-disabled-text,
                $kendo-fab-disabled-bg,
                $kendo-fab-disabled-border
            );
        }
    }

}