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

@mixin kendo-drawer--layout() {

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

    // Drawer items - only border-radius is unique to fluent
    .k-drawer-items {
        border-radius: $kendo-drawer-item-border-radius;
        gap: $kendo-drawer-items-gap;
    }

    // Drawer items - unique fluent properties
    .k-drawer-item {
        position: relative;

        &::before {
            content: "";
            border-width: 0;
            border-inline-start-width: $kendo-drawer-item-ripple-border-width;
            border-style: solid;
            border-radius: $kendo-drawer-item-ripple-border-radius;
            height: $kendo-drawer-item-ripple-border-height;
            display: block;
            position: absolute;
            inset-block-start: 50%;
            inset-inline-start: $kendo-drawer-item-ripple-spacing-x;
            transform: translateY(-50%);
            z-index: k-z-index("base", 2);
            opacity: 0;
            transition: opacity k-transition(snappy);
            pointer-events: none;
        }

        &.k-selected {
            &::before {
                opacity: 1;
            }

            .k-item-text {
                font-weight: $kendo-drawer-item-selected-font-weight;
            }
        }
    }

    :is(.k-drawer-start, .k-drawer-left) .k-drawer-item::before {
        inset-inline-start: $kendo-drawer-item-ripple-spacing-x;
    }

    :is(.k-drawer-end, .k-drawer-right) .k-drawer-item::before {
        inset-inline-end: $kendo-drawer-item-ripple-spacing-x;
    }
}