@use "../../color-system/_functions.import.scss" as *;
@use "../../mixins/index.import.scss" as *;
@use "../../functions/index.import.scss" as *;
@use "../../_variables.scss" as *;
@use "./variables.scss" as *;

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

    // Normal state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-fab-solid-#{$name} {
            @include box-shadow($kendo-fab-shadow);
            outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
            outline-offset: -$kendo-fab-border-width;
            border-color: $color;
            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
            background-color: $color;
        }
    }

    // Hover state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-hover.k-fab-solid-#{$name},
        .k-fab-solid-#{$name}:hover {
            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
        }
    }

    // Focus state
    @each $name, $color in $kendo-fab-theme-colors {
        .k-fab-solid-#{$name}.k-focus,
        .k-fab-solid-#{$name}:focus {
            @if $kendo-enable-focus-contrast {
                @include box-shadow( inset 0 0 0 2px currentColor );
            } @else {
                outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 30%, transparent), rgba( $color, .3 ));
            }
        }
    }

    // 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: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
        }
    }

    // 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);
            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 60%, transparent), k-try-tint( $color, 5 ));
            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 ));
            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);
        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.k-hover .k-fab-item-icon,
    .k-fab-item:hover .k-fab-item-icon {
        border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 ));
        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 ));
    }

    // Focus state
    .k-fab-item:focus .k-fab-item-text,
    .k-fab-item:focus .k-fab-item-icon,
    .k-fab-item.k-focus .k-fab-item-text,
    .k-fab-item.k-focus .k-fab-item-icon {
        @if $kendo-enable-focus-contrast {
            @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
        } @else {
            outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
        }
    }

    // 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: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 ));
        background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 ));
    }

    // 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: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 5 ));
            color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 5 ));
        }
    }

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

}


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