@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-toolbar--theme() {

    // Theme
    .k-toolbar {

        // Template item
        .k-toolbar-item:focus,
        .k-toolbar-item.k-focus {
            outline-color: var( --kendo-toolbar-item-focus-outline-color, #{$kendo-toolbar-item-focus-outline-color} );
        }

    }

    // Separator
    .k-toolbar .k-separator,
    .k-toolbar-separator {
        border-color: var( --kendo-toolbar-separator-border, #{$kendo-toolbar-separator-border} );
    }

    .k-toolbar-items {
        border-color: inherit;
    }

    // Solid Toolbar
    .k-toolbar-solid {
        @include fill (
            var( --kendo-toolbar-text, #{$kendo-toolbar-text} ),
            var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} ),
            var( --kendo-toolbar-border, #{$kendo-toolbar-border} )
        );

        &.k-toolbar-scrollable-overlay {
            &::before {
                background: linear-gradient(90deg, var( --kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay} ));
            }

            &::after {
                background: linear-gradient(270deg, var( --kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay} ));
            }
        }
    }

    .k-toolbar-items-list-solid {
        border-color:  var( --kendo-toolbar-border, #{$kendo-toolbar-border} );
    }

    // Outline Toolbar
    .k-toolbar-outline {
        @include fill (
            $color: var( --kendo-toolbar-outline-text, #{$kendo-toolbar-outline-text} ),
            $border: var( --kendo-toolbar-outline-border, #{$kendo-toolbar-outline-border} )
        );

        &.k-toolbar-scrollable-overlay {
            &::before {
                background: linear-gradient(90deg, var( --kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay} ));
            }

            &::after {
                background: linear-gradient(270deg, var( --kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay} ));
            }
        }
    }

    .k-toolbar-items-list-outline {
        border-color:  var( --kendo-toolbar-outline-border, #{$kendo-toolbar-outline-border} );
    }

    // Flat Toolbar
    .k-toolbar-flat {
        @include fill (
            $color: var( --kendo-toolbar-flat-text, #{$kendo-toolbar-flat-text} ),
            $border: var( --kendo-toolbar-flat-border, #{$kendo-toolbar-flat-border} )
        );

        > .k-separator,
        .k-toolbar-separator {
            border-inline-color: var( --kendo-toolbar-flat-border, #{$kendo-toolbar-flat-border} );
        }

        &.k-toolbar-scrollable-overlay {
            &::before {
                background: linear-gradient(90deg, var( --kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay} ));
            }

            &::after {
                background: linear-gradient(270deg, var( --kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay} ));
            }
        }
    }

    .k-toolbar-items-list-flat {
        border-color:  var( --kendo-toolbar-flat-border, #{$kendo-toolbar-flat-border} );
    }

    // stylelint-disable selector-class-pattern
    .k-floating-toolbar,
    .editorToolbarWindow.k-window-content {
        color: var( --kendo-toolbar-text, #{$kendo-toolbar-text} );
        background-color: var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} );
        border-color: var( --kendo-toolbar-border, #{$kendo-toolbar-border} );
    }
    // stylelint-enable selector-class-pattern

    // Remove once the Overflow Popup uses
    // the proper Menu rendering in all suites.
    .k-overflow-container {

        .k-button {

            // Hover state
            &:hover,
            &.k-hover {
                color: var( --kendo-menu-popup-item-hover-text, initial );
                background: var( --kendo-menu-popup-item-hover-bg, initial );
            }

            // Button focus state
            &:focus,
            &.k-focus {
                box-shadow: var( --kendo-menu-popup-item-focus-shadow, initial );
            }

            // Active state
            &:active,
            &.k-active {
                color: var( --kendo-menu-popup-item-hover-text, initial );
                background: var( --kendo-menu-popup-item-hover-bg, initial );
            }

            // Selected
            &.k-selected {
                color: var( --kendo-menu-popup-item-expanded-text, initial );
                background: var( --kendo-menu-popup-item-expanded-bg, initial );
            }

            // Disabled state
            &:disabled,
            &.k-disabled {
                color: inherit;
            }
        }
    }

    // RTL
    :is(.k-rtl .k-toolbar-scrollable-overlay, [dir="rtl"] .k-toolbar-scrollable-overlay, .k-toolbar-scrollable-overlay.k-rtl, .k-toolbar-scrollable-overlay[dir="rtl"] ) {
        &::before {
            background: linear-gradient(270deg, var(--kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay}));
        }

        &::after {
            background: linear-gradient(90deg, var(--kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay}));
        }

        &.k-toolbar-outline {
            &::before {
                background: linear-gradient(270deg, var(--kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay}));
            }

            &::after {
                background: linear-gradient(90deg, var(--kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay}));
            }
        }

        &.k-toolbar-flat {
            &::before {
                background: linear-gradient(270deg, var(--kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay}));
            }

            &::after {
                background: linear-gradient(90deg, var(--kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay}));
            }
        }
    }

}