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

@mixin kendo-button--theme() {

    @include kendo-button--theme-base();

    // Solid button
    @each $name, $color in $kendo-button-theme-colors {
        .k-button {
            &:focus,
            &.k-focus {
                outline-style: solid;
                outline-width: calc( (#{$kendo-button-border-width} * 2 ));
                outline-offset: calc( (#{$kendo-button-border-width} * 2 ) * -1);
            }
        }

        .k-button-solid-#{$name} {
            // Focus state
            &:focus,
            &.k-focus {
                outline-color: if( $name == "base" or $name == "secondary", $kendo-button-focus-border, k-color(#{$name}));
                box-shadow: inset 0 0 0 calc( #{$kendo-button-border-width} * 3 ) k-color(app-surface),
                            inset 0 0 0 calc( #{$kendo-button-border-width} * 5 ) k-color(#{$name});
            }

            &:hover,
            &.k-hover {
                background-color: k-color(#{$name}-hover);
                border-color: k-color(#{$name}-hover);
                @include box-shadow( $kendo-button-hover-shadow );
            }

            &:focus,
            &.k-focus {
                &:hover,
                &.k-hover {
                    outline-color: if( $name == "base" or $name == "secondary", $kendo-button-focus-border, k-color(#{$name}-hover));
                    box-shadow: inset 0 0 0 calc( #{$kendo-button-border-width} * 3 ) k-color(app-surface),
                                inset 0 0 0 calc( #{$kendo-button-border-width} * 5 ) k-color(#{$name}-hover),
                                $kendo-button-hover-shadow;

                    &:active,
                    &.k-active,
                    &.k-selected {
                        background-color: k-color(#{$name}-active);
                        box-shadow: inset 0 0 0 calc( #{$kendo-button-border-width} * 3 ) k-color(app-surface),
                                    inset 0 0 0 calc( #{$kendo-button-border-width} * 5 ) k-color(#{$name}-active),
                                    $kendo-button-hover-shadow;
                    }
                }

                &:active,
                &.k-active,
                &.k-selected {
                    outline-color: if( $name == "base" or $name == "secondary", $kendo-button-focus-border, k-color(#{$name}-active));
                    box-shadow: inset 0 0 0 calc( #{$kendo-button-border-width} * 3 ) k-color(app-surface),
                                inset 0 0 0 calc( #{$kendo-button-border-width} * 5 ) k-color(#{$name}-active);
                }

                &:disabled,
                &.k-disabled {
                    background-color: $kendo-button-disabled-bg;
                    box-shadow: inset 0 0 0 calc( #{$kendo-button-border-width} * 3 ) k-color(app-surface),
                                inset 0 0 0 calc( #{$kendo-button-border-width} * 5 ) transparent;
                }
            }
        }
    }

    // Outline and Flat button
    @each $name, $color in $kendo-button-theme-colors {
        .k-button-outline-#{$name},
        .k-button-flat-#{$name} {
            &:hover,
            &.k-hover,
            &:active,
            &.k-active,
            &.k-selected {
                color: k-color(#{$name}-on-surface);
            }
        }
    }

    // Outline and Link button
    @each $name, $color in $kendo-button-theme-colors {
        .k-button-outline-#{$name},
        .k-button-link-#{$name} {
            color: k-color(#{$name}-on-surface);

            &:active,
            &.k-active,
            &.k-selected {
                background-color: if( $name == "base" or $name == "secondary", color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, k-color($name) 12%, transparent));
            }

            &:hover,
            &.k-hover {
                background-color: if( $name == "base" or $name == "secondary", color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, k-color($name) 8%, transparent));
            }
        }
    }



    // Outline button
    @each $name, $color in $kendo-button-theme-colors {
        .k-button-outline-#{$name} {
            color: k-color(#{$name}-on-surface);

            @if $name == "base" or $name == "primary"  {
                border-color: k-color(base-emphasis);
            } @else if $name == "secondary" {
                border-color: k-color(secondary-emphasis);
            } @else {
                border-color: k-color(#{$name}-on-surface);
            }

            &:hover,
            &.k-hover,
            &:active,
            &.k-active,
            &.k-selected {
                @if $name == "base" or $name == "primary"  {
                    border-color: k-color(base-emphasis);
                } @else if $name == "secondary" {
                    border-color: k-color(secondary-emphasis);
                } @else {
                    border-color: k-color(#{$name}-on-surface);
                }
            }

            &:focus,
            &.k-focus {
                box-shadow: inset 0 0 0 calc( #{$kendo-button-border-width} * 3 ) k-color(app-surface),
                            inset 0 0 0 calc( #{$kendo-button-border-width} * 5 ) k-color(#{$name}-on-surface);

                &:disabled,
                &.k-disabled {
                    outline-color: k-color(#{$name}-on-surface);
                    box-shadow: inset 0 0 0 calc( #{$kendo-button-border-width} * 3 ) k-color(app-surface),
                                inset 0 0 0 calc( #{$kendo-button-border-width} * 5 ) k-color(#{$name}-on-surface);
                }
            }

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

    // Flat button
    @each $name, $color in $kendo-button-theme-colors {
        .k-button-flat-#{$name} {
            &:focus,
            &.k-focus {
                outline: 0;

                &::before {
                    background: transparent;
                }
            }

            &::after {
                box-shadow: inset 0 0 0 2px if( $name == "base" or $name == "secondary", color-mix(in srgb, currentColor 20%, transparent), color-mix(in srgb, k-color($name) 20%, transparent));
            }
        }
    }

     // Clear button
     @each $name, $color in $kendo-button-theme-colors {
        .k-button-clear-#{$name} {
            &:focus,
            &.k-focus {
                outline: 0;
            }
        }
    }


    // Link button
    @each $name, $color in $kendo-button-theme-colors {
        .k-button-link-#{$name} {
            text-decoration: underline;

            &:hover,
            &.k-hover,
            &:active,
            &.k-active,
            &.k-selected {
                color: k-color(#{$name}-on-surface);
            }

            &:focus,
            &.k-focus {
                outline-color: if( $name == "base" or $name == "secondary", color-mix(in srgb, currentColor 20%, transparent), color-mix(in srgb, k-color($name) 20%, transparent));
            }
            // Disabled state
            &:disabled,
            &.k-disabled {
                color: $kendo-button-disabled-text;
            }
        }
    }


    // Menu button
    .k-menu-button {}


    // Button group
    .k-button-group {
        @include box-shadow( $kendo-button-shadow );
    }


    // Variant button group
    .k-button-group-flat,
    .k-button-group-link,
    .k-button-group-outline {
        @include box-shadow( none );
    }

}