@use "sass:map";
@use "sass:math";
@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *;

@mixin kendo-button--layout() {

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

    // Button
    .k-button {
        &:focus,
        &.k-focus {
            outline-width: $kendo-button-focus-outline-width;
            outline-style: $kendo-button-focus-outline-style;
            outline-offset: calc( (#{$kendo-button-border-width} * 2 ) * -1);
        }

        // Fix for focused button with full roundness
        &.k-rounded-full {
            &:focus::after,
            &.k-focus::after {
               border-radius: inherit;
            }
        }
    }

    .k-button-sm {
        font-weight: $kendo-font-weight-normal;
    }


    // Sizing
    @each $size, $size-props in $kendo-button-sizes {
        $_padding-x: map.get( $size-props, padding-x );
        $_padding-y: map.get( $size-props, padding-y );
        $_font-size: map.get( $size-props, font-size );
        $_line-height: map.get( $size-props, line-height );

        .k-icon-button.k-button-#{$size} {

            .k-button-icon {

                &.k-svg-icon > svg,
                &.k-icon-md > svg {
                    width: var( --kendo-icon-size-md, 1rem );
                    height: var( --kendo-icon-size-md, 1rem );
                }

                &.k-icon-xs > svg {
                    width: var( --kendo-icon-size-sm, 0.75rem );
                    height: var( --kendo-icon-size-sm, 0.75rem )s;
                }

                &.k-icon-sm > svg {
                    width: var( --kendo-icon-size-sm, 0.875rem );
                    height: var( --kendo-icon-size-sm, 0.875rem );
                }

                &.k-icon-lg > svg {
                    width: var( --kendo-icon-size-lg, 1.25rem );
                    height: var( --kendo-icon-size-lg, 1.25rem );
                }

                &.k-icon-xl > svg {
                    width: var( --kendo-icon-size-xl, 1.5rem );
                    height: var( --kendo-icon-size-xl, 1.5rem );
                }

                &.k-icon-xxl > svg {
                    width: var( --kendo-icon-size-xxl, 2rem );
                    height: var( --kendo-icon-size-xxl, 2rem );
                }

                &.k-icon-xxxl > svg {
                    width: var( --kendo-icon-size-xxl, 3rem );
                    height: var( --kendo-icon-size-xxl, 3rem );
                }
            }
        }
    }


    // Flat button
    .k-button-flat {
        color: inherit;
        border-color: transparent !important; // stylelint-disable-line declaration-no-important
        box-shadow: none;

        &:focus::after,
        &.k-focus::after {
            @include border-radius( inherit );
            inset: $kendo-button-flat-focus-offset;
            box-shadow: none;
        }
    }

    .k-button-flat-base {
        color: inherit;
        background: none !important; // stylelint-disable-line declaration-no-important
        border-color: transparent !important; // stylelint-disable-line declaration-no-important

        // Overlay
        &::before {
            @include border-radius( inherit );
            content: "";
            background: currentColor;
            opacity: 0;
            display: block;
            pointer-events: none;
            position: absolute;
            inset-inline-start: calc(-1 * #{$kendo-button-border-width});
            inset-inline-end: calc(-1 * #{$kendo-button-border-width});
            inset-block-start: calc(-1 * #{$kendo-button-border-width});
            inset-block-end: calc(-1 * #{$kendo-button-border-width});
            z-index: 0;
            transition: opacity .2s ease-in-out;
        }

        // Hovered state
        &:hover,
        &.k-hover {
            &::before {
                opacity: .03;
            }
        }

        // Focused state
        &:focus,
        &.k-focus {
            &::before {
                opacity: 0;
            }

            &::after {
                // outline-color: currentColor !important; // stylelint-disable-line declaration-no-important
                opacity: .13;
            }

            // Focus and hovered state
            &:hover,
            &.k-hover {
                &::before {
                    opacity: .05;
                }
            }
        }

        &.k-no-focus:not(:hover),
        &.k-no-focus:not(.k-hover) {
            &::before {
                opacity: 0;
            }
        }

        // Active state
        &:active,
        &.k-active {
            &::before {
                opacity: .08;
            }

            // Active and hovered state
            &:hover,
            &.k-hover {
                &::before {
                    opacity: .05;
                }
            }
        }

        // Selected state
        &.k-selected {
            &::before {
                opacity: .08;
            }

            // Selected and hovered state
            &:hover,
            &.k-hover {
                &::before {
                    opacity: .05;
                }
            }
        }
    }


    // Link button
    .k-button-link {
        &:focus::after,
        &.k-focus::after {
            @include border-radius( inherit );
            inset: $kendo-button-link-focus-offset;
            // outline-width: $kendo-button-link-focus-outline-width;
        }

        &:focus,
        &.k-focus {
            text-decoration: underline;
        }
    }


    // Clear button
    .k-button-clear {
        &:focus::after,
        &.k-focus::after {
            inset: auto;
            // outline-width: 0;
        }
    }
}