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

package/scss/timeselector/_variables.scss

@@ -4,124 +4,124 @@
 
 /// Width of the border around the time-selector.
 /// @group time-selector
-$kendo-time-selector-border-width: 1px !default;
+$kendo-time-selector-border-width: var( --kendo-time-selector-border-width, 1px ) !default;
 /// Font family of the time-selector.
 /// @group time-selector
-$kendo-time-selector-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-time-selector-font-family: var( --kendo-time-selector-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// Font size of the time-selector.
 /// @group time-selector
-$kendo-time-selector-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-time-selector-font-size: var( --kendo-time-selector-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// Line height of the time-selector.
 /// @group time-selector
-$kendo-time-selector-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-time-selector-line-height: var( --kendo-time-selector-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// Background color of the time-selector.
 /// @group time-selector
-$kendo-time-selector-bg: k-color(surface-alt) !default;
+$kendo-time-selector-bg: var( --kendo-time-selector-bg, k-color(surface-alt) ) !default;
 /// Text color of the time-selector.
 /// @group time-selector
-$kendo-time-selector-text: k-color(on-app-surface) !default;
+$kendo-time-selector-text: var( --kendo-time-selector-text, k-color(on-app-surface) ) !default;
 /// Border color of the time-selector.
 /// @group time-selector
-$kendo-time-selector-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-time-selector-border: var( --kendo-time-selector-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// Horizontal padding of the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-padding-x: k-spacing(3) !default;
+$kendo-time-selector-header-padding-x: var( --kendo-time-selector-header-padding-x, k-spacing(3) ) !default;
 /// Vertical padding color of the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-padding-y: k-spacing(3) !default;
+$kendo-time-selector-header-padding-y: var( --kendo-time-selector-header-padding-y, k-spacing(3) ) !default;
 /// Width of the border around the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-border-width: 0px !default;
+$kendo-time-selector-header-border-width: var( --kendo-time-selector-header-border-width, 0px ) !default;
 /// The text color of the title in the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-title-text: unset !default;
+$kendo-time-selector-header-title-text: var( --kendo-time-selector-header-title-text, unset ) !default;
 /// The text color of the time now in the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-time-now-text: k-color(primary) !default;
+$kendo-time-selector-header-time-now-text: var( --kendo-time-selector-header-time-now-text, k-color(primary) ) !default;
 /// The hover text color of the time now in the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-time-now-hover-text: k-color(primary-hover) !default;
+$kendo-time-selector-header-time-now-hover-text: var( --kendo-time-selector-header-time-now-hover-text, k-color(primary-hover) ) !default;
 
 /// Visibility of the time-selector separator.
 /// @group time-selector
-$kendo-time-list-separator-display: none !default;
+$kendo-time-list-separator-display: var( --kendo-time-list-separator-display, none ) !default;
 /// Minimum width of the time-selector columns.
 /// @group time-selector
-$kendo-time-list-width: 4em !default;
+$kendo-time-list-width: var( --kendo-time-list-width, 4em ) !default;
 /// Height of the time-selector columns.
 /// @group time-selector
-$kendo-time-list-height: 240px !default;
+$kendo-time-list-height: var( --kendo-time-list-height, 240px ) !default;
 
 /// Spacing beneath the time selector titles.
 /// @group time-selector
-$kendo-time-list-title-spacing: k-spacing(3) !default;
+$kendo-time-list-title-spacing: var( --kendo-time-list-title-spacing, k-spacing(3) ) !default;
 /// Font size of the time-selector titles.
 /// @group time-selector
-$kendo-time-list-title-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-time-list-title-font-size: var( --kendo-time-list-title-font-size, var( --kendo-font-size-xs, inherit ) ) !default;
 /// Line height of the time-selector titles.
 /// @group time-selector
-$kendo-time-list-title-line-height: var( --kendo-line-height-lg, inherit ) !default;
+$kendo-time-list-title-line-height: var( --kendo-time-list-title-line-height, var( --kendo-line-height-lg, inherit ) ) !default;
 /// Height of the time-selector titles.
 /// @group time-selector
-$kendo-time-list-title-height: calc( #{$kendo-time-list-title-spacing} + #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) !default;
+$kendo-time-list-title-height: var( --kendo-time-list-title-height, calc( #{$kendo-time-list-title-spacing} + #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) ) !default;
 
 /// Text color of the time-selector titles.
 /// @group time-selector
-$kendo-time-list-title-text: k-color(subtle) !default;
+$kendo-time-list-title-text: var( --kendo-time-list-title-text, k-color(subtle) ) !default;
 /// Text color of the focused time-selector titles.
 /// @group time-selector
-$kendo-time-list-title-focus-text: $kendo-time-selector-text !default;
+$kendo-time-list-title-focus-text: var( --kendo-time-list-title-focus-text, $kendo-time-selector-text ) !default;
 
 /// Horizontal padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-x: k-spacing(2) !default;
+$kendo-time-list-item-padding-x: var( --kendo-time-list-item-padding-x, k-spacing(2) ) !default;
 /// Vertical padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-y: k-spacing(1) !default;
+$kendo-time-list-item-padding-y: var( --kendo-time-list-item-padding-y, k-spacing(1) ) !default;
 
 /// Width of the border of the selected item in the time-selector.
 /// @group time-selector
-$kendo-time-list-highlight-border-width: 1px 0px !default;
+$kendo-time-list-highlight-border-width: var( --kendo-time-list-highlight-border-width, 1px 0px ) !default;
 /// Height of the selected item in the time-selector.
 /// @group time-selector
-$kendo-time-list-highlight-height: calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
+$kendo-time-list-highlight-height: var( --kendo-time-list-highlight-height, calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) ) !default;
 /// Background color of the selected item in the time-selector.
 /// @group time-selector
-$kendo-time-list-highlight-bg: $kendo-time-selector-bg !default;
+$kendo-time-list-highlight-bg: var( --kendo-time-list-highlight-bg, $kendo-time-selector-bg ) !default;
 /// Border color of the selected item in the time-selector.
 /// @group time-selector
-$kendo-time-list-highlight-border: $kendo-time-selector-border !default;
+$kendo-time-list-highlight-border: var( --kendo-time-list-highlight-border, $kendo-time-selector-border ) !default;
 
 /// Background color of the focused time-selector column.
 /// @group time-selector
-$kendo-time-list-focus-bg: rgba(0, 0, 0, .04) !default;
+$kendo-time-list-focus-bg: var( --kendo-time-list-focus-bg, rgba(0, 0, 0, .04) ) !default;
 
 
 /// Font sizes of the time-selector.
 /// @group time-selector
-$kendo-time-selector-sm-font-size: $kendo-list-sm-font-size !default;
-$kendo-time-selector-md-font-size: $kendo-list-md-font-size !default;
-$kendo-time-selector-lg-font-size: $kendo-list-lg-font-size !default;
+$kendo-time-selector-sm-font-size: var( --kendo-time-selector-sm-font-size, $kendo-list-sm-font-size ) !default;
+$kendo-time-selector-md-font-size: var( --kendo-time-selector-md-font-size, $kendo-list-md-font-size ) !default;
+$kendo-time-selector-lg-font-size: var( --kendo-time-selector-lg-font-size, $kendo-list-lg-font-size ) !default;
 
 /// Line heights used along with $kendo-font-size.
 /// @group time-selector
-$kendo-time-selector-sm-line-height: $kendo-list-sm-line-height !default;
-$kendo-time-selector-md-line-height: $kendo-list-md-line-height !default;
-$kendo-time-selector-lg-line-height: $kendo-list-lg-line-height !default;
+$kendo-time-selector-sm-line-height: var( --kendo-time-selector-sm-line-height, $kendo-list-sm-line-height ) !default;
+$kendo-time-selector-md-line-height: var( --kendo-time-selector-md-line-height, $kendo-list-md-line-height ) !default;
+$kendo-time-selector-lg-line-height: var( --kendo-time-selector-lg-line-height, $kendo-list-lg-line-height ) !default;
 
 ///  Horizontal padding of the time-selector items.
 /// @group time-selector
-$kendo-time-selector-sm-list-item-padding-x: $kendo-list-sm-item-padding-x !default;
-$kendo-time-selector-md-list-item-padding-x: $kendo-list-md-item-padding-x !default;
-$kendo-time-selector-lg-list-item-padding-x: $kendo-list-lg-item-padding-x !default;
+$kendo-time-selector-sm-list-item-padding-x: var( --kendo-time-selector-sm-list-item-padding-x, $kendo-list-sm-item-padding-x ) !default;
+$kendo-time-selector-md-list-item-padding-x: var( --kendo-time-selector-md-list-item-padding-x, $kendo-list-md-item-padding-x ) !default;
+$kendo-time-selector-lg-list-item-padding-x: var( --kendo-time-selector-lg-list-item-padding-x, $kendo-list-lg-item-padding-x ) !default;
 
 ///  Vertical padding of the time-selector items.
 /// @group time-selector
-$kendo-time-selector-sm-list-item-padding-y: $kendo-list-sm-item-padding-y !default;
-$kendo-time-selector-md-list-item-padding-y: $kendo-list-md-item-padding-y !default;
-$kendo-time-selector-lg-list-item-padding-y: $kendo-list-lg-item-padding-y !default;
+$kendo-time-selector-sm-list-item-padding-y: var( --kendo-time-selector-sm-list-item-padding-y, $kendo-list-sm-item-padding-y ) !default;
+$kendo-time-selector-md-list-item-padding-y: var( --kendo-time-selector-md-list-item-padding-y, $kendo-list-md-item-padding-y ) !default;
+$kendo-time-selector-lg-list-item-padding-y: var( --kendo-time-selector-lg-list-item-padding-y, $kendo-list-lg-item-padding-y ) !default;
 
 /// Sizes map for the time-selector.
 /// @group time-selector
@@ -145,3 +145,46 @@ $kendo-time-selector-sizes: (
         list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/timeselector/_variables.scss" with (
+    $kendo-time-selector-border-width: $kendo-time-selector-border-width,
+    $kendo-time-selector-font-family: $kendo-time-selector-font-family,
+    $kendo-time-selector-font-size: $kendo-time-selector-font-size,
+    $kendo-time-selector-line-height: $kendo-time-selector-line-height,
+    $kendo-time-selector-bg: $kendo-time-selector-bg,
+    $kendo-time-selector-text: $kendo-time-selector-text,
+    $kendo-time-selector-border: $kendo-time-selector-border,
+    $kendo-time-selector-header-padding-x: $kendo-time-selector-header-padding-x,
+    $kendo-time-selector-header-padding-y: $kendo-time-selector-header-padding-y,
+    $kendo-time-selector-header-border-width: $kendo-time-selector-header-border-width,
+    $kendo-time-selector-header-title-text: $kendo-time-selector-header-title-text,
+    $kendo-time-selector-header-time-now-text: $kendo-time-selector-header-time-now-text,
+    $kendo-time-selector-header-time-now-hover-text: $kendo-time-selector-header-time-now-hover-text,
+    $kendo-time-list-width: $kendo-time-list-width,
+    $kendo-time-list-height: $kendo-time-list-height,
+    $kendo-time-list-title-font-size: $kendo-time-list-title-font-size,
+    $kendo-time-list-title-line-height: $kendo-time-list-title-line-height,
+    $kendo-time-list-title-height: $kendo-time-list-title-height,
+    $kendo-time-list-title-text: $kendo-time-list-title-text,
+    $kendo-time-list-title-focus-text: $kendo-time-list-title-focus-text,
+    $kendo-time-list-item-padding-x: $kendo-time-list-item-padding-x,
+    $kendo-time-list-item-padding-y: $kendo-time-list-item-padding-y,
+    $kendo-time-list-highlight-border-width: $kendo-time-list-highlight-border-width,
+    $kendo-time-list-highlight-height: $kendo-time-list-highlight-height,
+    $kendo-time-list-highlight-bg: $kendo-time-list-highlight-bg,
+    $kendo-time-list-highlight-border: $kendo-time-list-highlight-border,
+    $kendo-time-list-focus-bg: $kendo-time-list-focus-bg,
+    $kendo-time-selector-sm-font-size: $kendo-time-selector-sm-font-size,
+    $kendo-time-selector-sm-line-height: $kendo-time-selector-sm-line-height,
+    $kendo-time-selector-sm-list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
+    $kendo-time-selector-sm-list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y,
+    $kendo-time-selector-md-font-size: $kendo-time-selector-md-font-size,
+    $kendo-time-selector-md-line-height: $kendo-time-selector-md-line-height,
+    $kendo-time-selector-md-list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
+    $kendo-time-selector-md-list-item-padding-y: $kendo-time-selector-md-list-item-padding-y,
+    $kendo-time-selector-lg-font-size: $kendo-time-selector-lg-font-size,
+    $kendo-time-selector-lg-line-height: $kendo-time-selector-lg-line-height,
+    $kendo-time-selector-lg-list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
+    $kendo-time-selector-lg-list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y,
+    $kendo-time-selector-sizes: $kendo-time-selector-sizes
+);

package/scss/toolbar/_layout.scss

@@ -2,322 +2,36 @@
 @use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/toolbar/_layout.scss" as *;
 
 @mixin kendo-toolbar--layout() {
+    @include kendo-toolbar--layout-base();
 
-    // Base
     .k-toolbar {
-        margin: 0;
-        padding-inline: var( --kendo-toolbar-padding-x, 0 );
-        padding-block: var( --kendo-toolbar-padding-y, 0 );
-        border-width: var( --kendo-toolbar-border-width, #{$kendo-toolbar-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-toolbar-font-family, #{$kendo-toolbar-font-family} );
-        font-size: var( --kendo-toolbar-font-size, #{$kendo-toolbar-font-size} );
-        line-height: var( --kendo-toolbar-line-height, #{$kendo-toolbar-line-height} );
-        list-style: none;
-        display: flex;
-        flex-flow: row wrap;
-        gap: var( --kendo-toolbar-spacing, 0 );
-        align-items: center;
-        justify-content: flex-start;
-        position: relative;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        // Remove once we decide to not size empty containers
-        &::before {
-            content: "";
-            height: $kendo-button-inner-calc-size;
-            margin-inline-start: calc( var( --kendo-toolbar-spacing, 0 ) * -1 );
-        }
-
-        &.k-toolbar-resizable {
-            flex-wrap: nowrap;
-        }
-
-        &.k-toolbar-scrollable {
-            flex-wrap: nowrap;
-            position: relative;
-            margin-inline-start: calc( var( --kendo-toolbar-spacing, 0 ) * -1 );
-        }
-
-        &.k-toolbar-scrollable-overlay {
-
-            &::before,
-            &::after {
-                content: '';
-                height: 100%;
-                aspect-ratio: 1;
-                position: absolute;
-                z-index: 3;
-            }
-
-            &::before {
-                inset-inline-start: var( --kendo-toolbar-spacing, 0 );
-            }
-
-            &::after {
-                inset-inline-end: 0;
-            }
-
-            &.k-toolbar-scrollable-start::before,
-            &.k-toolbar-scrollable-end::after {
-                display: none;
-            }
-        }
-
-        > * {
-            flex-shrink: 0;
-            display: inline-flex;
-            align-content: center;
-            vertical-align: middle;
-
-            > label {
-                margin-inline-end: var( --kendo-toolbar-spacing, 0 );
-                align-self: center;
-            }
-        }
-
-        // Input
-        .k-input,
-        .k-picker {
-            width: var( --kendo-toolbar-input-width, #{$kendo-toolbar-input-width} );
-        }
-        .k-color-picker {
-            width: min-content;
-        }
-
-
-        // Overflow anchor
-        .k-toolbar-overflow-button {
-            margin-inline-start: auto;
-        }
-
-        // Overflow separator
-        .k-toolbar-separator.k-toolbar-button-separator {
-            margin-inline-start: auto;
-            height: var( --kendo-toolbar-separator-height, 100% );
-
-            + .k-toolbar-overflow-button {
-                margin-inline-start: 0;
-            }
-        }
-
-        // Spacer
-        .k-toolbar-spacer {
-            height: calc( var( --kendo-toolbar-line-height, #{$kendo-toolbar-line-height} ) * 1em );
-            flex: 1 0 0%;
-        }
 
         // Template item
         .k-toolbar-item:focus,
         .k-toolbar-item.k-focus {
-            outline-width: var( --kendo-toolbar-item-focus-outline-width, #{$kendo-toolbar-item-focus-outline-width} );
-            outline-style: var( --kendo-toolbar-item-focus-outline-style, #{$kendo-toolbar-item-focus-outline-style} );
+            outline-width: $kendo-toolbar-item-focus-outline-width;
+            outline-style: $kendo-toolbar-item-focus-outline-style;
         }
-    }
-
-    // Separator
-    .k-toolbar .k-separator,
-    .k-toolbar-separator {
-        width: 0;
-        height: calc( var( --kendo-toolbar-line-height, #{$kendo-toolbar-line-height} ) * 1em );
-        border-width: 0 0 0 1px;
-        border-style: solid;
-        align-self: center;
-    }
-
-    .k-toolbar-items {
-        display: flex;
-        flex-flow: row nowrap;
-        gap: var( --kendo-toolbar-spacing, 0 );
-        align-items: center;
-        justify-content: flex-start;
-        flex: 1 1 auto;
-        overflow: hidden;
-    }
-
-    .k-toolbar-items-scroll {
-        overflow-x: auto;
-        scrollbar-width: none;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
 
-    .k-toolbar-items-list {
-        display: flex;
-        flex-flow: row wrap;
-        padding-inline: var( --kendo-toolbar-padding-x, 0 );
-        padding-block: var( --kendo-toolbar-padding-y, 0 );
-        gap: var( --kendo-toolbar-spacing, 0 );
-        align-items: center;
-        justify-content: flex-start;
-        flex: 1 1 auto;
-        overflow: hidden;
     }
-
-    // Outline Toolbar
-    .k-toolbar-outline {
-        border-width: var( --kendo-toolbar-outline-border-width, #{$kendo-toolbar-outline-border-width} );
-        background: none;
-    }
-
-    // Flat Toolbar
-    .k-toolbar-flat {
-        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
-        border-inline-color: transparent !important; // stylelint-disable-line declaration-no-important
-        background: none !important;  // stylelint-disable-line declaration-no-important
-    }
-
-    // Toolbar group
-    .k-toolbar-group {
-        display: flex;
-        flex-direction: inherit;
-        flex-wrap: nowrap;
-        gap: inherit;
-    }
-
-    // Toolbar sizes
-    @each $size, $size-props in $kendo-toolbar-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-        $_spacing: map.get( $size-props, spacing );
-        $_separator-height: map.get( $size-props, separator-height );
-
-        .k-toolbar-#{$size},
-        .k-toolbar-items-list-#{$size} {
-            --kendo-toolbar-padding-x: var( --kendo-toolbar-#{$size}-padding-x, #{$_padding-x} );
-            --kendo-toolbar-padding-y: var( --kendo-toolbar-#{$size}-padding-y, #{$_padding-y} );
-            --kendo-toolbar-spacing: var( --kendo-toolbar-#{$size}-spacing, #{$_spacing} );
-            --kendo-toolbar-separator-height: var( --kendo-toolbar-#{$size}-separator-height, #{$_separator-height} );
-
-            .k-toolbar-items-scroll {
-                padding-block: var( --kendo-toolbar-#{$size}-padding-y, #{$_padding-y} );
-                margin-block: calc( var( --kendo-toolbar-#{$size}-padding-y, #{$_padding-y} ) * -1 );
-                padding-inline: var( --kendo-toolbar-#{$size}-padding-x, #{$_padding-x} );
-                margin-inline: calc( var( --kendo-toolbar-#{$size}-padding-x, #{$_padding-x} ) * -1 );
-            }
-
-            &.k-toolbar-scrollable-overlay .k-toolbar-items-scroll:only-child,
-            .k-toolbar-items-scroll:not(:only-child) {
-                padding-inline-end:0;
-                margin-inline-end: 0;
-            }
-        }
-
+    .k-toolbar::before {
+        height: $kendo-button-inner-calc-size;
     }
 
-    // Remove once we decide to not size empty containers
     .k-toolbar-sm::before {
-        height: var( --kendo-button-sm-inner-calc-size, #{$kendo-button-sm-inner-calc-size} );
+        height: $kendo-button-sm-inner-calc-size;
     }
     .k-toolbar-md::before {
-        height: var( --kendo-button-md-inner-calc-size, #{$kendo-button-md-inner-calc-size} );
+        height: $kendo-button-md-inner-calc-size;
     }
     .k-toolbar-lg::before {
-        height: var( --kendo-button-lg-inner-calc-size, #{$kendo-button-lg-inner-calc-size} );
+        height: $kendo-button-lg-inner-calc-size;
     }
 
-    // stylelint-disable selector-class-pattern
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content {
-        padding-inline: var( --kendo-toolbar-md-padding-x, #{$kendo-toolbar-md-padding-x} ) !important; // stylelint-disable-line declaration-no-important
-        padding-block: var( --kendo-toolbar-md-padding-y, #{$kendo-toolbar-md-padding-y} ) !important; // stylelint-disable-line declaration-no-important
-        border-width: var( --kendo-toolbar-border-width, #{$kendo-toolbar-border-width} );
-        border-style: solid;
-        display: flex;
-        flex-flow: row nowrap;
-        gap: var( --kendo-toolbar-md-spacing, #{$kendo-toolbar-md-spacing} );
-        align-items: center;
-
-        .k-toolbar {
-            padding: 0;
-            border-width: 0;
-            flex-shrink: 1;
-            color: inherit;
-            background: none;
-        }
+    .k-overflow-container .k-overflow-button {
+        gap: .5rem ;
     }
-
-    .k-editortoolbar-dragHandle {
-        cursor: move;
-        display: flex;
-        align-items: center;
-        align-self: stretch;
-        flex-shrink: 0;
-    }
-    // stylelint-enable selector-class-pattern
-
-
-    // Remove once the Overflow Popup uses
-    // the proper Menu rendering in all suites.
-    .k-overflow-container {
-        font-size: var( --kendo-menu-popup-md-font-size, inherit );
-        line-height: var( --kendo-menu-popup-md-line-height, normal );
-
-        > .k-item {
-            border-color: inherit;
-        }
-
-        .k-separator {
-            margin-block: k-spacing(1);
-        }
-
-        // Group
-        .k-overflow-tool-group {
-            display: block;
-        }
-
-        // Button
-        .k-overflow-button {
-            padding-inline: var( --kendo-menu-popup-md-item-padding-x, 8px );
-            padding-block: var( --kendo-menu-popup-md-item-padding-y, 4px );
-            width: 100%;
-            height: auto;
-            border-width: 0;
-            border-radius: 0;
-            aspect-ratio: auto;
-            color: inherit;
-            background-color: transparent;
-            background-image: none;
-            font: inherit;
-            cursor: pointer;
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            align-content: center;
-            gap: var( --kendo-overflow-button-spacing, .5rem );
-            justify-content: flex-start;
-            position: relative;
-        }
-
-        // Button group
-        .k-button-group {
-            @include box-shadow( none );
-            display: flex;
-            flex-flow: column nowrap;
-
-            .k-button {
-                margin: if( var( --kendo-button-border-width, 0 ) == 0, null, 0);
-            }
-        }
-
-        // Split button
-        .k-split-button {
-            display: flex;
-            flex-direction: column;
-        }
-
-        // Hidden items
-        .k-overflow-hidden {
-            display: none;
-        }
-    }
-
 }