@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/draggable/_layout.scss

@@ -1,66 +1,20 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/draggable/_layout.scss" as *;
 
-.k-drag-clue {
-    @include border-radius( var( --kendo-drag-clue-border-radius, #{$kendo-drag-clue-border-radius} ) );
-    padding-inline: var( --kendo-drag-clue-padding-x, #{$kendo-drag-clue-padding-x} );
-    padding-block: var( --kendo-drag-clue-padding-y, #{$kendo-drag-clue-padding-y} );
-    border-width: var( --kendo-drag-clue-border-width, #{$kendo-drag-clue-border-width} );
-    border-style: var( --kendo-drag-clue-border-style, #{$kendo-drag-clue-border-style} );
-    box-sizing: border-box;
-    font-family: var( --kendo-drag-clue-font-family, #{$kendo-drag-clue-font-family} );
-    font-size: var( --kendo-drag-clue-font-size, #{$kendo-drag-clue-font-size} );
-    line-height: var( --kendo-drag-clue-line-height, #{$kendo-drag-clue-line-height} );
-    display: inline-flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    align-content: center;
-    white-space: nowrap;
-    opacity: var( --kendo-drag-clue-opacity, #{$kendo-drag-clue-opacity} );
-    overflow: hidden;
-    position: absolute;
-    z-index: 20000;
-    cursor: move;
-}
-.k-drag-status,
-.k-drag-clue .k-drag-status {
-    margin: 0;
-    margin-inline-end: var( --kendo-drag-clue-spacing, #{$kendo-drag-clue-spacing} );
-}
-
-.k-drop-hint {
-    display: flex;
-    gap: var( --kendo-drop-hint-arrow-spacing, #{$kendo-drop-hint-arrow-spacing} );
-    justify-content: space-between;
-    align-items: center;
-    position: absolute;
-    z-index: 1000;
-    transform: translate(-50%, -50%);
-}
-
-.k-drop-hint-start,
-.k-drop-hint-end {
-    flex-shrink: 0;
-    border-width: calc( var( --kendo-drop-hint-arrow-size, #{$kendo-drop-hint-arrow-size} ) / 2 );
-    border-style: solid;
-    border-radius: 50%;
-    border-color: transparent;
-}
+@mixin kendo-draggable--layout() {
+    @include kendo-draggable--layout-base();
 
-.k-drop-hint-line {
-    flex-grow: 1;
-}
-
-.k-drop-hint-h .k-drop-hint-line {
-    width: var( --kendo-drop-hint-line-h-width, #{$kendo-drop-hint-line-h-width} );
-    height: var( --kendo-drop-hint-line-h-height, #{$kendo-drop-hint-line-h-height} );
-}
-
-.k-drop-hint-v {
-    flex-direction: column;
+    .k-drag-status,
+    .k-drag-clue .k-drag-status {
+        margin-inline-end: $kendo-drag-clue-spacing;
+    }
 
-    .k-drop-hint-line {
-        width: var( --kendo-drop-hint-line-v-width, #{$kendo-drop-hint-line-v-width} );
-        height: var( --kendo-drop-hint-line-v-height, #{$kendo-drop-hint-line-v-height} );
+    .k-drop-hint-h .k-drop-hint-start,
+    .k-drop-hint-v .k-drop-hint-start,
+    .k-drop-hint-h .k-drop-hint-end,
+    .k-drop-hint-v .k-drop-hint-end {
+        border-width: calc( $kendo-drop-hint-arrow-size / 2 );
+        border-radius: 50%;
     }
 }

package/scss/draggable/_theme.scss

@@ -1,21 +1,16 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/draggable/_theme.scss" as *;
 
-.k-drag-clue {
-    @include fill(
-        var( --kendo-drag-clue-text, #{$kendo-drag-clue-text} ),
-        var( --kendo-drag-clue-bg, #{$kendo-drag-clue-bg} ),
-        var( --kendo-drag-clue-border, #{$kendo-drag-clue-border} ),
-        var( --kendo-drag-clue-gradient, #{$kendo-drag-clue-gradient} )
-    );
-    @include box-shadow( var( --kendo-drag-clue-shadow, #{$kendo-drag-clue-shadow} ) );
-}
+@mixin kendo-draggable--theme() {
+    @include kendo-draggable--theme-base();
 
-.k-drop-hint-line {
-    @include fill( $bg: var( --kendo-drop-hint-bg, #{$kendo-drop-hint-bg} ) );
-}
+    .k-drop-hint-line {
+        @include fill( $bg: $kendo-drop-hint-bg );
+    }
 
-.k-drop-hint-start,
-.k-drop-hint-end {
-    @include fill ( $border: var( --kendo-drop-hint-bg, #{$kendo-drop-hint-bg} ) );
+    .k-drop-hint-start,
+    .k-drop-hint-end {
+        @include fill ( $border: $kendo-drop-hint-bg );
+    }
 }

package/scss/draggable/_variables.scss

@@ -1,73 +1,95 @@
-@use "sass:math";
 @use "../core/_index.scss" as *;
 @use "../core/spacing/_index.scss" as *;
 
 /// Borer radius of the drag clue.
 /// @group draggable
-$kendo-drag-clue-border-radius: k-border-radius(md) !default;
+$kendo-drag-clue-border-radius: var( --kendo-drag-clue-border-radius, k-border-radius(md) ) !default;
 /// Borer width of the drag clue.
 /// @group draggable
-$kendo-drag-clue-border-width: 0px !default;
+$kendo-drag-clue-border-width: var( --kendo-drag-clue-border-width, 0px ) !default;
 /// Borer style of the drag clue.
 /// @group draggable
-$kendo-drag-clue-border-style: solid !default;
+$kendo-drag-clue-border-style: var( --kendo-drag-clue-border-style, solid ) !default;
 /// Horizontal padding of the drag clue.
 /// @group draggable
-$kendo-drag-clue-padding-x: k-spacing(3) !default;
+$kendo-drag-clue-padding-x: var( --kendo-drag-clue-padding-x, k-spacing(3) ) !default;
 /// Vertical padding of the drag clue.
 /// @group draggable
-$kendo-drag-clue-padding-y: k-spacing(1.5) !default;
+$kendo-drag-clue-padding-y: var( --kendo-drag-clue-padding-y, k-spacing(1.5) ) !default;
 /// Font family of the drag clue.
 /// @group draggable
-$kendo-drag-clue-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-drag-clue-font-family: var( --kendo-drag-clue-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// Font size of the drag clue.
 /// @group draggable
-$kendo-drag-clue-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-drag-clue-font-size: var( --kendo-drag-clue-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// Line height of the drag clue.
 /// @group draggable
-$kendo-drag-clue-line-height: var( --kendo-line-height, inherit ) !default;
+$kendo-drag-clue-line-height: var( --kendo-drag-clue-line-height, var( --kendo-line-height, inherit ) ) !default;
 /// Spacing of the drag clue.
 /// @group draggable
-$kendo-drag-clue-spacing: .4ex !default;
+$kendo-drag-clue-spacing: var( --kendo-drag-clue-spacing, .4ex ) !default;
 /// Opacity of the drag clue.
 /// @group draggable
-$kendo-drag-clue-opacity: .8 !default;
+$kendo-drag-clue-opacity: var( --kendo-drag-clue-opacity, .8 ) !default;
 
 /// Text color of the drag clue.
 /// @group draggable
-$kendo-drag-clue-text: k-color(on-base) !default;
+$kendo-drag-clue-text: var( --kendo-drag-clue-text, k-color(on-base) ) !default;
 /// Background color of the drag clue.
 /// @group draggable
-$kendo-drag-clue-bg: k-color(base-active) !default;
+$kendo-drag-clue-bg: var( --kendo-drag-clue-bg, k-color(base-active) ) !default;
 /// Border color of the drag clue.
 /// @group draggable
-$kendo-drag-clue-border: color-mix(in srgb, k-color(border-alt) 76%, transparent) !default;
+$kendo-drag-clue-border: var( --kendo-drag-clue-border, color-mix(in srgb, k-color(border-alt) 76%, transparent) ) !default;
 /// Gradient of the drag clue.
 /// @group draggable
-$kendo-drag-clue-gradient: null !default;
+$kendo-drag-clue-gradient: var( --kendo-drag-clue-gradient, null ) !default;
 /// Box shadow of the drag clue.
 /// @group draggable
-$kendo-drag-clue-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-drag-clue-shadow: var( --kendo-drag-clue-shadow, var( --kendo-elevation-2, none ) ) !default;
 
 /// Arrow size of the drop hint.
 /// @group draggable
-$kendo-drop-hint-arrow-size: 6px !default;
+$kendo-drop-hint-arrow-size: var( --kendo-drop-hint-arrow-size, 6px ) !default;
 /// Arrow spacing of the drop hint.
 /// @group draggable
-$kendo-drop-hint-arrow-spacing: math.div( $kendo-drop-hint-arrow-size, 2 ) !default;
+$kendo-drop-hint-arrow-spacing: var( --kendo-drop-hint-arrow-spacing, calc( $kendo-drop-hint-arrow-size / 2 ) ) !default;
 /// Width of the horizontal drop hint line.
 /// @group draggable
-$kendo-drop-hint-line-h-width: 20px !default;
+$kendo-drop-hint-line-h-width: var( --kendo-drop-hint-line-h-width, 20px ) !default;
 /// Height of the horizontal drop hint line.
 /// @group draggable
-$kendo-drop-hint-line-h-height: 1px !default;
+$kendo-drop-hint-line-h-height: var( --kendo-drop-hint-line-h-height, 1px ) !default;
 /// Width of the vertical drop hint line.
 /// @group draggable
-$kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default;
+$kendo-drop-hint-line-v-width: var( --kendo-drop-hint-line-v-width, $kendo-drop-hint-line-h-height ) !default;
 /// Height of the vertical drop hint line.
 /// @group draggable
-$kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
+$kendo-drop-hint-line-v-height: var( --kendo-drop-hint-line-v-height, $kendo-drop-hint-line-h-width ) !default;
 
 /// Background-color of the drop hint.
 /// @group draggable
-$kendo-drop-hint-bg: k-color(primary) !default;
+$kendo-drop-hint-bg: var( --kendo-drop-hint-bg, k-color(primary) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/draggable/_variables.scss" with (
+    $kendo-drag-hint-padding-x: $kendo-drag-clue-padding-x,
+    $kendo-drag-hint-padding-y: $kendo-drag-clue-padding-y,
+    $kendo-drag-hint-border-width: $kendo-drag-clue-border-width,
+    $kendo-drag-hint-border-radius: $kendo-drag-clue-border-radius,
+    $kendo-drag-hint-font-size: $kendo-drag-clue-font-size,
+    $kendo-drag-hint-font-family: $kendo-drag-clue-font-family,
+    $kendo-drag-hint-line-height: $kendo-drag-clue-line-height,
+    $kendo-drag-hint-bg: $kendo-drag-clue-bg,
+    $kendo-drag-hint-text: $kendo-drag-clue-text,
+    $kendo-drag-hint-border: $kendo-drag-clue-border,
+    $kendo-drag-hint-gradient: $kendo-drag-clue-gradient,
+    $kendo-drag-hint-shadow: $kendo-drag-clue-shadow,
+    $kendo-drag-hint-opacity: $kendo-drag-clue-opacity,
+    $kendo-drop-hint-arrow-size: $kendo-drop-hint-arrow-size,
+    $kendo-drop-hint-arrow-spacing: $kendo-drop-hint-arrow-spacing,
+    $kendo-drop-hint-line-h-width: $kendo-drop-hint-line-h-width,
+    $kendo-drop-hint-line-h-height: $kendo-drop-hint-line-h-height,
+    $kendo-drop-hint-line-v-width: $kendo-drop-hint-line-v-width,
+    $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-v-height,
+    $kendo-drop-hint-bg: $kendo-drop-hint-bg
+);

package/scss/drawer/_layout.scss

@@ -1,160 +1,25 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/drawer/_layout.scss" as *;
 
 @mixin kendo-drawer--layout() {
 
-    // Container
-    .k-drawer-container {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: flex-start;
-    }
-
-    kendo-drawer.k-drawer,
-    kendo-drawer .k-drawer-wrapper {
-        transition: none;
-    }
-
-
-    // Drawer
-    .k-drawer {
-        height: 100%;
-        max-width: 100%;
-        border-width: 0;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-drawer-font-family, #{$kendo-drawer-font-family} );
-        font-size: var( --kendo-drawer-font-size, #{$kendo-drawer-font-size} );
-        line-height: var( --kendo-drawer-line-height, #{$kendo-drawer-line-height} );
-        display: flex;
-        flex-direction: column;
-        flex: 0 0 auto;
-        transition: all 300ms ease-in-out;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        // Borders
-        .k-drawer-mini &.k-drawer-start,
-        .k-drawer-expanded &.k-drawer-start {
-            border-inline-end-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
-        }
-
-        .k-drawer-mini &.k-drawer-end,
-        .k-drawer-expanded &.k-drawer-end {
-            border-inline-start-width: var( --kendo-drawer-border-width, #{$kendo-drawer-border-width} );
-        }
-
-        // Position
-        &.k-drawer-start {
-            top: 0;
-            inset-inline-start: 0;
-        }
-        &.k-drawer-end {
-            top: 0;
-            inset-inline-end: 0;
-        }
-    }
+    @include kendo-drawer--layout-base();
 
-
-    // Content
-    .k-drawer-content {
-        flex: 1 1 auto;
-        overflow: auto;
-        padding-block: var( --kendo-drawer-content-padding-y, #{$kendo-drawer-content-padding-y} );
-        padding-inline: var( --kendo-drawer-content-padding-x, #{$kendo-drawer-content-padding-x} );
-    }
-
-
-    // Overlay
-    .k-drawer-overlay {
-        .k-drawer {
-            max-width: 80vw; // limit width
-            position: fixed;
-            z-index: 10002;
-            border: 0;
-        }
-
-        > .k-overlay {
-            display: none;
-        }
-        &.k-drawer-expanded > .k-overlay {
-            display: block;
-        }
-    }
-
-
-    // Push drawer
-    .k-drawer-push {
-        display: flex;
-        flex-direction: row;
-
-        .k-drawer {
-            height: auto;
-            position: relative;
-            align-self: stretch;
-        }
-
-        &:has(.k-drawer.k-drawer-end) {
-            flex-direction: row-reverse;
-        }
-    }
-
-
-    // Drawer items
-    .k-drawer-wrapper {
-        overflow-x: hidden;
-        overflow-y: auto;
-        scrollbar-width: thin; // Scrollbar styles for Mozilla
-        transition: all 300ms ease-in-out;
-
-        // Scrollbar styles for Chrome, Safari and Opera
-        &::-webkit-scrollbar {
-            width: var( --kendo-drawer-scrollbar-width, #{$kendo-drawer-scrollbar-width} );
-        }
-        &::-webkit-scrollbar-thumb {
-            border-radius: var( --kendo-drawer-scrollbar-radius, #{$kendo-drawer-scrollbar-radius} );
-        }
-    }
+    // Drawer items - only border-radius is unique to fluent
     .k-drawer-items {
-        margin: 0;
-        padding-inline: var( --kendo-drawer-items-padding-x, #{$kendo-drawer-items-padding-x} );
-        padding-block: var( --kendo-drawer-items-padding-y, #{$kendo-drawer-items-padding-y} );
-        border-radius: var( --kendo-drawer-item-border-radius, #{$kendo-drawer-item-border-radius} );
-        list-style: none;
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
+        border-radius: $kendo-drawer-item-border-radius;
     }
 
+    // Drawer items - unique fluent properties
     .k-drawer-item {
-        padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
-        padding-block: var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} );
-        outline: 0;
-        color: inherit;
-        font-size: var( --kendo-drawer-item-font-size, #{$kendo-drawer-item-font-size} );
-        line-height: var( --kendo-drawer-item-line-height, #{$kendo-drawer-item-line-height} );
-        font-weight: var( --kendo-drawer-item-font-weight, #{$kendo-drawer-item-font-weight} );
         position: relative;
-        display: flex;
-        align-items: center;
-        flex-flow: row nowrap;
-        gap: var( --kendo-drawer-item-spacing, #{$kendo-drawer-item-spacing} );
-        cursor: pointer;
 
         &::before {
             content: "";
             border-width: 0;
-            border-inline-start-width: var( --kendo-drawer-item-ripple-border-width, #{$kendo-drawer-item-ripple-border-width} );
+            border-inline-start-width: $kendo-drawer-item-ripple-border-width;
             border-style: solid;
-            border-color: var( --kendo-drawer-item-ripple-border, #{$kendo-drawer-item-ripple-border} );
             height: 100%;
             display: block;
             position: absolute;
@@ -165,56 +30,13 @@
             pointer-events: none;
         }
 
-        > .k-drawer-link {
-            margin-inline: calc( var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} ) * -1 );
-            margin-block: calc( var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} ) * -1 );
-            padding-inline: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
-            padding-block: var( --kendo-drawer-item-padding-y, #{$kendo-drawer-item-padding-y} );
-            color: inherit;
-            display: flex;
-            flex-flow: row nowrap;
-            flex: 1 0 auto;
-            gap: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
-        }
-
-        .k-icon {
-            flex-shrink: 0;
-            padding-inline: var( --kendo-drawer-icon-padding-x, #{$kendo-drawer-icon-padding-x} );
-            padding-block: var( --kendo-drawer-icon-padding-y, #{$kendo-drawer-icon-padding-y} );
-            box-sizing: content-box;
-
-            &.k-i-none {
-                margin: 0;
-            }
-        }
-
-        .k-item-text {
-            display: inline-block;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
         &.k-selected {
             &::before {
                 opacity: 1;
             }
 
             .k-item-text {
-                font-weight: var( --kendo-drawer-item-selected-font-weight, #{$kendo-drawer-item-selected-font-weight} );
-            }
-        }
-
-        .k-drawer-toggle {
-            margin-inline-start: auto;
-            cursor: pointer;
-            display: flex;
-        }
-
-        // Hierarchy items
-        @for $i from 1 through $kendo-drawer-item-level-count {
-            &.k-level-#{$i} {
-                padding-inline-start: calc( ( $i + 1 ) * var( --kendo-drawer-item-level-padding-x, #{$kendo-drawer-item-level-padding-x} ) );
+                font-weight: $kendo-drawer-item-selected-font-weight;
             }
         }
     }
@@ -226,17 +48,4 @@
     :is(.k-drawer-end, .k-drawer-right) .k-drawer-item::before {
         inset-inline-end: 0;
     }
-
-    // Separator
-    .k-drawer-separator {
-        padding: 0;
-        height: 1px;
-    }
-
-
-
-    // Mini mode
-    .k-drawer-mini .k-drawer-wrapper {
-        width: var( --kendo-drawer-mini-initial-width, #{$kendo-drawer-mini-initial-width} );
-    }
 }

package/scss/drawer/_theme.scss

@@ -1,101 +1,74 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/drawer/_theme.scss" as *;
 
 @mixin kendo-drawer--theme() {
 
-    .k-drawer {
-        @include fill(
-            var( --kendo-drawer-text, #{$kendo-drawer-text} ),
-            var( --kendo-drawer-bg, #{$kendo-drawer-bg} ),
-            var( --kendo-drawer-border, #{$kendo-drawer-border} )
-        );
-    }
-
-    // Drawer items
-    .k-drawer-wrapper {
-        scrollbar-color: var( --kendo-drawer-scrollbar-color, #{$kendo-drawer-scrollbar-color} ) var( --kendo-drawer-scrollbar-bg, #{$kendo-drawer-scrollbar-bg} );
-
-        &::-webkit-scrollbar-track {
-            background: var( --kendo-drawer-scrollbar-bg, #{$kendo-drawer-scrollbar-bg} );
-        }
-        &::-webkit-scrollbar-thumb {
-            background: var( --kendo-drawer-scrollbar-color, #{$kendo-drawer-scrollbar-color} );
-        }
-        &::-webkit-scrollbar-thumb:hover {
-            background: var( --kendo-drawer-scrollbar-hover-color, #{$kendo-drawer-scrollbar-hover-color} );
-        }
-    }
+    @include kendo-drawer--theme-base();
+    
+    // Drawer items - unique fluent styling
     .k-drawer-item {
         @include fill(
-            var( --kendo-drawer-item-text, #{$kendo-drawer-item-text} ),
-            var( --kendo-drawer-item-bg, #{$kendo-drawer-item-bg} )
+            $color: $kendo-drawer-item-text,
+            $bg: $kendo-drawer-item-bg
         );
 
         .k-icon {
-            color: var( --kendo-drawer-item-icon-text, #{$kendo-drawer-item-icon-text} );
+            color: $kendo-drawer-item-icon-text;
         }
 
         &:hover,
         &.k-hover {
             @include fill(
-                var( --kendo-drawer-item-hover-text, #{$kendo-drawer-item-hover-text} ),
-                var( --kendo-drawer-item-hover-bg, #{$kendo-drawer-item-hover-bg} )
+                $color: $kendo-drawer-item-hover-text,
+                $bg: $kendo-drawer-item-hover-bg
             );
 
             .k-icon {
-                color: var( --kendo-drawer-item-hover-icon-text, #{$kendo-drawer-item-hover-icon-text} );
+                color: $kendo-drawer-item-hover-icon-text;
             }
         }
 
         &:focus,
         &.k-focus {
             @include fill(
-                var( --kendo-drawer-item-focus-text, #{$kendo-drawer-item-focus-text} ),
-                var( --kendo-drawer-item-focus-bg, #{$kendo-drawer-item-focus-bg} )
+                $color: $kendo-drawer-item-focus-text,
+                $bg: $kendo-drawer-item-focus-bg
             );
-            box-shadow: var( --kendo-drawer-item-focus-shadow, #{$kendo-drawer-item-focus-shadow} );
 
-            .k-icon {
-                color: var( --kendo-drawer-item-focus-icon-text, #{$kendo-drawer-item-focus-icon-text} );
-            }
+            box-shadow: $kendo-drawer-item-focus-shadow;
 
-            &:hover,
-            &.k-hover {
-                @include fill(
-                    var( --kendo-drawer-item-hover-text, #{$kendo-drawer-item-hover-text} ),
-                    var( --kendo-drawer-item-hover-bg, #{$kendo-drawer-item-hover-bg} )
-                );
+            .k-icon {
+                color: $kendo-drawer-item-focus-icon-text;
             }
         }
 
         &.k-selected {
             @include fill(
-                var( --kendo-drawer-item-selected-text, #{$kendo-drawer-item-selected-text} ),
-                var( --kendo-drawer-item-selected-bg, #{$kendo-drawer-item-selected-bg} )
+                $color: $kendo-drawer-item-selected-text,
+                $bg: $kendo-drawer-item-selected-bg
             );
 
             .k-icon {
-                color: var( --kendo-drawer-item-selected-icon-text, #{$kendo-drawer-item-selected-icon-text} );
+                color: $kendo-drawer-item-selected-icon-text;
             }
 
             &:hover,
             &.k-hover {
                 @include fill(
-                    var( --kendo-drawer-item-selected-hover-text, #{$kendo-drawer-item-selected-hover-text} ),
-                    var( --kendo-drawer-item-selected-hover-bg, #{$kendo-drawer-item-selected-hover-bg} )
+                    $color: $kendo-drawer-item-selected-hover-text,
+                    $bg: $kendo-drawer-item-selected-hover-bg
                 );
             }
+        }
 
-            &:focus,
-            &.k-focus {
-                @include fill(
-                    var( --kendo-drawer-item-selected-focus-bg, #{$kendo-drawer-item-selected-focus-bg} )
-                );
-            }
+        &::before {
+            border-color: $kendo-drawer-item-ripple-border;
         }
     }
+
     .k-drawer-separator {
-        background-color: var( --kendo-drawer-border, #{$kendo-drawer-border} );
+        background-color: $kendo-drawer-border;
     }
 
 }