@progress/kendo-theme-meridian 14.0.0-dev.1

package/scss/datetimepicker/_layout.scss

@@ -0,0 +1,14 @@
+@use "../popup/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/datetimepicker/_layout.scss" as *;
+
+
+@mixin kendo-date-time-picker--layout() {
+    @include kendo-date-time-picker--layout-base();
+
+    .k-datetime-footer.k-actions {
+        margin-top: 0;
+
+        border-bottom-left-radius: $kendo-popup-border-radius;
+        border-bottom-right-radius: $kendo-popup-border-radius;
+    }
+}

package/scss/datetimepicker/_theme.scss

@@ -0,0 +1,15 @@
+@use "../timeselector/variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/datetimepicker/_theme.scss" as *;
+
+@mixin kendo-date-time-picker--theme() {
+    @include kendo-date-time-picker--theme-base();
+
+    .k-datetime-container,
+    .k-datetimepicker-popup {
+        .k-datetime-selector,
+        .k-timeselector,
+        .k-datetime-footer {
+            background-color: $kendo-time-selector-bg;
+        }
+    }
+}

package/scss/datetimepicker/_variables.scss

@@ -0,0 +1,30 @@
+@use "../calendar/_variables.scss" as *;
+
+// DateTime
+
+/// The default size of the DateTimePicker.
+/// @group date-time-picker
+/// @role default
+$kendo-datetime-default-size: "md" !default;
+
+/// The width of the DateTimePicker.
+/// @group date-time-picker
+$kendo-datetime-width: calc( calc( #{$kendo-calendar-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default;
+
+/// The width of the small DateTimePicker.
+/// @group date-time-picker
+$kendo-datetime-sm-width: calc( calc( #{$kendo-calendar-sm-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default;
+/// The width of the medium DateTimePicker.
+/// @group date-time-picker
+$kendo-datetime-md-width: $kendo-datetime-width !default;
+/// The width of the large DateTimePicker.
+/// @group date-time-picker
+$kendo-datetime-lg-width: calc( calc( #{$kendo-calendar-lg-cell-size} * 8 ) + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 )) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/datetimepicker/_variables.scss" with (
+    $kendo-datetime-width: $kendo-datetime-width,
+    $kendo-datetime-sm-width: $kendo-datetime-sm-width,
+    $kendo-datetime-md-width: $kendo-datetime-md-width,
+    $kendo-datetime-lg-width: $kendo-datetime-lg-width,
+    $kendo-datetime-default-size: $kendo-datetime-default-size
+);

package/scss/dialog/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../window/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-dialog--styles() {
+    @include import-once( "dialog" ) {
+        @include core-styles();
+        @include kendo-window--styles();
+        @include kendo-dialog--layout();
+        @include kendo-dialog--theme();
+    }
+}

package/scss/dialog/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/dialog/_layout.scss" as *;
+
+
+@mixin kendo-dialog--layout() {
+    @include kendo-dialog--layout-base();
+}

package/scss/dialog/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/dialog/_theme.scss" as *;
+
+
+@mixin kendo-dialog--theme() {
+    @include kendo-dialog--theme-base();
+}

package/scss/dialog/_variables.scss

@@ -0,0 +1,43 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../action-buttons/_variables.scss" as *;
+
+// Dialog
+
+/// The background color of the Dialog titlebar.
+/// @group dialog
+$kendo-dialog-titlebar-bg: k-translucency-bg(k-color(surface-alt)) !default;
+/// The text color of the Dialog titlebar.
+/// @group dialog
+$kendo-dialog-titlebar-text: k-color(on-app-surface) !default;
+/// The border color of the Dialog titlebar.
+/// @group dialog
+$kendo-dialog-titlebar-border: inherit !default;
+
+/// The horizontal padding of the Dialog action buttons.
+/// @group dialog
+$kendo-dialog-buttongroup-padding-x: k-spacing(4) !default;
+/// The vertical padding of the Dialog action buttons.
+/// @group dialog
+$kendo-dialog-buttongroup-padding-y: k-spacing(4) !default;
+/// The width of the top border of the Dialog action buttons.
+/// @group dialog
+$kendo-dialog-buttongroup-border-width: 0 !default;
+/// The spacing between the Dialog action buttons.
+/// @group dialog
+$kendo-dialog-button-spacing: k-spacing(3) !default;
+
+/// The background color of the Dialog.
+/// @group dialog
+$kendo-dialog-bg: null !default;
+
+@forward "@progress/kendo-theme-core/scss/components/dialog/_variables.scss" with (
+    $kendo-dialog-titlebar-bg: $kendo-dialog-titlebar-bg,
+    $kendo-dialog-titlebar-text: $kendo-dialog-titlebar-text,
+    $kendo-dialog-titlebar-border: $kendo-dialog-titlebar-border,
+    $kendo-dialog-buttongroup-padding-x: $kendo-dialog-buttongroup-padding-x,
+    $kendo-dialog-buttongroup-padding-y: $kendo-dialog-buttongroup-padding-y,
+    $kendo-dialog-buttongroup-border-width: $kendo-dialog-buttongroup-border-width,
+    $kendo-dialog-button-spacing: $kendo-dialog-button-spacing,
+    $kendo-dialog-bg: $kendo-dialog-bg
+);

package/scss/dock-manager/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-dock-manager--styles() {
+    @include import-once("dock-manager") {
+        @include core-styles();
+        @include kendo-splitter--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-tabstrip--styles();
+        @include kendo-dock-manager--layout();
+        @include kendo-dock-manager--theme();
+    }
+}

package/scss/dock-manager/_layout.scss

@@ -0,0 +1,10 @@
+@use "@progress/kendo-theme-core/scss/components/dock-manager/_layout.scss" as *;
+
+@mixin kendo-dock-manager--layout() {
+    @include kendo-dock-manager--layout-base();
+    @include kendo-dock-navigator--layout();
+
+    .k-dock-manager-toolbar {
+        border-radius: 0;
+    }
+}

package/scss/dock-manager/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/dock-manager/_theme.scss" as *;
+
+@mixin kendo-dock-manager--theme() {
+    @include kendo-dock-manager--theme-base();
+    @include kendo-dock-navigator--theme();
+}

package/scss/dock-manager/_variables.scss

@@ -0,0 +1,157 @@
+@use "../core/_index.scss" as *;
+
+///  The width of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border-width: 1px !default;
+/// The style of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border-style: solid !default;
+/// The color of the border around the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-border: k-color(border) !default;
+/// The border radius of the DockManager.
+/// @group dock-manager
+$kendo-dock-manager-border-radius: k-border-radius(xxl) !default;
+
+/// The vertical padding of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-padding-y: k-spacing(4) !default;
+/// The horizontal padding of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-padding-x: k-spacing(4) !default;
+/// The width of the border around the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !default;
+///  The style of the border around the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-border-style: solid !default;
+/// The background color of the pane header in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-header-bg: k-color(surface-alt) !default;
+
+/// The vertical padding of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-padding-y: null !default;
+/// The horizontal padding of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-padding-x: null !default;
+/// The font family of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The line height of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-line-height: var( --kendo-line-height-sm, normal ) !default;
+/// The font weight of the pane title in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight-medium, normal ) !default;
+
+/// The horizontal padding of the pane content in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-header-padding-x !default;
+/// The vertical padding of the pane content in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-header-padding-x !default;
+
+/// The horizontal padding of the tabbed pane in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-tabbed-pane-padding-y: k-spacing(3.5) !default;
+/// The horizontal padding of the tabbed pane in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-tabbed-pane-padding-x: k-spacing(2) !default;
+
+/// The width of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-width: 300px !default;
+/// The background-color of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-bg: k-color(surface-alt) !default;
+/// The box shadow of the unpinned pane container in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) !default;
+
+/// The padding of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-padding: k-spacing(1.5) !default;
+/// The background color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-bg: k-elevation-bg(2, k-color(surface)) !default;
+/// The text color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-text: k-color(primary) !default;
+/// The outline width of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline-width: 1px !default;
+/// The outline style of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline-style: solid !default;
+/// The outline color of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
+/// The box shadow of the dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-shadow: k-elevation(5) !default;
+
+///  The background color of the hovered dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-hover-bg: k-color(primary-hover) !default;
+/// The text color of the hovered dock indicator in the DockManager component.
+/// @group dock-manager
+$kendo-dock-indicator-hover-text: k-color(on-primary) !default;
+
+/// The width of the border around the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-width: 1px !default;
+/// The style of the border around the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-style: dashed !default;
+/// The border radius of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border-radius: k-border-radius(sm) !default;
+/// The background color of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-color(primary) 16%, transparent) !default;
+/// The border color of the dropping area in the DockManager component.
+/// @group dock-manager
+$kendo-dock-manager-dock-preview-border: k-color(primary) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/dock-manager/_variables.scss" with (
+    $kendo-dock-manager-border-width: $kendo-dock-manager-border-width,
+    $kendo-dock-manager-border-style: $kendo-dock-manager-border-style,
+    $kendo-dock-manager-border: $kendo-dock-manager-border,
+    $kendo-dock-manager-border-radius: $kendo-dock-manager-border-radius,
+    $kendo-dock-manager-pane-header-padding-y: $kendo-dock-manager-pane-header-padding-y,
+    $kendo-dock-manager-pane-header-padding-x: $kendo-dock-manager-pane-header-padding-x,
+    $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-pane-header-border-width,
+    $kendo-dock-manager-pane-header-border-style: $kendo-dock-manager-pane-header-border-style,
+    $kendo-dock-manager-pane-header-bg: $kendo-dock-manager-pane-header-bg,
+    $kendo-dock-manager-pane-title-padding-y: $kendo-dock-manager-pane-title-padding-y,
+    $kendo-dock-manager-pane-title-padding-x: $kendo-dock-manager-pane-title-padding-x,
+    $kendo-dock-manager-pane-title-font-family: $kendo-dock-manager-pane-title-font-family,
+    $kendo-dock-manager-pane-title-font-size: $kendo-dock-manager-pane-title-font-size,
+    $kendo-dock-manager-pane-title-line-height: $kendo-dock-manager-pane-title-line-height,
+    $kendo-dock-manager-pane-title-font-weight: $kendo-dock-manager-pane-title-font-weight,
+    $kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-content-padding-x,
+    $kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-content-padding-y,
+    $kendo-dock-manager-tabbed-pane-padding-y: $kendo-dock-manager-tabbed-pane-padding-y,
+    $kendo-dock-manager-tabbed-pane-padding-x: $kendo-dock-manager-tabbed-pane-padding-x,
+    $kendo-dock-manager-unpinned-container-width: $kendo-dock-manager-unpinned-container-width,
+    $kendo-dock-manager-unpinned-container-bg: $kendo-dock-manager-unpinned-container-bg,
+    $kendo-dock-manager-unpinned-container-shadow: $kendo-dock-manager-unpinned-container-shadow,
+    $kendo-dock-indicator-padding: $kendo-dock-indicator-padding,
+    $kendo-dock-indicator-bg: $kendo-dock-indicator-bg,
+    $kendo-dock-indicator-text: $kendo-dock-indicator-text,
+    $kendo-dock-indicator-outline-width: $kendo-dock-indicator-outline-width,
+    $kendo-dock-indicator-outline-style: $kendo-dock-indicator-outline-style,
+    $kendo-dock-indicator-outline: $kendo-dock-indicator-outline,
+    $kendo-dock-indicator-shadow: $kendo-dock-indicator-shadow,
+    $kendo-dock-indicator-hover-bg: $kendo-dock-indicator-hover-bg,
+    $kendo-dock-indicator-hover-text: $kendo-dock-indicator-hover-text,
+    $kendo-dock-manager-dock-preview-border-width: $kendo-dock-manager-dock-preview-border-width,
+    $kendo-dock-manager-dock-preview-border-style: $kendo-dock-manager-dock-preview-border-style,
+    $kendo-dock-manager-dock-preview-border-radius: $kendo-dock-manager-dock-preview-border-radius,
+    $kendo-dock-manager-dock-preview-bg: $kendo-dock-manager-dock-preview-bg,
+    $kendo-dock-manager-dock-preview-border: $kendo-dock-manager-dock-preview-border
+);

package/scss/draggable/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-draggable--styles() {
+    @include import-once( "draggable" ) {
+        @include core-styles();
+        @include kendo-draggable--layout();
+        @include kendo-draggable--theme();
+    }
+}

package/scss/draggable/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/draggable/_layout.scss" as *;
+
+
+@mixin kendo-draggable--layout() {
+    @include kendo-draggable--layout-base();
+}

package/scss/draggable/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/draggable/_theme.scss" as *;
+
+
+@mixin kendo-draggable--theme() {
+    @include kendo-draggable--theme-base();
+}

package/scss/draggable/_variables.scss

@@ -0,0 +1,93 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+
+// Drag hint
+/// The horizontal padding of the drag hint.
+/// @group draggable
+$kendo-drag-hint-padding-x: k-spacing(2) !default;
+/// The vertical padding of the drag hint.
+/// @group draggable
+$kendo-drag-hint-padding-y: k-spacing(1) !default;
+/// The width of the border around the drag hint.
+/// @group draggable
+$kendo-drag-hint-border-width: 1px !default;
+/// The border radius of the drag hint.
+/// @group draggable
+$kendo-drag-hint-border-radius: k-border-radius(md) !default;
+/// The font size of the drag hint.
+/// @group draggable
+$kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font family of the drag hint.
+/// @group draggable
+$kendo-drag-hint-font-family: var( --kendo-font-family, inherit ) !default;
+/// The line height of the drag hint.
+/// @group draggable
+$kendo-drag-hint-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The background color of the drag hint.
+/// @group draggable
+$kendo-drag-hint-bg: k-color(surface) !default;
+/// The text color of the drag hint.
+/// @group draggable
+$kendo-drag-hint-text: k-color(on-app-surface) !default;
+/// The border color of the drag hint.
+/// @group draggable
+$kendo-drag-hint-border: k-color(border) !default;
+/// The background gradient of the drag hint.
+/// @group draggable
+$kendo-drag-hint-gradient: null !default;
+/// The shadow of the drag hint.
+/// @group draggable
+$kendo-drag-hint-shadow: null !default;
+
+/// The opacity of the drag hint.
+/// @group draggable
+$kendo-drag-hint-opacity: null !default;
+
+
+// Drop hint
+/// The size of the drop hint arrow.
+/// @group draggable
+$kendo-drop-hint-arrow-size: 8px !default;
+/// The spacing of the drop hint arrow.
+/// @group draggable
+$kendo-drop-hint-arrow-spacing: math.div( $kendo-drop-hint-arrow-size, 2 ) !default;
+/// The width of the horizontal drop hint line.
+/// @group draggable
+$kendo-drop-hint-line-h-width: 20px !default;
+/// The height of the horizontal drop hint line.
+/// @group draggable
+$kendo-drop-hint-line-h-height: 1px !default;
+/// The width of the vertical drop hint line.
+/// @group draggable
+$kendo-drop-hint-line-v-width: $kendo-drop-hint-line-h-height !default;
+/// The height of the vertical drop hint line.
+/// @group draggable
+$kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
+
+/// The background color of the drop hint.
+/// @group draggable
+$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-hint-padding-x,
+    $kendo-drag-hint-padding-y: $kendo-drag-hint-padding-y,
+    $kendo-drag-hint-border-width: $kendo-drag-hint-border-width,
+    $kendo-drag-hint-border-radius: $kendo-drag-hint-border-radius,
+    $kendo-drag-hint-font-size: $kendo-drag-hint-font-size,
+    $kendo-drag-hint-font-family: $kendo-drag-hint-font-family,
+    $kendo-drag-hint-line-height: $kendo-drag-hint-line-height,
+    $kendo-drag-hint-bg: $kendo-drag-hint-bg,
+    $kendo-drag-hint-text: $kendo-drag-hint-text,
+    $kendo-drag-hint-border: $kendo-drag-hint-border,
+    $kendo-drag-hint-gradient: $kendo-drag-hint-gradient,
+    $kendo-drag-hint-shadow: $kendo-drag-hint-shadow,
+    $kendo-drag-hint-opacity: $kendo-drag-hint-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/_index.scss

@@ -0,0 +1,22 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../overlay/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-drawer--styles() {
+    @include import-once( "drawer" ) {
+        @include core-styles();
+        @include kendo-overlay--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-list--styles();
+        @include kendo-drawer--layout();
+        @include kendo-drawer--theme();
+    }
+}

package/scss/drawer/_layout.scss

@@ -0,0 +1,21 @@
+@use "@progress/kendo-theme-core/scss/components/drawer/_layout.scss" as *;
+@use "../core/index.scss" as *;
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-drawer--layout() {
+    @include kendo-drawer--layout-base();
+
+    .k-drawer-items {
+        gap: k-spacing(0.5);
+    }
+
+    .k-drawer-item {
+        transition: background-color k-transition(snappy), color k-transition(snappy), outline k-transition(snappy);
+
+        > .k-drawer-link {
+            gap: $kendo-drawer-item-spacing;
+        }
+    }
+}

package/scss/drawer/_theme.scss

@@ -0,0 +1,19 @@
+@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();
+
+    .k-drawer {
+        backdrop-filter: k-translucency-blur(1);
+    }
+
+    .k-drawer-item {
+        &:focus,
+        &.k-focus {
+            @include focus-indicator( $kendo-drawer-focus-outline-color, $type: "outline" );
+        }
+    }
+}