@use "../core/_index.scss" as *;
@use "./_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/drawer/_theme.scss" as *;

@mixin kendo-drawer--theme() {

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

    // Drawer items - unique fluent styling
    .k-drawer-item {
        @include fill(
            $color: $kendo-drawer-item-text,
            $bg: $kendo-drawer-item-bg
        );

        .k-icon {
            color: $kendo-drawer-item-icon-text;
        }

        &:hover,
        &.k-hover {
            @include fill(
                $color: $kendo-drawer-item-hover-text,
                $bg: $kendo-drawer-item-hover-bg
            );

            .k-icon {
                color: $kendo-drawer-item-hover-icon-text;
            }
        }

        &:focus,
        &.k-focus {
            @include fill(
                $color: $kendo-drawer-item-focus-text,
                $bg: $kendo-drawer-item-focus-bg
            );

            box-shadow: $kendo-drawer-item-focus-shadow;

            .k-icon {
                color: $kendo-drawer-item-focus-icon-text;
            }
        }

        &.k-selected {
            @include fill(
                $color: $kendo-drawer-item-selected-text,
                $bg: $kendo-drawer-item-selected-bg
            );

            .k-icon {
                color: $kendo-drawer-item-selected-icon-text;
            }

            &:hover,
            &.k-hover {
                @include fill(
                    $color: $kendo-drawer-item-selected-hover-text,
                    $bg: $kendo-drawer-item-selected-hover-bg
                );
            }
        }

        &::before {
            border-color: $kendo-drawer-item-ripple-border;
        }
    }

    .k-drawer-separator,
    .k-drawer-separator:hover,
    .k-drawer-separator.k-hover {
        background-color: $kendo-drawer-border;
    }

}