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


@mixin kendo-fab--theme() {

    // Normal state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-fab-solid-#{$name} {
            @include box-shadow($kendo-fab-shadow);
            border-color: k-color(#{$name}-subtle);
            color: k-color(#{$name}-on-subtle);
            background-color: k-color(#{$name}-subtle);
        }
    }

    // Hover state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-hover.k-fab-solid-#{$name},
        .k-fab-solid-#{$name}:hover {
            border-color: k-color(#{$name}-subtle-hover);
            background-color: k-color(#{$name}-subtle-hover);
            @include box-shadow(k-elevation(4));
        }
    }

    // Focus state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-focus.k-fab-solid-#{$name},
        .k-fab-solid-#{$name}:focus {
            border-color: k-color(#{$name}-subtle-active);
            background-color: k-color(#{$name}-subtle-active);
        }
    }

    // Active state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-active.k-fab-solid-#{$name},
        .k-selected.k-fab-solid-#{$name},
        .k-fab-solid-#{$name}:active {
            @include box-shadow($kendo-fab-active-shadow);
            border-color: k-color(#{$name}-subtle-active);
            background-color: k-color(#{$name}-subtle-active);
        }
    }

    // Disabled state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-disabled.k-fab-solid-#{$name},
        .k-fab-solid-#{$name}:disabled {
            @include box-shadow($kendo-fab-disabled-shadow);
            border-color: transparent;
            background-color: color-mix(in srgb, k-color(on-app-surface) 12%, transparent);
            color: color-mix(in srgb, k-color(on-app-surface) 38%, transparent);
            opacity: 1;
        }
    }

    // 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);
    }

    // Hover state
    .k-fab-item.k-hover .k-fab-item-icon,
    .k-fab-item:hover .k-fab-item-icon {
        border-color: k-color(base-hover);
        background-color: k-color(base-hover);
        color: k-color(on-base);
    }

    // Focus state
    .k-fab-item:focus .k-fab-item-icon,
    .k-fab-item.k-focus .k-fab-item-icon {
        border-color: k-color(base-active);
        background-color: k-color(base-active);
        color: k-color(on-base);
    }

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

    // Disabled state
    .k-fab-item.k-disabled,
    .k-fab-item: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) 60%, transparent);
            color: color-mix(in srgb, k-color(on-base) 60%, transparent);
        }
    }

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

}