@use "sass:map";
@use "sass:meta";
@use "../../mixins/index.scss" as *;
@use "../../functions/index.scss" as *;
@use "../../color-system/_functions.scss" as *;
@use "../../_variables.scss" as *;
@use "./_variables.scss" as *;

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

    .k-button {

        // Solid button
        #{k-when-default($kendo-button-default-fill-mode, "solid")}
        &.k-button-solid {
            #{k-when-default($kendo-button-default-theme-color, "base")}
            &.k-button-base {
                @include fill(
                    $kendo-button-text,
                    $kendo-button-bg,
                    $kendo-button-border,
                    $kendo-button-gradient
                );
                @include box-shadow( $kendo-button-shadow );

                // Hover state
                &:hover,
                &.k-hover {
                    @include fill(
                        $kendo-button-hover-text,
                        $kendo-button-hover-bg,
                        $kendo-button-hover-border,
                        $kendo-button-hover-gradient
                    );
                    @include box-shadow( $kendo-button-hover-shadow );
                }

                // Focus state
                &:focus,
                &.k-focus {
                    @include focus-indicator( $kendo-button-focus-shadow, true, true );
                }

                // Active state
                &:active,
                &.k-active {
                    @include fill(
                        $kendo-button-active-text,
                        $kendo-button-active-bg,
                        $kendo-button-active-border,
                        $kendo-button-active-gradient
                    );
                    @include box-shadow( $kendo-button-active-shadow );
                }

                // Selected state
                &.k-selected {
                    @include fill(
                        $kendo-button-selected-text,
                        $kendo-button-selected-bg,
                        $kendo-button-selected-border,
                        $kendo-button-selected-gradient
                    );
                    @include box-shadow( $kendo-button-selected-shadow );
                }

                // Disabled state
                &:disabled,
                &.k-disabled {
                    @include fill(
                        $kendo-button-disabled-text,
                        $kendo-button-disabled-bg,
                        $kendo-button-disabled-border,
                        $kendo-button-disabled-gradient
                    );
                    @include box-shadow( $kendo-button-disabled-shadow );
                }
            }

            @each $name in $kendo-button-theme-colors {
                @if ($name != "base") {
                    $_button-text: k-color(on-#{$name});
                    $_button-bg: k-color(#{$name});
                    $_button-border: k-color(#{$name});
                    $_button-hover-text: null;
                    $_button-hover-bg: k-color(#{$name}-hover);
                    $_button-hover-border: k-color(#{$name}-hover);

                    $_button-active-text: k-color(on-#{$name});
                    $_button-active-bg: k-color(#{$name}-active);
                    $_button-active-border: k-color(#{$name}-active);

                    #{k-when-default($kendo-button-default-theme-color, $name)}
                    &.k-button-#{$name} {
                        @include fill(
                            $_button-text,
                            $_button-bg,
                            $_button-border,
                            $kendo-solid-button-gradient
                        );

                        // Hover state
                        &:hover,
                        &.k-hover {
                            @include fill(
                                $_button-hover-text,
                                $_button-hover-bg,
                                $_button-hover-border
                            );
                        }

                        // Focus state
                        &:focus,
                        &.k-focus {
                            @if ( $kendo-solid-button-shadow ) {
                                @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread color-mix(in srgb, k-color($name) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), true, true );
                            }
                        }

                        // Active state
                        &:active,
                        &.k-active {
                            @include fill(
                                $_button-active-text,
                                $_button-active-bg,
                                $_button-active-border
                            );
                        }

                        // Selected
                        &.k-selected {
                            @include fill(
                                $_button-active-text,
                                $_button-active-bg,
                                $_button-active-border
                            );
                        }

                        // Disabled state
                        &:disabled,
                        &.k-disabled {
                            @include fill(
                                $kendo-button-disabled-text,
                                $kendo-button-disabled-bg,
                                $kendo-button-disabled-border,
                                $kendo-button-disabled-gradient
                            );
                            @include box-shadow( $kendo-button-disabled-shadow );
                        }
                    }
                }
            }
        }


        // Outline button
        #{k-when-default($kendo-button-default-fill-mode, "outline")}
        &.k-button-outline {
            color: inherit;
            border-color: currentColor;
            background-color: transparent;
            box-shadow: none;

            &.k-focus,
            &:focus {
                box-shadow: none;
            }

            @each $name in $kendo-button-theme-colors {
                #{k-when-default($kendo-button-default-theme-color, $name)}
                &.k-button-#{$name} {
                    color: k-color(#{$name}-on-surface);

                    // Hover state
                    &:hover,
                    &.k-hover {
                        @if $name == "base" {
                            @include fill(
                                k-color(base),
                                k-color(on-base),
                                k-color(on-base)
                            );
                        } @else {
                            @include fill(
                                k-color(on-#{$name}),
                                k-color(#{$name}),
                                k-color(#{$name})
                            );
                        }
                    }

                    // Focus state
                    &:focus,
                    &.k-focus {
                        @if $kendo-outline-button-shadow {
                            @if $name == "base" {
                                @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color(on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
                            } @else {
                                @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color($name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
                            }
                        }
                    }

                    // Active state
                    &:active,
                    &.k-active {
                        @if $name == "base" {
                            @include fill(
                                k-color(base ),
                                k-color(on-base ),
                                k-color(on-base )
                            );
                        } @else {
                            @include fill(
                                k-color(on-#{$name} ),
                                k-color(#{$name}),
                                k-color(#{$name})
                            );
                        }
                    }

                    // Selected
                    &.k-selected {
                        @if $name == "base" {
                            @include fill(
                                k-color(base ),
                                k-color(on-base ),
                                k-color(on-base )
                            );
                        } @else {
                            @include fill(
                                k-color(on-#{$name} ),
                                k-color(#{$name} ),
                                k-color(#{$name} )
                            );
                        }
                    }

                    // Disabled state
                    &:disabled,
                    &.k-disabled {
                        color: $kendo-button-disabled-text;
                    }
                }
            }
        }


        // Flat button
        #{k-when-default($kendo-button-default-fill-mode, "flat")}
        &.k-button-flat {
            border-color: transparent !important; // stylelint-disable-line declaration-no-important
            color: inherit;
            background: none !important; // stylelint-disable-line declaration-no-important
            box-shadow: none !important; // stylelint-disable-line declaration-no-important

            &.k-selected {
                color: inherit;
            }

            @each $name in $kendo-button-theme-colors {
                #{k-when-default($kendo-button-default-theme-color, $name)}
                &.k-button-#{$name} {
                    @if $name == "base" {
                        color: inherit;
                    } @else {
                        color: k-color(#{$name}-on-surface);
                    }

                    // Disabled state
                    &:disabled,
                    &.k-disabled {
                        color: $kendo-button-disabled-text;
                    }
                }
            }
        }


        // Link button
        #{k-when-default($kendo-button-default-fill-mode, "link")}
        &.k-button-link {
            border-color: transparent;
            color: inherit;
            background: none;

            @each $name in $kendo-button-theme-colors {
                #{k-when-default($kendo-button-default-theme-color, $name)}
                &.k-button-#{$name} {

                    @if $name == "base" {
                        color: k-color(on-app-surface);
                    } @else {
                        color: k-color(#{$name}-on-surface);
                    }

                    // Hover
                    &:hover,
                    &.k-hover {
                        background-color: transparent;
                        border-color: transparent;

                        @if $name == "base" {
                            color: k-color(on-app-surface);
                        } @else {
                            color: k-color(#{$name}-on-surface);
                        }
                    }

                    // Focus
                    &:focus,
                    &.k-focus {
                        @if ( $kendo-link-button-shadow ) {
                            @if $name == "base" {
                                @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color(on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
                            } @else {
                                @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color($name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
                            }
                        }
                    }

                    // Active
                    &:active,
                    &.k-active {
                        background-color: transparent;
                        border-color: transparent;

                        @if $name == "base" {
                            color: k-color(on-app-surface);
                        } @else {
                            color: k-color(#{$name}-on-surface);
                        }
                    }

                    // Selected
                    &.k-selected {
                        background-color: transparent;
                        border-color: transparent;

                        @if $name == "base" {
                            color: k-color(on-app-surface);
                        } @else {
                            color: k-color(#{$name}-on-surface);
                        }
                    }

                    // Disabled state
                    &:disabled,
                    &.k-disabled {
                        color: $kendo-button-disabled-text;
                    }
                }
            }
        }


        // Clear button
        #{k-when-default($kendo-button-default-fill-mode, "clear")}
        &.k-button-clear {
            border-color: transparent !important; // stylelint-disable-line declaration-no-important
            color: inherit;
            background: none !important; // stylelint-disable-line declaration-no-important
            box-shadow: none !important; // stylelint-disable-line declaration-no-important

            @each $name in $kendo-button-theme-colors {
                #{k-when-default($kendo-button-default-theme-color, $name)}
                &.k-button-#{$name} {
                    color: k-color(#{$name}-on-surface);

                    &:focus,
                    &.k-focus,
                    &:active {
                        &::after {
                            background-color: currentColor;
                            opacity: $kendo-clear-button-focus-opacity;
                            display: block;
                        }
                    }

                    // Disabled state
                    &:disabled,
                    &.k-disabled {
                        color: $kendo-button-disabled-text;
                    }
                }
            }
        }
    }
}