@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() {

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

            // Theme colors
            @each $name in $kendo-fab-theme-colors {

                // Normal state
                #{k-when-default($kendo-fab-default-theme-color, $name)}
                &.k-fab-#{$name} {
                    @include box-shadow( $kendo-fab-shadow );
                    outline: $kendo-fab-border-width $kendo-fab-outline-style k-color($name);
                    outline-offset: -$kendo-fab-border-width;
                    border-color: k-color($name);
                    color: k-color(on-#{$name});
                    background-color: k-color($name);

                    // Hover state
                    &:hover,
                    &.k-hover {
                        border-color: k-color(#{$name}-hover);
                        color: k-color(on-#{$name});
                        background-color: k-color(#{$name}-hover);
                    }

                    // Focus state
                    &:focus,
                    &.k-focus {
                        outline: $kendo-fab-outline-width $kendo-fab-outline-style color-mix(in srgb, k-color($name) 50%, transparent);
                    }

                    // Active state
                    &:active,
                    &.k-active,
                    &.k-selected {
                        @include box-shadow( $kendo-fab-active-shadow );
                        border-color: k-color(#{$name}-active);
                        color: k-color(on-#{$name});
                        background-color: k-color(#{$name}-active);
                    }

                    // Disabled state
                    &:disabled,
                    &.k-disabled {
                        @include box-shadow( $kendo-fab-disabled-shadow );
                        background-color: color-mix(in srgb, k-color($name) 65%, transparent);
                        color: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent);
                        opacity: 1;
                    }
                }
            }

            // Generating state
            #{k-when-default($kendo-fab-default-theme-color, "primary")}
            &.k-fab-primary {

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

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

    // Items
    .k-fab-item-text {
        @include fill(
            $kendo-fab-item-text,
            $kendo-fab-item-bg,
            $kendo-fab-item-border
        );
        @include box-shadow( $kendo-fab-item-shadow );
    }
    .k-fab-item-icon {
        @include fill(
            $kendo-fab-item-icon-text,
            $kendo-fab-item-icon-bg,
            $kendo-fab-item-icon-border
        );
        @include box-shadow( $kendo-fab-item-shadow );
        outline: $kendo-fab-border-width $kendo-fab-item-outline-style $kendo-fab-item-outline-color;
        outline-offset: -$kendo-fab-border-width;
    }

    // Hover state
    .k-fab-item:hover .k-fab-item-icon,
    .k-fab-item.k-hover .k-fab-item-icon {
        @include box-shadow( $kendo-fab-item-shadow );
        outline: $kendo-fab-border-width $kendo-fab-item-outline-style k-color(base-hover);
        outline-offset: -$kendo-fab-border-width;
        border-color: k-color(base-hover);
        color: k-color(on-base);
        background-color: k-color(base-hover);
    }

    // Focus state
    .k-fab-item:focus .k-fab-item-text,
    .k-fab-item.k-focus .k-fab-item-text,
    .k-fab-item:focus .k-fab-item-icon,
    .k-fab-item.k-focus .k-fab-item-icon {
        outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style color-mix(in srgb, k-color(base) 50%, transparent);
    }

    // Active state
    .k-fab-item:active .k-fab-item-icon,
    .k-fab-item.k-active .k-fab-item-icon {
        @include box-shadow( $kendo-fab-item-active-shadow );
        outline: $kendo-fab-border-width solid k-color(base-active);
        outline-offset: -$kendo-fab-border-width;
        border-color: k-color(base-active);
        color: k-color(on-base);
        background-color: k-color(base-active);
    }

    // Disabled state
    .k-fab-item:disabled,
    .k-fab-item.k-disabled {
        opacity: 1;

        .k-fab-item-text,
        .k-fab-item-icon {
            @include box-shadow( $kendo-fab-item-disabled-shadow );
            background-color: color-mix(in srgb, k-color(base) 65%, transparent);
            color: color-mix(in srgb, k-color(on-base) 65%, transparent);
        }
    }

    // Popup
    .k-fab-popup {
        @include box-shadow( none );
    }

}