@progress/kendo-theme-default 5.6.1-dev.5 → 5.7.0

package/dist/all.scss

@@ -1512,7 +1512,7 @@ $line-height-xs: 1 !default;
 $line-height-sm: 1.25 !default;
 $line-height-md: $line-height !default;
 $line-height-lg: 1.5 !default;
-$line-height-em: $line-height * 1em !default;
+$line-height-em: calc( #{$line-height} * 1em ) !default;
 
 
 // Font weight
@@ -1744,7 +1744,6 @@ $display4-letter-spacing: null !default;
 @include exports( "common/disabled" ) {
 
     // Disabled state
-    .k-state-disabled,
     .k-disabled,
     .k-widget[disabled],
     .k-disabled {
@@ -1759,8 +1758,7 @@ $display4-letter-spacing: null !default;
 
         // Nested disabled
         [disabled],
-        .k-disabled,
-        .k-state-disabled {
+        .k-disabled {
             opacity: 1;
             filter: grayscale(0);
         }
@@ -3945,6 +3943,9 @@ $display4-letter-spacing: null !default;
     @each $pos in (static, relative, absolute, fixed, sticky) {
         .k-#{$pos},
         .k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
+
+        .\!k-#{$pos},
+        .\!k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
     }
 
     /// @name k-pos-top
@@ -4454,18 +4455,28 @@ $display4-letter-spacing: null !default;
 @include exports( "common/decoration/color" ) {
 
     // sass-lint:disable-block no-important
+    // sass-lint:disable-block class-name-format
     // stylelint-disable block-opening-brace-space-before
 
     .k-text-base,
     .k-color-base {
         color: $base-text;
     }
+    .\!k-text-base,
+    .\!k-color-base {
+        color: $base-text !important;
+    }
 
     .k-color-inherit { color: inherit; }
+    .\!k-color-inherit { color: inherit !important; }
 
     @each $name, $color in $kendo-theme-colors {
         .k-text-#{$name},
         .k-color-#{$name} {
+            color: $color;
+        }
+        .\!k-text-#{$name},
+        .\!k-color-#{$name} {
             color: $color !important;
         }
     }
@@ -4476,60 +4487,16 @@ $display4-letter-spacing: null !default;
 @include exports( "common/decoration/background" ) {
 
     // sass-lint:disable-block no-important
+    // sass-lint:disable-block class-name-format
 
     @each $name, $bg-color in $kendo-theme-colors {
         .k-bg-#{$name} {
-            background-color: $bg-color !important;
+            background-color: $bg-color;
         }
-    }
-
-}
-
-
-@mixin variant( $base ) {
-    background-color: tint($base, 10);
-    color: shade($base, 6);
-    border-color: tint($base, 9);
-}
-
-@include exports( "common/decoration/variant" ) {
-
-    @each $name, $variant in $kendo-theme-colors {
-        .k-state-#{$name} {
-            @include variant( $variant );
+        .\!k-bg-#{$name} {
+            background-color: $bg-color !important;
         }
     }
-}
-
-
-@include exports( "common/decoration/legacy" ) {
-
-    .k-info-colored {
-        color: #50607f;
-        border-color: #d0d9df;
-        background-color: #f0f9ff;
-    }
-
-    .k-success-colored {
-        color: #507f50;
-        border-color: #d0dfd0;
-        background-color: #f0fff0;
-    }
-
-    .k-error-colored {
-        color: #7f5050;
-        border-color: #dfd0d0;
-        background-color: #fff0f0;
-    }
-
-    .k-shadow {
-        // Shadow moved to popup/_layout.scss due to variable flow
-        // box-shadow: $popup-shadow;
-    }
-
-    .k-inset {
-        box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .03), inset 0 4px 5px 0 rgba(0, 0, 0, .04);
-    }
 
 }
 
@@ -7669,41 +7636,76 @@ $popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !d
 // Component
 // #region @import "_variables.scss"; -> packages/default/scss/badge/_variables.scss
 // Badge
-$badge-padding-x: $padding-x-sm !default;
-$badge-padding-y: $badge-padding-x !default;
-$badge-border-width: 1px !default;
-$badge-border-radius: $kendo-border-radius-md !default;
-$badge-font-size: $font-size-xs !default;
-$badge-line-height: 1 !default;
-
-$badge-padding-x-sm: ( $badge-padding-x / 2 ) !default;
-$badge-padding-y-sm: ( $badge-padding-y / 2 ) !default;
-$badge-border-width-sm: $badge-border-width !default;
-$badge-border-radius-sm: $kendo-border-radius-sm !default;
-$badge-font-size-sm: $font-size-xs !default;
-$badge-line-height-sm: 1 !default;
-
-$badge-padding-x-lg: ( $badge-padding-x * 1.5 ) !default;
-$badge-padding-y-lg: ( $badge-padding-y * 1.5 ) !default;
-$badge-border-width-lg: $badge-border-width !default;
-$badge-border-radius-lg: $kendo-border-radius-lg !default;
-$badge-font-size-lg: $font-size-sm !default;
-$badge-line-height-lg: 1 !default;
-
-$badge-fixed-size: 20px !default;
-$badge-calc-size: calc( #{$badge-line-height * 1em} + #{$badge-padding-y * 2} + #{$badge-border-width * 2} ) !default;
-$badge-size: if( $use-calc-badge-size, $badge-calc-size, $badge-fixed-size ) !default;
-$badge-dot-size: 10px !default;
-
-$badge-fixed-size-sm: 16px !default;
-$badge-calc-size-sm: calc( #{$badge-line-height-sm * 1em} + #{$badge-padding-y-sm * 2} + #{$badge-border-width-sm * 2} ) !default;
-$badge-size-sm: if( $use-calc-badge-size, $badge-calc-size-sm, $badge-fixed-size-sm ) !default;
-$badge-dot-size-sm: 6px !default;
-
-$badge-fixed-size-lg: 26px !default;
-$badge-calc-size-lg: calc( #{$badge-line-height-lg * 1em} + #{$badge-padding-y-lg * 2} + #{$badge-border-width-lg * 2} ) !default;
-$badge-size-lg: if( $use-calc-badge-size, $badge-calc-size-lg, $badge-fixed-size-lg ) !default;
-$badge-dot-size-lg: 12px !default;
+
+/// Width of the border around the badge.
+/// @group badge
+$kendo-badge-border-width: 1px !default;
+
+/// Border radius of the badge.
+/// @group badge
+$kendo-badge-border-radius: $kendo-border-radius-md !default;
+
+
+/// Horizontal padding of the badge.
+/// @group badge
+$kendo-badge-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-x-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-badge-padding-x-md: map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+
+/// Vertical padding of the badge.
+/// @group badge
+$kendo-badge-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin )  !default;
+$kendo-badge-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-badge-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+
+/// Font sizes of the badge.
+/// @group badge
+$kendo-badge-font-size: $font-size-xs !default;
+$kendo-badge-font-size-sm: $font-size-xs !default;
+$kendo-badge-font-size-md: $font-size-xs !default;
+$kendo-badge-font-size-lg: $font-size-xs !default;
+
+/// Line heights used along with $font-size.
+/// @group badge
+$kendo-badge-line-height: 1 !default;
+$kendo-badge-line-height-sm: $kendo-badge-line-height !default;
+$kendo-badge-line-height-md: $kendo-badge-line-height !default;
+$kendo-badge-line-height-lg: $kendo-badge-line-height !default;
+
+/// Badge min width used for circle badge.
+/// @group badge
+$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2}) !default;
+$kendo-badge-min-width-sm: calc( #{$kendo-badge-line-height-sm * 1em} + #{$kendo-badge-padding-y-sm * 2} + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-min-width-md: calc( #{$kendo-badge-line-height-md * 1em} + #{$kendo-badge-padding-y-md * 2} + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-min-width-lg: calc( #{$kendo-badge-line-height-lg * 1em} + #{$kendo-badge-padding-y-lg * 2} + #{$kendo-badge-border-width * 2} ) !default;
+
+/// Sizes map for the badge.
+/// @group badge
+$kendo-badge-sizes: (
+    sm: (
+        padding-x: $kendo-badge-padding-x-sm,
+        padding-y: $kendo-badge-padding-y-sm,
+        font-size: $kendo-badge-font-size-sm,
+        line-height: $kendo-badge-line-height-sm,
+        min-width: $kendo-badge-min-width-sm
+    ),
+    md: (
+        padding-x: $kendo-badge-padding-x-md,
+        padding-y: $kendo-badge-padding-y-md,
+        font-size: $kendo-badge-font-size-md,
+        line-height: $kendo-badge-line-height-md,
+        min-width: $kendo-badge-min-width-md
+    ),
+    lg: (
+        padding-x: $kendo-badge-padding-x-lg,
+        padding-y: $kendo-badge-padding-y-lg,
+        font-size: $kendo-badge-font-size-lg,
+        line-height: $kendo-badge-line-height-lg,
+        min-width: $kendo-badge-min-width-lg
+    )
+) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/badge/_layout.scss
@@ -7711,7 +7713,7 @@ $badge-dot-size-lg: 12px !default;
 
     .k-badge {
         padding: 0;
-        border-width: 0;
+        border-width: $kendo-badge-border-width;
         border-style: solid;
         border-color: transparent;
         box-sizing: border-box;
@@ -7761,74 +7763,23 @@ $badge-dot-size-lg: 12px !default;
 
 
     // Badge sizes
-    .k-badge-sm {
-        padding: $badge-padding-y-sm $badge-padding-x-sm;
-        border-width: $badge-border-width-sm;
-        font-size: $badge-font-size-sm;
-        line-height: $badge-line-height-sm;
-
-        &:empty { padding: $badge-padding-y-sm; }
-    }
-    .k-badge-md {
-        padding: $badge-padding-y $badge-padding-x;
-        border-width: $badge-border-width;
-        font-size: $badge-font-size;
-        line-height: $badge-line-height;
-
-        &:empty { padding: $badge-padding-y; }
-    }
-    .k-badge-lg {
-        padding: $badge-padding-y-lg $badge-padding-x-lg;
-        border-width: $badge-border-width-lg;
-        font-size: $badge-font-size-lg;
-        line-height: $badge-line-height-lg;
-
-        &:empty { padding: $badge-padding-y-lg; }
-    }
-
-
-    // Badge shapes
-    .k-badge-rounded {
-        &.k-badge-sm { @include border-radius( $badge-border-radius-sm ); }
-        &.k-badge-md { @include border-radius( $badge-border-radius ); }
-        &.k-badge-lg { @include border-radius( $badge-border-radius-lg ); }
-    }
-    .k-badge-pill {
-        border-radius: 5rem;
-    }
-    .k-badge-circle {
-        padding: 0 !important; // sass-lint:disable-line no-important
-        border-radius: 100%;
+    @each $size, $size-props in $kendo-badge-sizes {
+        $_padding-x: map-get( $size-props, padding-x );
+        $_padding-y: map-get( $size-props, padding-y );
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_min-width: map-get( $size-props, min-width );
 
-        &.k-badge-sm {
-            width: $badge-size-sm;
-            height: $badge-size-sm;
-        }
-        &.k-badge-md {
-            width: $badge-size;
-            height: $badge-size;
-        }
-        &.k-badge-lg {
-            width: $badge-size-lg;
-            height: $badge-size-lg;
-        }
-    }
-    .k-badge-dot {
-        padding: 0 !important;  // sass-lint:disable-line no-important
-        border-radius: 100%;
-        font-size: 0;
+        .k-badge-#{$size} {
+            padding: $_padding-y $_padding-x;
+            font-size: $_font-size;
+            line-height: $_line-height;
+            min-width: $_min-width;
 
-        &.k-badge-sm {
-            width: $badge-dot-size-sm;
-            height: $badge-dot-size-sm;
-        }
-        &.k-badge-md {
-            width: $badge-dot-size;
-            height: $badge-dot-size;
-        }
-        &.k-badge-lg {
-            width: $badge-dot-size-lg;
-            height: $badge-dot-size-lg;
+            &:empty {
+                padding: $_padding-y;
+                min-width: auto;
+             }
         }
     }
 
@@ -7909,7 +7860,7 @@ $badge-dot-size-lg: 12px !default;
 
     // Solid badges
     @each $name, $color in $kendo-theme-colors {
-        .k-badge-solid.k-badge-#{$name} {
+        .k-badge-solid-#{$name} {
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -7923,7 +7874,7 @@ $badge-dot-size-lg: 12px !default;
     }
 
     @each $name, $color in $kendo-theme-colors {
-        .k-badge-outline.k-badge-#{$name} {
+        .k-badge-outline-#{$name} {
             color: $color;
         }
     }
@@ -7979,7 +7930,7 @@ $kendo-button-font-size-md: $font-size-md !default;
 $kendo-button-line-height-md: $line-height-md !default;
 
 $kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 2 );
+$kendo-button-padding-y-lg: map-get( $spacing, 2 ) !default;
 $kendo-button-font-size-lg: $font-size-lg !default;
 $kendo-button-line-height-lg: $line-height-lg !default;
 
@@ -9062,8 +9013,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include disabled( $disabled-styling );
 
             [disabled] &,
-            .k-disabled &,
-            .k-state-disabled & {
+            .k-disabled & {
                 opacity: 1;
                 filter: grayscale(0);
             }
@@ -9084,8 +9034,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include disabled( $disabled-styling );
 
             [disabled] &,
-            .k-disabled &,
-            .k-state-disabled & {
+            .k-disabled & {
                 opacity: 1;
                 filter: grayscale(0);
             }
@@ -10000,7 +9949,6 @@ $floating-label-focus-text: null !default;
             width: auto;
         }
 
-        &.k-state-empty,
         &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
@@ -10011,8 +9959,6 @@ $floating-label-focus-text: null !default;
         }
 
         > .k-label,
-        // &:focus-within > .k-label,
-        &.k-state-focused > .k-label,
         &.k-focus > .k-label {
             top: $floating-label-focus-offset-y;
             left: $floating-label-focus-offset-x;
@@ -10024,7 +9970,6 @@ $floating-label-focus-text: null !default;
             transform: scale( $floating-label-focus-scale );
         }
 
-        &.k-state-empty:not(.k-state-focused) ::placeholder,
         &.k-empty:not(.k-focus):not(:focus-within) ::placeholder {
             color: transparent;
         }
@@ -10038,7 +9983,6 @@ $floating-label-focus-text: null !default;
                 transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
             }
 
-            &.k-state-empty,
             &.k-empty {
                 > .k-label {
                     left: auto;
@@ -10047,8 +9991,6 @@ $floating-label-focus-text: null !default;
             }
 
             > .k-label,
-            // &:focus-within > .k-label,
-            &.k-state-focused > .k-label,
             &.k-focus > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
@@ -10076,8 +10018,7 @@ $floating-label-focus-text: null !default;
             );
         }
 
-        &.k-focus > .k-label,
-        &.k-state-focused > .k-label {
+        &.k-focus > .k-label {
             @include fill(
                 $color: $floating-label-focus-text,
                 $bg: $floating-label-focus-bg
@@ -12390,8 +12331,11 @@ $loader-container-font-size-lg: $font-size-lg !default;
     }
 
     .k-loader-container-inner {
-        .k-text-secondary {
-            color: $loader-secondary-bg !important; // sass-lint:disable-line no-important
+        // sass-lint:disable-block no-important
+        // sass-lint:disable-block class-name-format
+        .k-text-secondary,
+        .\!k-text-secondary {
+            color: $loader-secondary-bg !important;
         }
     }
 
@@ -13263,6 +13207,12 @@ $tooltip-error-border: $tooltip-error-bg !default;
             align-items: center;
         }
 
+        // Template item
+        .k-toolbar-item:focus {
+            text-decoration: none;
+            outline: 0;
+        }
+
     }
 
 
@@ -13424,6 +13374,13 @@ $tooltip-error-border: $tooltip-error-bg !default;
         }
 
 
+        // Template item
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
+            @include box-shadow( $kendo-button-focus-shadow );
+        }
+
+
         // Button group
         .k-button-group {}
 
@@ -13676,7 +13633,7 @@ $form-spacer: $padding-x * 2 !default;
 
 $form-font-size: $font-size !default;
 $form-line-height: $line-height !default;
-$form-line-height-em: $form-line-height * 1em !default;
+$form-line-height-em: calc( #{$form-line-height} * 1em ) !default;
 $form-line-height-sm: $line-height-sm !default;
 $form-line-height-lg: $line-height-lg !default;
 
@@ -14964,7 +14921,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
 
 
         // Selection
-        > .k-state-selected,
         > .k-selected {
             border-width: 0;
             border-style: solid;
@@ -15035,7 +14991,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
             flex-direction: row;
         }
 
-        > .k-state-selected,
         > .k-selected {
             width: 0;
             width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -15062,7 +15017,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         // Horizontal reverse
         &.k-progressbar-reverse {
 
-            > .k-state-selected,
             > .k-selected {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
@@ -15087,7 +15041,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
             writing-mode: vertical-lr;
         }
 
-        > .k-state-selected,
         > .k-selected {
             height: 0;
             height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
@@ -15117,7 +15070,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         &.k-progressbar-reverse {
             flex-direction: column;
 
-            > .k-state-selected,
             > .k-selected {
                 flex-direction: column;
                 align-self: flex-start;
@@ -15129,7 +15081,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
     // Indeterminate
     .k-progressbar-indeterminate {
         .k-progress-status-wrap,
-        .k-state-selected,
         .k-selected,
         .k-item {
             display: none;
@@ -15140,9 +15091,7 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
     // Blazor specific
     .telerik-blazor.k-progressbar-horizontal {
 
-        > .k-state-selected,
         > .k-selected,
-        > .k-state-selected > .k-progress-status-wrap,
         > .k-selected > .k-progress-status-wrap {
             transition: width .1s ease-in-out;
         }
@@ -15171,7 +15120,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         display: -ms-inline-grid;
 
         > .k-progress-status-wrap,
-        > .k-state-selected,
         > .k-selected {
             -ms-grid-column: 1;
             -ms-grid-row: 1;
@@ -15181,7 +15129,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         -ms-grid-columns: 1fr;
         -ms-grid-rows: $progressbar-height;
 
-        &.k-progressbar-reverse > .k-state-selected,
         &.k-progressbar-reverse > .k-selected {
             -ms-grid-column-align: end;
         }
@@ -15190,12 +15137,10 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
         -ms-grid-columns: $progressbar-height;
         -ms-grid-rows: 1fr;
 
-        > .k-state-selected,
         > .k-selected {
             -ms-grid-row-align: end;
         }
 
-        &.k-progressbar-reverse > .k-state-selected,
         &.k-progressbar-reverse > .k-selected {
             -ms-grid-row-align: start;
         }
@@ -15258,7 +15203,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
     .k-progressbar {
         @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
 
-        .k-state-selected,
         .k-selected {
             @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
         }
@@ -15638,7 +15582,6 @@ $kendo-radio-ripple-opacity: .25 !default;
         }
 
         .k-radio:focus,
-        .k-radio.k-state-focus,
         .k-radio.k-focus {
             box-shadow: none !important; // sass-lint:disable-line no-important
 
@@ -15699,7 +15642,6 @@ $kendo-radio-ripple-opacity: .25 !default;
 
     // Hover state
     .k-radio:hover,
-    .k-radio.k-state-hover,
     .k-radio.k-hover {
         @include fill(
             $kendo-radio-hover-text,
@@ -15711,7 +15653,6 @@ $kendo-radio-ripple-opacity: .25 !default;
 
     // Focus state
     .k-radio:focus,
-    .k-radio.k-state-focus,
     .k-radio.k-focus {
         @include fill( $border: $kendo-radio-focus-border );
         @include box-shadow( $kendo-radio-focus-shadow );
@@ -15720,13 +15661,11 @@ $kendo-radio-ripple-opacity: .25 !default;
 
     // Invalid state
     .k-radio.k-invalid,
-    .k-radio.k-state-invalid,
     .k-radio.ng-invalid.ng-touched,
     .k-radio.ng-invalid.ng-dirty {
         @include fill( $border: $kendo-radio-invalid-border );
     }
     .k-radio.k-invalid + .k-radio-label,
-    .k-radio.k-state-invalid + .k-radio-label,
     .k-radio.ng-invalid.ng-touched + .k-radio-label,
     .k-radio.ng-invalid.ng-dirty + .k-radio-label {
         @include fill( $color: $kendo-radio-invalid-text );
@@ -15743,7 +15682,6 @@ $kendo-radio-ripple-opacity: .25 !default;
         );
     }
     .k-radio:checked:focus,
-    .k-radio.k-checked.k-state-focus,
     .k-radio.k-checked.k-focus {
         @include fill( $border: $kendo-radio-focus-checked-border );
         @include box-shadow( $kendo-radio-focus-checked-shadow );
@@ -15911,7 +15849,6 @@ $slider-disabled-opacity: null !default;
         }
 
 
-        &.k-state-disabled,
         &.k-disabled {
             .k-tick,
             .k-slider-track,
@@ -16205,8 +16142,8 @@ $slider-disabled-opacity: null !default;
                 left: auto;
             }
 
-            .k-button .k-i-arrow-e,
-            .k-button .k-i-arrow-w {
+            .k-button-increase .k-icon,
+            .k-button-decrease .k-icon {
                 transform: scaleX(-1);
             }
         }
@@ -16365,20 +16302,17 @@ $slider-disabled-opacity: null !default;
             }
 
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
 
-        &.k-state-focused,
         &.k-focus {
             .k-draghandle {
                 @include box-shadow( $slider-draghandle-focused-shadow );
             }
         }
 
-        &.k-state-disabled,
         &.k-disabled {
             opacity: $slider-disabled-opacity;
         }
@@ -17027,7 +16961,6 @@ $kendo-calendar-sizes: (
         }
 
         // // styles are applied to the k-link element inside
-        // .k-state-selected,
         // .k-selected {
         //     color: inherit;
         //     background: transparent;
@@ -17152,10 +17085,8 @@ $kendo-calendar-sizes: (
 
             &:hover,
             &.k-hover,
-            &.k-state-hover,
             &:focus,
-            &.k-focus,
-            &.k-state-focus {
+            &.k-focus {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -17176,8 +17107,7 @@ $kendo-calendar-sizes: (
                 .k-calendar-cell-inner {
                     box-shadow: inset 0 0 0 1px $calendar-today-color;
                 }
-                &.k-focus .k-calendar-cell-inner,
-                &.k-state-focused .k-calendar-cell-inner {
+                &.k-focus .k-calendar-cell-inner {
                     box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
                 }
             } @else if $calendar-today-style == color {
@@ -17211,8 +17141,7 @@ $kendo-calendar-sizes: (
 
         // Interactive states
         .k-calendar-td:hover .k-calendar-cell-inner,
-        .k-calendar-td.k-hover .k-calendar-cell-inner,
-        .k-calendar-td.k-state-hover .k-calendar-cell-inner {
+        .k-calendar-td.k-hover .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-hover-text,
                 $calendar-cell-hover-bg,
@@ -17220,8 +17149,7 @@ $kendo-calendar-sizes: (
                 $calendar-cell-hover-gradient
             );
         }
-        .k-calendar-td.k-selected .k-calendar-cell-inner,
-        .k-calendar-td.k-state-selected .k-calendar-cell-inner {
+        .k-calendar-td.k-selected .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-selected-text,
                 $calendar-cell-selected-bg,
@@ -17230,8 +17158,7 @@ $kendo-calendar-sizes: (
             );
         }
         .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
-        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
-        .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
+        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-selected-hover-text,
                 $calendar-cell-selected-hover-bg,
@@ -17240,14 +17167,11 @@ $kendo-calendar-sizes: (
             );
         }
         .k-calendar-td:focus .k-calendar-cell-inner,
-        .k-calendar-td.k-focus .k-calendar-cell-inner,
-        .k-calendar-td.k-state-focus .k-calendar-cell-inner,
-        .k-calendar-td.k-state-focused .k-calendar-cell-inner {
+        .k-calendar-td.k-focus .k-calendar-cell-inner {
             box-shadow: $calendar-cell-focused-shadow;
         }
         .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
-        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
-        .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
+        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
             box-shadow: $calendar-cell-selected-focus-shadow;
         }
 
@@ -17261,8 +17185,7 @@ $kendo-calendar-sizes: (
             box-shadow: inset -1px 0 $calendar-navigation-border;
 
             li:hover,
-            li.k-hover,
-            li.k-state-hover {
+            li.k-hover {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -17285,7 +17208,6 @@ $kendo-calendar-sizes: (
         // Invalid
         &.k-invalid,
         &.k-invalid:hover,
-        &.k-state-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
             border-color: $invalid-border;
@@ -17333,9 +17255,7 @@ $kendo-calendar-sizes: (
         }
 
         .k-range-start.k-active,
-        .k-range-start.k-state-active,
-        .k-range-end.k-active,
-        .k-range-end.k-state-active {
+        .k-range-end.k-active {
             .k-calendar-cell-inner {
                 box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
             }
@@ -17568,7 +17488,6 @@ $kendo-time-selector-sizes: (
             display: block;
         }
 
-        &.k-state-focused,
         &.k-focus {
             &::before,
             &::after {
@@ -17740,7 +17659,6 @@ $kendo-time-selector-sizes: (
             color: $time-list-title-text;
         }
 
-        &.k-state-focused,
         &.k-focus {
             .k-title {
                 color: $time-list-title-focus-text;
@@ -18043,18 +17961,14 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
         -ms-high-contrast-adjust: none;
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             position: relative;
             z-index: 101;
         }
 
         &:focus,
-        &.k-state-focus,
         &.k-focus,
-        &.k-state-selected,
         &.k-selected,
-        &.k-state-selected:hover,
         &.k-selected:hover {
             position: relative;
             z-index: 100;
@@ -18071,20 +17985,15 @@ $colorpalette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0
     .k-colorpalette-tile {
 
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             @include box-shadow( $colorpalette-tile-focus-shadow );
         }
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include box-shadow( $colorpalette-tile-hover-shadow );
         }
 
-        &.k-state-selected,
-        &.k-selected,
-        &.k-state-selected:hover,
         &.k-selected,
         &.k-selected:hover {
             @include box-shadow( $colorpalette-tile-selected-shadow );
@@ -18407,7 +18316,7 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
             }
 
             // Needed for the double check icons
-            .k-i-check + .k-i-check {
+            .k-icon + .k-icon {
                 margin-left: -13px;
             }
         }
@@ -18450,7 +18359,6 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
     }
 
     .k-colorgradient:focus,
-    .k-colorgradient.k-state-focus,
     .k-colorgradient.k-focus {
         @include fill( $border: $colorgradient-focus-border );
         @include box-shadow( $colorgradient-focus-shadow );
@@ -18471,16 +18379,15 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
         @include box-shadow( $colorgradient-draghandle-shadow );
 
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             @include fill( $bg: transparent, $border: $white );
             @include box-shadow( $colorgradient-draghandle-focus-shadow );
         }
 
-        &:active,
         &:hover,
-        &.k-state-hover,
-        &.k-hover {
+        &.k-hover,
+        &.k-active,
+        &:active {
             @include fill( $bg: transparent, $border: $white );
             @include box-shadow( $colorgradient-draghandle-hover-shadow );
         }
@@ -18670,7 +18577,6 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
     }
 
     .k-coloreditor:focus,
-    .k-coloreditor.k-state-focus,
     .k-coloreditor.k-focus {
         @include fill( $border: $coloreditor-focus-border );
         @include box-shadow( $coloreditor-focus-shadow );
@@ -19890,7 +19796,7 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
             box-sizing: border-box;
         }
 
-        &.k-state-readonly {
+        &.k-readonly {
             pointer-events: none;
         }
     }
@@ -19967,7 +19873,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
         color: $component-text;
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
 
             .k-rating-item {
@@ -19975,7 +19880,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
                     text-shadow: $rating-icon-focused-shadow;
                 }
 
-                &.k-state-selected > .k-icon,
                 &.k-selected > .k-icon {
                     text-shadow: $rating-icon-focused-selected-shadow;
                 }
@@ -19986,19 +19890,16 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
     .k-rating-item {
         color: $rating-icon-text;
 
-        &.k-state-selected,
         &.k-selected {
             color: $rating-icon-selected-text;
 
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 color: $rating-icon-focused-text;
             }
         }
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             color: $rating-icon-hover-text;
             cursor: pointer;
@@ -20006,7 +19907,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
     }
 }
 
-
 // #endregion
 
 // #endregion
@@ -21209,7 +21109,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
             z-index: 1;
         }
         input[disabled],
-        input.k-state-disabled,
         input.k-disabled {
             visibility: hidden;
         }
@@ -21254,12 +21153,10 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
         .k-file {
 
-            &.k-state-focused,
             &.k-focus {
                 box-shadow: inset $upload-focused-shadow;
             }
 
-            .k-upload-action.k-state-focused,
             .k-upload-action.k-focus {
                 box-shadow: $upload-focused-shadow;
             }
@@ -21351,7 +21248,6 @@ $upload-focused-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
         }
 
         // Invalid,
-        &.k-state-invalid,
         &.k-invalid,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
@@ -22368,7 +22264,6 @@ $actionsheet-item-disabled-shadow: null !default;
 
         // Hover state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $actionsheet-item-hover-text,
@@ -22382,7 +22277,6 @@ $actionsheet-item-disabled-shadow: null !default;
 
         // Focus state
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             @include fill(
                 $actionsheet-item-focus-text,
@@ -22396,7 +22290,6 @@ $actionsheet-item-disabled-shadow: null !default;
 
         // Disabed state
         &:disabled,
-        &.k-state-disabled,
         &.k-disabled {
             @include fill(
                 $actionsheet-item-disabled-text,
@@ -22635,7 +22528,6 @@ $actionsheet-item-disabled-shadow: null !default;
 
     .k-window {
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include box-shadow( $window-focused-shadow );
         }
@@ -23108,33 +23000,28 @@ $drawer-selected-hover-text: $selected-hover-text !default;
     .k-drawer-item {
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             color: $drawer-hovered-text;
             background-color: $drawer-hovered-bg;
         }
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             background-color: $drawer-focused-bg;
             box-shadow: $drawer-focused-shadow;
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 color: $drawer-hovered-text;
                 background-color: $drawer-hovered-bg;
             }
         }
 
-        &.k-state-selected,
         &.k-selected {
             color: $drawer-selected-text;
             background-color: $drawer-selected-bg;
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 color: $drawer-selected-hover-text;
                 background-color: $drawer-selected-hover-bg;
@@ -23262,7 +23149,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
             flex: none;
         }
 
-        > .k-i-close {
+        > .k-i-close,
+        > .k-i-x {
             margin-right: 0;
             margin-left: $notification-icon-spacing;
             flex: none;
@@ -23285,7 +23173,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
                 margin-left: $notification-icon-spacing;
             }
 
-            > .k-i-close {
+            > .k-i-close,
+            > .k-i-x {
                 margin-left: 0;
                 margin-right: $notification-icon-spacing;
             }
@@ -23307,7 +23196,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
         );
     }
     .k-notification-wrap {
-        > .k-i-close {
+        > .k-i-close,
+        > .k-i-x {
             color: inherit;
         }
     }
@@ -23441,16 +23331,6 @@ $card-deck-scroll-button-offset: -$kendo-button-border-width !default;
 $card-callout-width: 20px !default;
 $card-callout-height: 20px !default;
 
-$card-callout-box-shadow-n: null !default;
-$card-callout-box-shadow-e: null !default;
-$card-callout-box-shadow-s: null !default;
-$card-callout-box-shadow-w: null !default;
-
-$card-focus-callout-box-shadow-n: 1px -1px 4px 0 rgba( black, .06) !default;
-$card-focus-callout-box-shadow-e: 2px -1px 4px 0 rgba( black, .06) !default;
-$card-focus-callout-box-shadow-s: 2px -2px 4px 0 rgba( black, .06) !default;
-$card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
-
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/card/_layout.scss
 @include exports("card/layout") {
@@ -23494,6 +23374,7 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
         display: flex;
         flex-direction: inherit;
         overflow: hidden;
+        position: relative;
     }
 
 
@@ -23784,7 +23665,7 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
         margin: 0;
         width: $card-callout-width;
         height: $card-callout-height;
-        border-width: $card-border-width $card-border-width 0 0;
+        border-width: $card-border-width;
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
@@ -23793,22 +23674,22 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
     .k-card-callout.k-callout-n {
         top: 0;
         left: 50%;
-        transform: translate(-50%, -50%) rotate(-45deg);
+        transform: translate(-50%, -50%) rotate(45deg);
     }
     .k-card-callout.k-callout-e {
         top: 50%;
         right: 0;
-        transform: translate(50%, -50%) rotate(135deg) scaleX(-1);
+        transform: translate(50%, -50%) rotate(-45deg);
     }
     .k-card-callout.k-callout-s {
         bottom: 0;
         left: 50%;
-        transform: translate(-50%, 50%) rotate(135deg);
+        transform: translate(-50%, 50%) rotate(45deg);
     }
     .k-card-callout.k-callout-w {
         top: 50%;
         left: 0;
-        transform: translate(-50%, -50%) rotate(-135deg);
+        transform: translate(-50%, -50%) rotate(45deg);
     }
 
 }
@@ -23862,9 +23743,13 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
         );
         @include box-shadow( $card-shadow );
 
+        .k-card-inner {
+            background-color: inherit;
+            border-color: inherit;
+        }
+
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include fill(
                 $card-focus-text,
                 $card-focus-bg,
@@ -23873,8 +23758,7 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
             @include box-shadow( $card-focus-shadow );
         }
 
-        &.k-selected,
-        &.k-state-selected {
+        &.k-selected {
             @include box-shadow( $card-focus-shadow );
         }
     }
@@ -23926,10 +23810,8 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
 
 
     .k-card-wrap {
-        &.k-state-focused,
-        &.k-focus,
         &:focus,
-        &.k-state-selected,
+        &.k-focus,
         &.k-selected {
             > .k-card {
                 @include box-shadow( $card-focus-shadow );
@@ -23941,28 +23823,11 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
     // Card callout
     .k-card-callout {
         @include fill(
-            $bg: $card-bg,
-            $border: $card-border
+            $bg: inherit,
+            $border: inherit
         );
-    }
-
-    .k-card-callout.k-callout-n { @include box-shadow( $card-callout-box-shadow-n ); }
-    .k-card-callout.k-callout-e { @include box-shadow( $card-callout-box-shadow-e ); }
-    .k-card-callout.k-callout-s { @include box-shadow( $card-callout-box-shadow-s ); }
-    .k-card-callout.k-callout-w { @include box-shadow( $card-callout-box-shadow-w ); }
 
-    .k-card:focus .k-card-callout,
-    .k-card.k-focus .k-card-callout,
-    .k-card.k-state-focus .k-card-callout {
-        @include fill(
-            $bg: $card-focus-bg,
-            $border: $card-focus-border
-        );
-
-        &.k-callout-n { @include box-shadow( $card-focus-callout-box-shadow-n ); }
-        &.k-callout-e { @include box-shadow( $card-focus-callout-box-shadow-e ); }
-        &.k-callout-s { @include box-shadow( $card-focus-callout-box-shadow-s ); }
-        &.k-callout-w { @include box-shadow( $card-focus-callout-box-shadow-w ); }
+        @include box-shadow( inherit );
     }
 
 }
@@ -24009,11 +23874,6 @@ $popover-callout-border-style: $popover-border-style !default;
 $popover-callout-bg: $popover-bg !default;
 $popover-callout-border: $popover-border !default;
 
-$popover-callout-shadow-n: null !default;
-$popover-callout-shadow-e: rgba( black, .03 ) 2px -1px 4px 0px !default;
-$popover-callout-shadow-s: rgba( black, .06 ) 2px -2px 4px 0px !default;
-$popover-callout-shadow-w: rgba( black, .03 ) 2px -1px 4px 0px !default;
-
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/popover/_layout.scss
 @include exports("popover/layout") {
@@ -24042,6 +23902,11 @@ $popover-callout-shadow-w: rgba( black, .03 ) 2px -1px 4px 0px !default;
         }
     }
 
+    .k-popover-inner {
+        position: relative;
+        border-radius: inherit;
+    }
+
     // Header
     .k-popover-header {
         @include border-top-radius( $popover-border-radius );
@@ -24068,32 +23933,32 @@ $popover-callout-shadow-w: rgba( black, .03 ) 2px -1px 4px 0px !default;
         margin: 0;
         width: $popover-callout-width;
         height: $popover-callout-height;
-        border-width: $popover-callout-border-width $popover-callout-border-width 0 0;
+        border-width: $popover-callout-border-width;
         border-style: $popover-callout-border-style;
         position: absolute;
 
         &.k-callout-n {
             top: 0;
             left: 50%;
-            transform: translate(-50%, -50%) rotate(-45deg);
+            transform: translate(-50%, -50%) rotate(45deg);
         }
 
         &.k-callout-e {
             top: 50%;
             right: 0;
-            transform: translate(50%, -50%) rotate(135deg) scaleX(-1);
+            transform: translate(50%, -50%) rotate(-45deg);
         }
 
         &.k-callout-s {
             bottom: 0;
             left: 50%;
-            transform: translate(-50%, 50%) rotate(135deg);
+            transform: translate(-50%, 50%) rotate(45deg);
         }
 
         &.k-callout-w {
             top: 50%;
             left: 0;
-            transform: translate(-50%, -50%) rotate(-135deg);
+            transform: translate(-50%, -50%) rotate(45deg);
         }
     }
 
@@ -24114,6 +23979,11 @@ $popover-callout-shadow-w: rgba( black, .03 ) 2px -1px 4px 0px !default;
         );
     }
 
+    .k-popover-inner {
+        background-color: inherit;
+        border-color: inherit;
+    }
+
     // Header
     .k-popover-header {
         @include fill(
@@ -24126,14 +23996,11 @@ $popover-callout-shadow-w: rgba( black, .03 ) 2px -1px 4px 0px !default;
     // Callout
     .k-popover-callout {
         @include fill(
-            $bg: $popover-callout-bg,
-            $border: $popover-callout-border
+            $bg: inherit,
+            $border: inherit
         );
 
-        &.k-callout-n { @include box-shadow( $popover-callout-shadow-n ); }
-        &.k-callout-e { @include box-shadow( $popover-callout-shadow-e ); }
-        &.k-callout-s { @include box-shadow( $popover-callout-shadow-s ); }
-        &.k-callout-w { @include box-shadow( $popover-callout-shadow-w ); }
+        @include box-shadow( inherit )
     }
 
 }
@@ -24368,7 +24235,6 @@ $bottom-nav-flat-border: $component-border !default;
             outline: 0;
         }
     }
-    .k-bottom-nav-item.k-state-disabled,
     .k-bottom-nav-item.k-disabled {
         background-color: initial;
     }
@@ -24412,15 +24278,11 @@ $bottom-nav-flat-border: $component-border !default;
                 $bg: $color
             );
 
-            .k-bottom-nav-item.k-state-focus,
-            .k-bottom-nav-item.k-focus,
-            .k-bottom-nav-item.k-state-focused,
             .k-bottom-nav-item.k-focus,
             .k-bottom-nav-item:focus {
                 @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
             }
 
-            .k-bottom-nav-item.k-state-selected,
             .k-bottom-nav-item.k-selected {
                 @include fill( $color: contrast-wcag( $color ) );
             }
@@ -24435,16 +24297,12 @@ $bottom-nav-flat-border: $component-border !default;
             $bottom-nav-flat-border
         );
 
-        .k-bottom-nav-item.k-state-focus,
-        .k-bottom-nav-item.k-focus,
-        .k-bottom-nav-item.k-state-focused,
         .k-bottom-nav-item.k-focus,
         .k-bottom-nav-item:focus {
             @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
         }
 
         @each $name, $color in $kendo-theme-colors {
-            &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected,
             &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
                 @if $name == "secondary" or $name == "light" {
                     @include fill( $color: try-shade($color, 3) );
@@ -24699,7 +24557,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         );
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include box-shadow( $breadcrumb-focused-shadow );
         }
@@ -24716,7 +24573,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 
         // Hovered state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $breadcrumb-link-hovered-text,
@@ -24727,7 +24583,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 
         // Focused state
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include fill(
                 $breadcrumb-link-focused-text,
@@ -24749,7 +24604,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 
         // Hovered state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $breadcrumb-root-link-hovered-text,
@@ -24760,7 +24614,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 
         // Focused state
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include fill(
                 $breadcrumb-root-link-focused-text,
@@ -24907,7 +24760,6 @@ $pager-dropdown-width: 5em !default;
 
             // Focused state
             &:focus,
-            &.k-state-focus,
             &.k-focus {
                 z-index: 3;
             }
@@ -24916,6 +24768,10 @@ $pager-dropdown-width: 5em !default;
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
+            .k-i-caret-alt-to-left,
+            .k-i-caret-alt-to-right,
+            .k-i-caret-alt-left,
+            .k-i-caret-alt-right,
             .k-i-arrow-end-left,
             .k-i-arrow-60-left,
             .k-i-arrow-60-right,
@@ -24957,7 +24813,6 @@ $pager-dropdown-width: 5em !default;
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled,
         &.k-disabled {
             color: inherit;
         }
@@ -25007,7 +24862,6 @@ $pager-dropdown-width: 5em !default;
         }
 
         // Selected state
-        .k-state-selected,
         .k-selected {
             cursor: inherit;
             z-index: 2;
@@ -25152,9 +25006,6 @@ $pager-dropdown-width: 5em !default;
         );
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus,
-        &.k-state-focused,
         &.k-focus {
             @include fill( $bg: $pager-focus-bg );
             @include box-shadow( $pager-focus-shadow );
@@ -25170,7 +25021,6 @@ $pager-dropdown-width: 5em !default;
         );
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $pager-item-hover-text,
@@ -25179,7 +25029,6 @@ $pager-dropdown-width: 5em !default;
             );
         }
 
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $pager-item-selected-text,
@@ -25189,7 +25038,6 @@ $pager-dropdown-width: 5em !default;
         }
 
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             background-color: $pager-item-focus-bg;
             @include box-shadow( $pager-item-focus-shadow );
@@ -25213,7 +25061,6 @@ $pager-dropdown-width: 5em !default;
             );
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $pager-number-hover-text,
@@ -25223,13 +25070,11 @@ $pager-dropdown-width: 5em !default;
             }
 
             &:focus,
-            &.k-state-focus,
             &.k-focus {
                 background-color: $pager-number-focus-bg;
                 @include box-shadow( $pager-number-focus-shadow );
             }
 
-            &.k-state-selected,
             &.k-selected {
                 @include fill(
                     $pager-number-selected-text,
@@ -25262,7 +25107,6 @@ $pager-dropdown-width: 5em !default;
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
@@ -25272,7 +25116,7 @@ $pager-dropdown-width: 5em !default;
                 }
             }
 
-            &.k-state-expanded {
+            &.k-expanded {
                 @include fill(
                     $popup-text,
                     $popup-bg,
@@ -25283,7 +25127,6 @@ $pager-dropdown-width: 5em !default;
                 .k-link {
 
                     &:hover,
-                    &.k-state-hover,
                     &.k-hover {
                         @include fill(
                             $kendo-list-item-hover-text,
@@ -25291,7 +25134,6 @@ $pager-dropdown-width: 5em !default;
                         );
                     }
 
-                    &.k-state-selected,
                     &.k-selected {
                         @include fill(
                             $kendo-list-item-selected-text,
@@ -25888,7 +25730,6 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
                 $bg: $stepper-progressbar-bg
             );
 
-            .k-state-selected,
             .k-selected {
                 @include fill(
                     $color: $stepper-progressbar-fill-text,
@@ -26136,13 +25977,11 @@ $tabstrip-content-border-focused: $component-text !default;
         position: relative;
         z-index: 1;
 
-        &.k-state-active,
         &.k-active {
             display: block;
         }
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             outline-width: 1px;
             outline-style: dotted;
@@ -26231,7 +26070,6 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-left: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active,
             .k-item.k-active {
                 border-bottom-color: transparent;
             }
@@ -26261,7 +26099,6 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-left: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active,
             .k-item.k-active {
                 border-top-color: transparent;
             }
@@ -26295,7 +26132,6 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-top: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active,
             .k-item.k-active {
                 border-right-color: transparent;
             }
@@ -26331,7 +26167,6 @@ $tabstrip-content-border-focused: $component-text !default;
                 margin-top: $tabstrip-item-gap;
             }
 
-            .k-item.k-state-active,
             .k-item.k-active {
                 border-left-color: transparent;
             }
@@ -26377,7 +26212,6 @@ $tabstrip-content-border-focused: $component-text !default;
                     border-left-width: $tabstrip-indicator-size;
                 }
             }
-            .k-item.k-state-active::after,
             .k-item.k-active::after {
                 display: block;
             }
@@ -26448,7 +26282,6 @@ $tabstrip-content-border-focused: $component-text !default;
             );
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $tabstrip-item-hovered-text,
@@ -26459,9 +26292,7 @@ $tabstrip-content-border-focused: $component-text !default;
             }
 
             &:active,
-            &.k-state-active,
             &.k-active,
-            &.k-state-selected,
             &.k-selected {
                 @include fill(
                     $tabstrip-item-selected-text,
@@ -26472,7 +26303,6 @@ $tabstrip-content-border-focused: $component-text !default;
             }
 
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
@@ -26495,7 +26325,6 @@ $tabstrip-content-border-focused: $component-text !default;
         );
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
@@ -26506,7 +26335,6 @@ $tabstrip-content-border-focused: $component-text !default;
     @if ($tabstrip-indicator-size) {
 
         .k-tabstrip-items-wrapper {
-            .k-item.k-state-active::after,
             .k-item.k-active::after {
                 border-color: $tabstrip-indicator-color;
             }
@@ -26597,7 +26425,6 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
             justify-content: space-between;
 
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 outline-width: 1px;
                 outline-style: dotted;
@@ -26689,20 +26516,20 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 // #endregion
 // #region @import "_theme.scss"; -> packages/default/scss/wizard/_theme.scss
 @include exports("wizard/theme") {
+
     .k-wizard-step {
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             outline-color: $wizard-step-border-focused;
         }
 
         .k-ie &:focus,
-        .k-ie &.k-state-focused,
         .k-ie &.k-focus {
             @include box-shadow($wizard-focused-shadow);
             outline: none;
         }
     }
+
 }
 
 // #endregion
@@ -26862,7 +26689,6 @@ $expander-content-padding-y: $padding-y * 4 !default;
             $expander-border
         );
 
-        &.k-state-focus,
         &.k-focus {
             box-shadow: $expander-focus-shadow;
         }
@@ -26877,13 +26703,10 @@ $expander-content-padding-y: $padding-y * 4 !default;
         outline: none;
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             background-color: $expander-header-hover-bg;
         }
 
-        // Should be removed
-        &.k-state-focused,
         &.k-focus {
             background-color: $expander-header-focused-bg;
             box-shadow: $expander-header-focused-shadow;
@@ -27126,6 +26949,10 @@ $panelbar-header-expanded-gradient: null !default;
             }
         }
 
+        // Panelbar item
+        .k-panelbar-item {
+            outline-style: none;
+        }
 
         // Panelbar content
         .k-panelbar-content {
@@ -27224,7 +27051,6 @@ $panelbar-header-expanded-gradient: null !default;
         > .k-item,
         > .k-panelbar-header {
 
-            &.k-state-expanded.k-level-0 > .k-link,
             &.k-expanded.k-level-0 > .k-link  {
                 @include fill(
                     $panelbar-header-expanded-text,
@@ -27251,7 +27077,6 @@ $panelbar-header-expanded-gradient: null !default;
 
             // Hover
             > .k-link:hover,
-            > .k-link.k-state-hover,
             > .k-link.k-hover {
                 @include fill(
                     $panelbar-header-hovered-text,
@@ -27263,9 +27088,6 @@ $panelbar-header-expanded-gradient: null !default;
 
             // Focus
             > .k-link:focus,
-            > .k-link.k-state-focus,
-            > .k-link.k-focus,
-            > .k-link.k-state-focused,
             > .k-link.k-focus {
                 @include fill(
                     $panelbar-header-focused-text,
@@ -27278,7 +27100,6 @@ $panelbar-header-expanded-gradient: null !default;
 
             // Focus & Hover
             > .k-link:focus:hover,
-            > .k-link.k-state-focus.k-state-hover,
             > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-header-hovered-focused-text,
@@ -27289,7 +27110,6 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected
-            > .k-link.k-state-selected,
             > .k-link.k-selected {
                 @include fill(
                     $panelbar-header-selected-text,
@@ -27305,9 +27125,7 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected Hover
-            > .k-link.k-state-selected:hover,
             > .k-link.k-selected:hover,
-            > .k-link.k-state-selected.k-state-hover,
             > .k-link.k-selected.k-hover {
                 @include fill(
                     $panelbar-header-selected-hovered-text,
@@ -27318,12 +27136,8 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected Focus
-            > .k-link.k-state-selected:focus,
             > .k-link.k-selected:focus,
-            > .k-link.k-state-selected.k-state-focus,
-            > .k-link.k-selected.k-focus,
-            > .k-link.k-state-selected.k-state-focused,
-            > .k-link.k-selected.k-focused {
+            > .k-link.k-selected.k-focus {
                 @include fill(
                     $panelbar-header-selected-focused-text,
                     $panelbar-header-selected-focused-bg,
@@ -27333,12 +27147,8 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected Focus & Hover
-            > .k-link.k-state-selected:hover:focus,
             > .k-link.k-selected:hover:focus,
-            > .k-link.k-state-selected.k-state-hover.k-state-focus,
-            > .k-link.k-selected.k-hover.k-state-focus,
-            > .k-link.k-state-selected.k-state-hover.k-state-focused,
-            > .k-link.k-selected.k-hover.k-state-focused {
+            > .k-link.k-selected.k-hover.k-focus {
                 @include fill(
                     $panelbar-header-selected-hovered-focused-text,
                     $panelbar-header-selected-hovered-focused-bg,
@@ -27355,10 +27165,8 @@ $panelbar-header-expanded-gradient: null !default;
 
             // Hover
             > .k-item > .k-link:hover,
-            > .k-item > .k-link.k-state-hover,
             > .k-item > .k-link.k-hover,
             > .k-panelbar-item > .k-link:hover,
-            > .k-panelbar-item > .k-link.k-state-hover,
             > .k-panelbar-item > .k-link.k-hover {
                 @include fill(
                     $panelbar-item-hovered-text,
@@ -27370,14 +27178,8 @@ $panelbar-header-expanded-gradient: null !default;
 
             // Focus
             > .k-item > .k-link:focus,
-            > .k-item > .k-link.k-state-focus,
-            > .k-item > .k-link.k-focus,
-            > .k-item > .k-link.k-state-focused,
             > .k-item > .k-link.k-focus,
             > .k-panelbar-item > .k-link:focus,
-            > .k-panelbar-item > .k-link.k-state-focus,
-            > .k-panelbar-item > .k-link.k-focus,
-            > .k-panelbar-item > .k-link.k-state-focused,
             > .k-panelbar-item > .k-link.k-focus {
                 @include fill(
                     $panelbar-item-focused-text,
@@ -27390,10 +27192,8 @@ $panelbar-header-expanded-gradient: null !default;
 
             // Focus & Hover
             > .k-item > .k-link:focus:hover,
-            > .k-item > .k-link.k-state-focus.k-state-hover,
             > .k-item > .k-link.k-focus.k-hover,
             > .k-panelbar-item > .k-link:focus:hover,
-            > .k-panelbar-item > .k-link.k-state-focus.k-state-hover,
             > .k-panelbar-item > .k-link.k-focus.k-hover {
                 @include fill(
                     $panelbar-item-hovered-focused-text,
@@ -27404,9 +27204,7 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected
-            > .k-item > .k-link.k-state-selected,
             > .k-item > .k-link.k-selected,
-            > .k-panelbar-item > .k-link.k-state-selected,
             > .k-panelbar-item > .k-link.k-selected {
                 @include fill(
                     $panelbar-item-selected-text,
@@ -27417,13 +27215,9 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected Hover
-            > .k-item > .k-link.k-state-selected:hover,
             > .k-item > .k-link.k-selected:hover,
-            > .k-item > .k-link.k-state-selected.k-state-hover,
             > .k-item > .k-link.k-selected.k-hover,
-            > .k-panelbar-item > .k-link.k-state-selected:hover,
             > .k-panelbar-item > .k-link.k-selected:hover,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-hover,
             > .k-panelbar-item > .k-link.k-selected.k-hover {
                 @include fill(
                     $panelbar-item-selected-hovered-text,
@@ -27434,18 +27228,10 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected Focus
-            > .k-item > .k-link.k-state-selected:focus,
             > .k-item > .k-link.k-selected:focus,
-            > .k-item > .k-link.k-state-selected.k-state-focus,
             > .k-item > .k-link.k-selected.k-focus,
-            > .k-item > .k-link.k-state-selected.k-state-focused,
-            > .k-item > .k-link.k-selected.k-focused,
-            > .k-panelbar-item > .k-link.k-state-selected:focus,
             > .k-panelbar-item > .k-link.k-selected:focus,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-focus,
-            > .k-panelbar-item > .k-link.k-selected.k-focus,
-            > .k-item > .k-link.k-state-selected.k-state-focused,
-            > .k-item > .k-link.k-selected.k-focused {
+            > .k-panelbar-item > .k-link.k-selected.k-focus {
                 @include fill(
                     $panelbar-item-selected-focused-text,
                     $panelbar-item-selected-focused-bg,
@@ -27455,18 +27241,10 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected Focus & Hover
-            > .k-item > .k-link.k-state-selected:focus:hover,
             > .k-item > .k-link.k-selected:focus:hover,
-            > .k-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
-            > .k-item > .k-link.k-selected.k-focus.k-state-hover,
-            > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
-            > .k-item > .k-link.k-selected.k-focused.k-state-hover,
-            > .k-panelbar-item > .k-link.k-state-selected:focus:hover,
+            > .k-item > .k-link.k-selected.k-focus.k-hover,
             > .k-panelbar-item > .k-link.k-selected:focus:hover,
-            > .k-panelbar-item > .k-link.k-state-selected.k-state-focus.k-state-hover,
-            > .k-panelbar-item > .k-link.k-selected.k-focus.k-state-hover,
-            > .k-item > .k-link.k-state-selected.k-state-focused.k-state-hover,
-            > .k-item > .k-link.k-selected.k-focused.k-state-hover {
+            > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
                 @include fill(
                     $panelbar-item-selected-hovered-focused-text,
                     $panelbar-item-selected-hovered-focused-bg,
@@ -27701,7 +27479,7 @@ $splitbar-selected-text: $selected-text !default;
 
         .k-pane,
         .k-pane-flex {
-            &.k-state-hidden,
+            &.k-hidden,
             &[hidden] {
                 // sass-lint:disable-block no-important
                 // hidden panes need to be zero-width to allow pane animation
@@ -27747,7 +27525,6 @@ $splitbar-selected-text: $selected-text !default;
         background-color: $splitbar-bg;
     }
     .k-splitbar:hover,
-    .k-splitbar.k-state-hover,
     .k-splitbar.k-hover,
     .k-splitbar-horizontal-hover,
     .k-splitbar-vertical-hover {
@@ -27755,9 +27532,6 @@ $splitbar-selected-text: $selected-text !default;
         background-color: $splitbar-hover-bg;
     }
     .k-splitbar:focus,
-    .k-splitbar.k-state-focus,
-    .k-splitbar.k-focus,
-    .k-splitbar.k-state-focused,
     .k-splitbar.k-focus {
         color: $splitbar-selected-text;
         background: $splitbar-selected-bg;
@@ -27862,9 +27636,6 @@ $tilelayout-hint-border: $component-border !default;
     }
 
     .k-tilelayout-item:focus,
-    .k-tilelayout-item.k-focus,
-    .k-tilelayout-item.k-state-focus,
-    .k-tilelayout-item.k-state-focused,
     .k-tilelayout-item.k-focus {
         @include box-shadow($tilelayout-card-focus-shadow);
     }
@@ -28277,7 +28048,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 border-radius: 50%;
             }
 
-            .k-i-reload {
+            .k-i-reload,
+            .k-i-arrow-rotate-cw {
                 font-size: 1em;
                 margin-right: .5em;
             }
@@ -28537,12 +28309,10 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
         .k-column-menu {
 
-            .k-listgroup-item.k-state-selected,
             .k-listgroup-item.k-selected {
                 color: $adaptive-grid-sort-text;
                 background: none;
             }
-            .k-listgroup-item.k-state-selected .k-link,
             .k-listgroup-item.k-selected .k-link {
                 color: inherit;
             }
@@ -29285,7 +29055,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
         .k-cell-inner > .k-link > .k-icon {
             &.k-i-sort-desc-sm,
-            &.k-i-sort-asc-sm {
+            &.k-i-sort-asc-sm,
+            &.k-i-sort-asc-small,
+            &.k-i-sort-desc-small {
                 vertical-align: text-top;
                 margin-inline-start: $grid-sorted-icon-spacing;
             }
@@ -30161,33 +29933,28 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
 
         // Hover state
-        tbody>tr:not(.k-detail-row):hover,
-        tbody>tr:not(.k-detail-row).k-state-hover,
-        tbody>tr:not(.k-detail-row).k-hover {
+        tbody > tr:not(.k-detail-row):hover,
+        tbody > tr:not(.k-detail-row).k-hover {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
 
         // Selected state
-        td.k-state-selected,
         td.k-selected,
-        tr.k-state-selected > td,
         tr.k-selected > td {
             color: $grid-selected-text;
             background-color: $grid-selected-bg;
         }
 
         // Focused state
-        td.k-state-focused,
+        td:focus,
         td.k-focus,
-        th.k-state-focused,
-        th.k-focus,
         th:focus,
+        th.k-focus,
         .k-master-row > td:focus,
         .k-grouping-row > td:focus,
         .k-detail-row > td:focus,
         .k-group-footer > td:focus,
-        .k-grid-pager.k-state-focused,
         .k-grid-pager.k-focus {
             box-shadow: $grid-focused-shadow;
         }
@@ -30231,20 +29998,16 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
 
             // Selected state
-            .k-state-selected td,
             .k-selected td {
                 @include fill( $bg: $grid-sticky-selected-bg );
             }
 
-            .k-state-selected.k-alt td,
             .k-selected.k-alt td {
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
 
             // Selected hover
-            .k-state-selected:hover td,
             .k-selected:hover td,
-            .k-state-selected.k-state-hover td,
             .k-selected.k-hover td {
                 @include fill( $bg: $grid-sticky-selected-hovered-bg );
             }
@@ -30273,6 +30036,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
         .k-i-sort-asc-sm,
         .k-i-sort-desc-sm,
+        .k-i-sort-asc-small,
+        .k-i-sort-desc-small,
         .k-sort-order {
             color: $grid-sorting-indicator-text;
         }
@@ -30286,12 +30051,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 background-color: $kendo-button-hover-bg;
             }
             &:focus,
-            &.k-state-focus,
-            &.k-focus,
-            &.k-state-border-down {
+            &.k-focus {
                 box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .1 );
             }
-            &.k-state-active,
             &.k-active {
                 color: $selected-text;
                 background-color: $selected-bg;
@@ -30347,20 +30109,14 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
 
         // Selected state
-        &.k-state-selected .k-grid-content-sticky,
         &.k-selected .k-grid-content-sticky,
-        &.k-state-selected .k-grid-row-sticky,
         &.k-selected .k-grid-row-sticky,
-        td.k-grid-content-sticky.k-state-selected,
         td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
 
-        &.k-state-selected.k-alt .k-grid-content-sticky,
         &.k-selected.k-alt .k-grid-content-sticky,
-        &.k-state-selected.k-alt .k-grid-row-sticky,
         &.k-selected.k-alt .k-grid-row-sticky,
-        &.k-alt td.k-grid-content-sticky.k-state-selected,
         &.k-alt td.k-grid-content-sticky.k-selected {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
@@ -30369,26 +30125,18 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         // Hovered state
         &:hover .k-grid-content-sticky,
         &:hover .k-grid-row-sticky,
-        &.k-state-hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-row-sticky,
         &.k-hover .k-grid-row-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
 
 
         // Selected hover
-        &.k-state-selected:hover .k-grid-content-sticky,
         &.k-selected:hover .k-grid-content-sticky,
-        &.k-state-selected:hover .k-grid-row-sticky,
         &.k-selected:hover .k-grid-row-sticky,
-        &.k-state-selected.k-state-hover .k-grid-content-sticky,
         &.k-selected.k-hover .k-grid-content-sticky,
-        &.k-state-selected.k-state-hover .k-grid-row-sticky,
         &.k-selected.k-hover .k-grid-row-sticky,
-        &:hover td.k-grid-content-sticky.k-state-selected,
         &:hover td.k-grid-content-sticky.k-selected,
-        &.k-state-hover td.k-grid-content-sticky.k-state-selected,
         &.k-hover td.k-grid-content-sticky.k-selected {
             background-color: $grid-sticky-selected-hovered-bg;
         }
@@ -30402,7 +30150,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             background-color: $grid-sticky-bg;
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -30416,7 +30163,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             }
 
             &:hover td,
-            &.k-state-hover td,
             &.k-hover td {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -30428,66 +30174,43 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
 
         // Selected state
-        tr.k-state-selected .k-grid-content-sticky,
         tr.k-selected .k-grid-content-sticky,
-        .k-state-selected.k-grid-row-sticky td,
         .k-selected.k-grid-row-sticky td,
-        .k-grid-row-sticky td.k-state-selected,
         .k-grid-row-sticky td.k-selected,
-        .k-state-selected.k-grid-content-sticky,
         .k-selected.k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-selected-bg );
         }
 
-        tr.k-state-selected.k-alt .k-grid-content-sticky,
         tr.k-selected.k-alt .k-grid-content-sticky,
-        .k-state-selected.k-alt.k-grid-row-sticky td,
         .k-selected.k-alt.k-grid-row-sticky td,
-        .k-alt .k-state-selected.k-grid-content-sticky,
         .k-alt .k-selected.k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-selected-alt-bg );
         }
 
         // Hover state
         tr:hover .k-grid-content-sticky,
-        tr.k-state-hover .k-grid-content-sticky,
         tr.k-hover .k-grid-content-sticky,
         .k-grid-row-sticky:hover td,
-        .k-grid-row-sticky.k-state-hover td,
         .k-grid-row-sticky.k-hover td,
         .k-grid-row-sticky.k-alt:hover td,
-        .k-grid-row-sticky.k-alt.k-state-hover td,
         .k-grid-row-sticky.k-alt.k-hover td,
         .k-alt:hover .k-grid-content-sticky,
-        .k-alt.k-state-hover .k-grid-content-sticky,
         .k-alt.k-hover .k-grid-content-sticky {
             background-color: $grid-sticky-hovered-bg;
         }
 
         // Selected + Hover
-        tr.k-state-selected:hover .k-grid-content-sticky,
         tr.k-selected:hover .k-grid-content-sticky,
-        tr.k-state-selected.k-state-hover .k-grid-content-sticky,
         tr.k-selected.k-hover .k-grid-content-sticky,
-        .k-state-selected.k-grid-row-sticky:hover td,
         .k-selected.k-grid-row-sticky:hover td,
-        .k-state-selected.k-grid-row-sticky.k-state-hover td,
         .k-selected.k-grid-row-sticky.k-hover td,
-        .k-state-selected.k-alt.k-grid-row-sticky:hover td,
         .k-selected.k-alt.k-grid-row-sticky:hover td,
-        .k-state-selected.k-alt.k-grid-row-sticky.k-state-hover td,
         .k-selected.k-alt.k-grid-row-sticky.k-hover td,
-        tr.k-state-selected.k-alt:hover .k-grid-content-sticky,
         tr.k-selected.k-alt:hover .k-grid-content-sticky,
-        tr.k-state-selected.k-alt.k-state-hover .k-grid-content-sticky,
         tr.k-selected.k-alt.k-hover .k-grid-content-sticky,
-        .k-grid-row-sticky:hover td.k-state-selected,
         .k-grid-row-sticky:hover td.k-selected,
-        .k-grid-row-sticky.k-state-hover td.k-state-selected,
         .k-grid-row-sticky.k-hover td.k-selected,
-        tr:hover .k-grid-content-sticky.k-state-selected,
         tr:hover .k-grid-content-sticky.k-selected,
-        tr.k-state-hover .k-grid-content-sticky.k-state-selected,
         tr.k-hover .k-grid-content-sticky.k-selected {
             background-color: $grid-sticky-selected-hovered-bg;
         }
@@ -30499,7 +30222,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
 
         &:hover .k-grid-content-sticky,
-        &.k-state-hover .k-grid-content-sticky,
         &.k-hover .k-grid-content-sticky {
             @include fill( $bg: $grid-sticky-hovered-bg );
         }
@@ -30513,13 +30235,11 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         );
     }
     .k-columnmenu-item:focus,
-    .k-columnmenu-item.k-state-focus,
     .k-columnmenu-item.k-focus {
         @include box-shadow( $kendo-list-item-focus-shadow );
     }
 
     .k-columnmenu-item {
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -30545,7 +30265,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
@@ -30553,7 +30272,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                     );
                 }
 
-                &.k-state-selected,
                 &.k-selected {
                     @include fill(
                         $kendo-list-item-selected-text,
@@ -30562,7 +30280,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 }
 
                 &:focus,
-                &.k-state-focused,
                 &.k-focus {
                     @include box-shadow( $kendo-list-item-focus-shadow );
                 }
@@ -30798,7 +30515,6 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
     // Listview content
     .k-listview-content {
 
-        > .k-state-focused,
         > .k-focus {
             @include fill(
                 $listview-item-focus-text,
@@ -30808,7 +30524,6 @@ $listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
             @include box-shadow( $listview-item-focus-shadow );
         }
 
-        > .k-state-selected,
         > .k-selected {
             @include fill(
                 $listview-item-selected-text,
@@ -31017,7 +30732,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         [data-tool="merge"],
         [data-tool="freeze"] {
             width: auto;
-            min-width: $form-line-height * 1em;
+            min-width: calc( #{$form-line-height} * 1em );
         }
 
         .k-color-picker {
@@ -31186,7 +30901,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         overflow: hidden;
 
         // disabled cells in the Spreadsheet should allow navigation if link is used
-        .k-state-disabled,
         .k-disabled {
             pointer-events: auto;
         }
@@ -31748,7 +31462,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             background-position: 50% 50%;
 
             &:hover div,
-            &.k-state-hovered div,
             &.k-hover div {
                 margin: 0;
                 align-self: center;
@@ -31814,7 +31527,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         .k-spreadsheet-insert-image-dialog {
             .k-spreadsheet-has-image {
                 &:hover,
-                &.k-state-hovered,
                 &.k-hover {
                     border-radius: $spreadsheet-insert-image-dialog-preview-overlay-border-radius;
                 }
@@ -31991,7 +31703,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             );
         }
 
-        &.k-state-active,
         &.k-active {
             @include fill(
                 $kendo-button-active-text,
@@ -32009,7 +31720,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         > .k-menu,
         > .k-menu:not(.k-context-menu) {
 
-            .k-item.k-state-hover,
+            .k-item:hover,
             .k-item.k-hover {
                 @include fill(
                     $kendo-list-item-hover-text,
@@ -32040,7 +31751,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         .k-button {}
 
         .k-button:hover,
-        .k-button.k-state-hover,
         .k-button.k-hover {
             @include fill(
                 $kendo-list-item-hover-text,
@@ -32048,9 +31758,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             );
         }
         .k-button:active,
-        .k-button.k-state-active,
         .k-button.k-active,
-        .k-button.k-state-selected,
         .k-button.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -32072,13 +31780,11 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
 
         .k-spreadsheet-has-image {
             &:hover,
-            &.k-state-hovered,
             &.k-hover {
                 box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
             }
 
             &:hover div,
-            &.k-state-hovered div,
             &.k-hover div {
                 color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
             }
@@ -33032,15 +32738,12 @@ $pivotgrid-remove-text: null !default;
 
 
     // Hover state
-    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-state-hover,
-    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
     .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover,
-    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-state-hover,
-    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
+    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
     .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-state-hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover,
-    .k-pivotgrid-values tbody > .k-pivotgrid-row:hover {
+    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
+    .k-pivotgrid-values tbody > .k-pivotgrid-row:hover,
+    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover {
         @include fill (
             $pivotgrid-hover-text,
             $pivotgrid-hover-bg,
@@ -33049,9 +32752,10 @@ $pivotgrid-remove-text: null !default;
     }
 
     // Focus state
-    .k-pivotgrid-cell.k-state-focus,
-    .k-pivotgrid-cell.k-focus,
     .k-pivotgrid-cell:focus,
+    .k-pivotgrid-cell.k-focus,
+    .k-pivotgrid-empty-cell:focus,
+    .k-pivotgrid-empty-cell.k-focus,
     .k-master-row > .k-pivotgrid-cell:focus,
     .k-grouping-row > .k-pivotgrid-cell:focus,
     .k-detail-row > .k-pivotgrid-cell:focus,
@@ -33060,9 +32764,7 @@ $pivotgrid-remove-text: null !default;
     }
 
     // Selected state
-    .k-pivotgrid-cell.k-state-selected,
     .k-pivotgrid-cell.k-selected,
-    .k-pivotgrid-row.k-state-selected > .k-pivotgrid-cell,
     .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
         @include fill (
             $pivotgrid-selected-text,
@@ -33291,7 +32993,6 @@ $treelist-footer-row-border-width: 1px !default;
         }
 
         .k-treelist-dragging,
-        .k-treelist-dragging .k-state-hover,
         .k-treelist-dragging .k-hover {
             cursor: default;
         }
@@ -34007,7 +33708,6 @@ $filemanager-preview-icon-border: null !default;
                 );
             }
 
-            &.k-state-selected .k-file-icon,
             &.k-selected .k-file-icon {
                 @include fill(
                     inherit,
@@ -34374,10 +34074,8 @@ $taskboard-drag-placeholder-border: $component-border !default;
 
             &:focus,
             &.k-focus,
-            &.k-state-focus,
             &:hover,
-            &.k-hover,
-            &.k-state-hover {
+            &.k-hover {
                 text-decoration: underline;
             }
         }
@@ -34466,7 +34164,6 @@ $taskboard-drag-placeholder-border: $component-border !default;
         );
     }
     .k-taskboard-column:focus,
-    .k-taskboard-column.k-state-focus,
     .k-taskboard-column.k-focus {
         @include fill(
             $taskboard-column-focus-text,
@@ -34505,39 +34202,33 @@ $taskboard-drag-placeholder-border: $component-border !default;
             @include fill( $color: $taskboard-card-header-text );
 
             &:focus,
-            &.k-focus,
-            &.k-state-focus {
+            &.k-focus {
                 @include fill( $color: $taskboard-card-header-focus-text );
             }
 
             &:hover,
-            &.k-hover,
-            &.k-state-hover {
+            &.k-hover {
                 @include fill( $color: $taskboard-card-header-hover-text );
             }
         }
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include fill( $border: $taskboard-card-focus-border );
             @include box-shadow( $taskboard-card-focus-shadow );
         }
 
         &:hover,
-        &.k-hover,
-        &.k-state-hover {
+        &.k-hover {
             @include fill( $border: $taskboard-card-hover-border );
         }
 
-        &.k-selected,
-        &.k-state-selected {
+        &.k-selected {
             @include fill( $border: $taskboard-card-selected-border );
             @include box-shadow( $taskboard-card-selected-shadow );
         }
 
-        &.k-disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             @include disabled( $disabled-styling );
         }
     }
@@ -34666,7 +34357,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
                 pointer-events: auto;
             }
 
-            .k-editor-content.k-state-focused,
             .k-editor-content.k-focus {
                 outline-width: 1px;
                 outline-style: dashed;
@@ -34922,7 +34612,8 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
         border-bottom-color: inherit;
         cursor: se-resize;
 
-        .k-i-arrow-45-down-right {
+        .k-i-arrow-45-down-right,
+        .k-i-caret-br {
             display: none;
         }
     }
@@ -35120,7 +34811,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             display: block;
             margin: auto;
 
-            &.k-state-selected,
             &.k-selected {
                 color: inherit;
                 border-width: 0;
@@ -35340,7 +35030,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
 
     kendo-editor {
         &.k-readonly {
-            .k-editor-content.k-state-focused,
             .k-editor-content.k-focus {
                 outline-color: $body-text;
             }
@@ -35378,7 +35067,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
 
         // Hover & Actve state
         &:hover,
-        &.k-state-active,
+        &.k-active,
         &.k-active {
             border-color: $panel-border;
         }
@@ -35396,7 +35085,6 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
 
     // Insert table
     .k-ct-popup {
-        .k-state-selected,
         .k-selected {
             @include fill( $selected-text, $selected-bg, $selected-border, none );
         }
@@ -35900,7 +35588,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         }
 
         &.k-gantt-planned .k-grid-content tr {
-            height: calc( #{$line-height-em * 1.7} + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
+            height: calc( #{$line-height-em} * 1.7 + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
         }
 
         // Layout
@@ -35945,7 +35633,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                 }
             }
 
-            tr.k-state-selected > td:last-child,
             tr.k-selected > td:last-child {
                 background: transparent;
             }
@@ -36124,7 +35811,7 @@ $gantt-validation-tooltip-invalid-border: $error !default;
             padding: 0 !important; // sass-lint:disable-line no-important
         }
         .k-grid-header tr {
-            height: calc( #{$line-height-em * 2} + #{$grid-header-padding-y * 4} + 2px );
+            height: calc( #{$line-height-em} * 2 + #{$grid-header-padding-y * 4} + 2px );
             vertical-align: bottom;
         }
         .k-grid-content {
@@ -36215,7 +35902,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         border-color: currentColor;
         position: absolute;
     }
-    .k-gantt-line.k-state-selected,
     .k-gantt-line.k-selected {
         z-index: 3;
     }
@@ -36289,7 +35975,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         transform: translate(-50%, -50%);
     }
     .k-task-dot:hover::before,
-    .k-task-dot.k-state-hover::before,
     .k-task-dot.k-hover::before {
         border-width: 1px;
     }
@@ -36760,7 +36445,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                     $border: $gantt-milestone-border
                 );
             }
-            .k-task-milestone.k-state-selected .k-task-milestone-content,
             .k-task-milestone.k-selected .k-task-milestone-content {
                 @include fill(
                     $bg: $gantt-milestone-selected-bg,
@@ -36775,7 +36459,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                 stroke: $gantt-line-fill;
             }
 
-            polyline.k-state-selected,
             polyline.k-selected {
                 stroke: $gantt-line-selected-fill;
             }
@@ -36829,7 +36512,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
         );
     }
     .k-task-dot:hover::before,
-    .k-task-dot.k-state-hover::before,
     .k-task-dot.k-hover::before {
         @include fill(
             $bg: $gantt-dot-hover-bg,
@@ -36855,7 +36537,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
             );
         }
     }
-    .k-task-milestone.k-state-selected,
     .k-task-milestone.k-selected {
         background-image: none;
         @include fill(
@@ -36886,7 +36567,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
     .k-task-advanced .k-task-summary-complete {
         color: $gantt-advanced-bg;
     }
-    .k-task-summary.k-state-selected,
     .k-task-summary.k-selected {
         color: $gantt-summary-selected-bg;
 
@@ -36930,7 +36610,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
             $bg: $gantt-advanced-bg
         );
     }
-    .k-task-single.k-state-selected,
     .k-task-single.k-selected {
         @include fill(
             $gantt-task-selected-text,
@@ -36947,7 +36626,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
     .k-gantt-line {
         color: $gantt-line-fill;
     }
-    .k-gantt-line.k-state-selected,
     .k-gantt-line.k-selected {
         color: $gantt-line-selected-fill;
     }
@@ -37603,7 +37281,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             }
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 .k-event-delete {
                     opacity: 1;
@@ -37669,7 +37346,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
 
         // Hover
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             .k-event-actions .k-event-delete,
             .k-resize-handle {
@@ -37927,11 +37603,9 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             opacity: .5;
             visibility: hidden;
         }
-        .k-state-hover .k-task > .k-event-delete,
         .k-hover .k-task > .k-event-delete,
         .k-scheduler-content tr:hover .k-event-delete,
         .k-scheduler-content .k-scheduler-row:hover .k-event-delete,
-        .k-scheduler-content .k-scheduler-row.k-state-hover .k-event-delete,
         .k-scheduler-content .k-scheduler-row.k-hover .k-event-delete {
             visibility: visible;
         }
@@ -38005,7 +37679,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
                 position: relative;
             }
 
-            td.k-state-selected,
             td.k-selected {
                 background-color: inherit;
             }
@@ -38214,6 +37887,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
 
         .k-scheduler,
         &.k-scheduler {
+            .k-i-caret-alt-left,
+            .k-i-caret-alt-right,
             .k-i-arrow-60-left,
             .k-i-arrow-60-right,
             .k-current-time-arrow-right {
@@ -38350,9 +38025,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         );
     }
 
-    .k-scheduler-layout td.k-state-selected,
     .k-scheduler-layout td.k-selected,
-    .k-scheduler-layout .k-scheduler-cell.k-state-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
         background-color: rgba($selected-bg, .25);
     }
@@ -38375,7 +38048,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         );
         @include box-shadow( $scheduler-event-shadow );
 
-        &.k-state-hover,
+        &:hover,
         &.k-hover {
             @include fill(
                 $scheduler-event-hover-text,
@@ -38386,7 +38059,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             @include box-shadow( $scheduler-event-hover-shadow );
         }
 
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $scheduler-event-selected-text,
@@ -38453,10 +38125,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
 
         // Hover
         .k-scheduler-content tr:hover,
-        .k-scheduler-content tr.k-state-hover,
         .k-scheduler-content tr.k-hover,
         .k-scheduler-content .k-scheduler-row:hover,
-        .k-scheduler-content .k-scheduler-row.k-state-hover,
         .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
                 $hovered-text,
@@ -38468,9 +38138,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
 
         .k-scheduler-content tr:hover .k-scheduler-datecolumn,
         .k-scheduler-content tr:hover .k-scheduler-groupcolumn,
-        .k-scheduler-content tr.k-state-hover .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-hover .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-state-hover .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-hover .k-scheduler-groupcolumn {
             @include fill(
                 $scheduler-text,
@@ -38480,13 +38148,10 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
         }
 
         // Selected
-        .k-scheduler-content tr.k-state-selected,
         .k-scheduler-content tr.k-selected {
             background-color: rgba($selected-bg, .25);
         }
-        .k-scheduler-content tr.k-state-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
-        .k-scheduler-content tr.k-state-selected .k-scheduler-groupcolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {
             background-color: $scheduler-bg;
         }
@@ -38504,7 +38169,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             @include fill( $bg: $scheduler-yearview-indicator-bg );
         }
 
-        .k-state-selected .k-day-indicator,
         .k-selected .k-day-indicator {
             @include fill( $bg: $scheduler-yearview-indicator-selected-bg );
         }
@@ -38805,7 +38469,6 @@ $chat-quick-reply-hover-border: $primary !default;
 
 
         // Message states
-        .k-message.k-state-selected,
         .k-message.k-selected {
             margin-bottom: $chat-item-spacing-y;
             border: 0;
@@ -38934,7 +38597,6 @@ $chat-quick-reply-hover-border: $primary !default;
         align-items: center;
 
         &:focus,
-        &.k-state-focus,
         &.k-focus,
         &:focus-within {
             outline: 0;
@@ -39015,7 +38677,6 @@ $chat-quick-reply-hover-border: $primary !default;
             flex: 0 0 auto;
         }
 
-        &.k-state-selected,
         &.k-selected {
             background: none;
         }
@@ -39249,7 +38910,6 @@ $chat-quick-reply-hover-border: $primary !default;
         .k-bubble:hover {
             @include box-shadow( $chat-bubble-hover-shadow );
         }
-        .k-state-selected .k-bubble,
         .k-selected .k-bubble {
             @include box-shadow( $chat-bubble-selected-shadow );
         }
@@ -39265,7 +38925,6 @@ $chat-quick-reply-hover-border: $primary !default;
         .k-alt .k-bubble:hover {
             @include box-shadow( $chat-alt-bubble-hover-shadow );
         }
-        .k-alt .k-state-selected .k-bubble,
         .k-alt .k-selected .k-bubble {
             @include box-shadow( $chat-alt-bubble-selected-shadow );
         }
@@ -40052,7 +39711,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
             color: $body-text;
         }
 
-        .k-timeline-arrow.k-state-disabled,
         .k-timeline-arrow.k-disabled {
             opacity: 1; // The arrow button in disabled mode should have a solid background
             color: $timeline-track-arrow-disabled-text;
@@ -40073,7 +39731,6 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
         background-color: $timeline-flag-bg;
     }
 
-    .k-timeline-track-item.k-state-focus .k-timeline-circle,
     .k-timeline-track-item.k-focus .k-timeline-circle {
         @include box-shadow( $timeline-track-item-focus-shadow );
     }
@@ -40092,6 +39749,9 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
 // #region @import "../common/_index.scss"; -> packages/default/scss/common/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../button/_variables.scss"; -> packages/default/scss/button/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
 // #region @import "../combobox/_index.scss"; -> packages/default/scss/combobox/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
@@ -40107,6 +39767,12 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
 // #region @import "../icons/_index.scss"; -> packages/default/scss/icons/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../dropzone/_index.scss"; -> packages/default/scss/dropzone/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../window/_index.scss"; -> packages/default/scss/window/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Component
@@ -40137,12 +39803,25 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-padding-x: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-padding-y: calc( #{$toolbar-padding-x} * 2 ) !default;
 $pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
+$pdf-viewer-search-panel-border-width: 1px !default;
+$pdf-viewer-search-panel-border-radius: 0 !default;
+$pdf-viewer-search-panel-bg: $component-bg !default;
+$pdf-viewer-search-panel-text: $component-text !default;
+$pdf-viewer-search-panel-border: $component-border !default;
+$pdf-viewer-search-panel-shadow: $window-shadow !default;
+$pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;
+
 $pdf-viewer-selection-line-height: $line-height-sm !default;
 
 $pdf-viewer-search-highlight-bg: $body-text !default;
+$pdf-viewer-search-highlight-mark-bg: yellow !default;
+
+$pdf-viewer-icon-text: $dropzone-icon-text !default;
+$pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/pdf-viewer/_layout.scss
@@ -40152,6 +39831,7 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
         border-width: $pdf-viewer-border-width;
         border-style: solid;
         box-sizing: border-box;
+        position: relative;
         outline: 0;
         font-family: $pdf-viewer-font-family;
         font-size: $pdf-viewer-font-size;
@@ -40182,11 +39862,14 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
 
 
         // Canvas
-        .k-list-scroller {
+        .k-canvas {
+            display: flex;
+            flex-direction: column;
             flex: 1 1 auto;
             outline: none;
 
-            .k-enable-text-select {
+            .k-enable-text-select,
+            &.k-enable-text-select {
                 -webkit-user-select: text;
                 -moz-user-select: text;
                 -ms-user-select: text;
@@ -40194,16 +39877,22 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
                 cursor: text;
             }
 
-            .k-enable-panning {
+            .k-enable-panning,
+            &.k-enable-panning {
                 cursor: grab;
             }
-            .k-enable-panning span::selection {
+            .k-enable-panning span::selection,
+            &.k-enable-panning span::selection {
                 background-color: transparent;
             }
         }
 
 
-        // Page
+        // Pages
+        .k-pdf-viewer-pages {
+            flex: 1 1 auto;
+        }
+
         .k-page {
             position: relative;
             margin: $pdf-viewer-page-spacing auto;
@@ -40229,46 +39918,88 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
                 mark {
                     color: transparent;
                 }
+
+                .k-search-highlight-mark {
+                    color: transparent;
+                }
+            }
+        }
+
+        .k-blank-page {
+            margin: 0;
+            display: flex;
+            flex-flow: column nowrap;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            background-color: inherit !important; // sass-lint:disable-line no-important
+
+            .k-upload,
+            .k-dropzone,
+            .k-dropzone-inner {
+                border: 0;
+                background: none;
+            }
+
+            > .k-icon {
+                font-size: $pdf-viewer-icon-size;
             }
         }
+
     }
 
     // Search
     .k-pdf-viewer-search-dialog {
-        padding: $pdf-viewer-search-dialog-padding;
+        padding: 0 !important; // sass-lint:disable-line no-important
+    }
 
-        .k-search-container {
-            display: flex;
-            gap: $pdf-viewer-search-dialog-spacing;
-            flex-flow: row nowrap;
-            flex: 0 0 auto;
-            justify-content: flex-start;
-            align-items: center;
+    .k-search-panel {
+        padding: $pdf-viewer-search-dialog-padding-y $pdf-viewer-search-dialog-padding-x;
+        display: flex;
+        gap: $pdf-viewer-search-dialog-spacing;
+        flex-flow: row nowrap;
+        flex: 0 0 auto;
+        justify-content: flex-start;
+        align-items: center;
 
-            .k-search-dialog-draghandle {
-                cursor: move;
-                margin-left: 0;
-            }
+        .k-search-dialog-draghandle {
+            cursor: move;
+            margin-left: 0;
+        }
 
-            .k-textbox {
-                width: 10em;
-                flex: none;
+        .k-textbox {
+            width: 10em;
+            flex: none;
 
-                .k-button {
-                    border-width: 0;
-                }
+            .k-button {
+                border-width: 0;
             }
+        }
 
-            .k-search-matches {
-                flex: 1 1 auto;
-            }
+        .k-search-matches {
+            display: inline-flex;
+            gap: $pdf-viewer-search-panel-matches-spacing;
         }
     }
 
+    .k-pdf-viewer-canvas > .k-search-panel {
+        width: max-content;
+        margin-top: calc( (#{$kendo-button-calc-size} + #{$pdf-viewer-search-panel-border-width} + ( 2 * #{$pdf-viewer-search-dialog-padding-y} )) * -1 );
+        border-width: $pdf-viewer-search-panel-border-width;
+        border-style: solid;
+        border-radius: $pdf-viewer-search-panel-border-radius;
+        z-index: 10;
+    }
+
+    // Alias
+    .k-search-container {
+        @extend .k-search-panel !optional;
+    }
+
 
     // IE
     .k-ie .k-pdf-viewer-search-dialog {
-
         .k-search-container > * + * {
             margin-left: $pdf-viewer-search-dialog-spacing;
         }
@@ -40320,12 +40051,33 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
             @include box-shadow( $pdf-viewer-page-shadow );
         }
 
+        .k-blank-page > .k-icon {
+            @include fill( $color: $pdf-viewer-icon-text );
+        }
+
 
         // Search
         .k-search-highlight {
             background-color: $pdf-viewer-search-highlight-bg;
         }
 
+        .k-search-highlight-mark {
+            @include fill( $bg: $pdf-viewer-search-highlight-mark-bg );
+        }
+
+    }
+
+    .k-pdf-viewer-canvas > .k-search-panel {
+        @include fill(
+            $pdf-viewer-search-panel-text,
+            $pdf-viewer-search-panel-bg,
+            $pdf-viewer-search-panel-border,
+        );
+        @include box-shadow( $pdf-viewer-search-panel-shadow );
+    }
+
+    .k-search-container {
+        @extend .k-search-panel !optional;
     }
 
 }
@@ -40767,7 +40519,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
         -webkit-tap-highlight-color: $scrollview-arrow-tap-highlight-color;
 
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -40778,7 +40529,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
         }
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -40798,14 +40548,12 @@ $scrollview-transition-timing-function: ease-in-out !default;
         }
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             box-shadow: $scrollview-pagebutton-shadow;
         }
     }
 
     .k-scrollview-nav > .k-link:hover,
-    .k-scrollview-nav > .k-link.k-state-hover,
     .k-scrollview-nav > .k-link.k-hover {
         box-shadow: $scrollview-pagebutton-shadow;
     }
@@ -41053,7 +40801,7 @@ $treemap-line-height: $line-height !default;
     .k-chart-tooltip-wrapper {
         z-index: 12000;
 
-        > .k-popup {
+        .k-popup {
             padding: 0;
             border-width: 0;
             background: transparent;
@@ -41618,7 +41366,7 @@ $treemap-line-height: $line-height !default;
         .k-leaf.k-inverse {
             color: $component-text;
         }
-        .k-leaf.k-state-hover,
+        .k-leaf:hover,
         .k-leaf.k-hover {
             box-shadow: inset 0 0 0 3px $component-border;
         }
@@ -42088,8 +41836,7 @@ $orgchart-line-v-height: 25px !default;
         }
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include box-shadow( $orgchart-card-focus-shadow );
         }
     }
@@ -42103,9 +41850,6 @@ $orgchart-line-v-height: 25px !default;
         );
     }
     .k-orgchart-node-group-container:focus,
-    .k-orgchart-node-group-container.k-focus,
-    .k-orgchart-node-group-container.k-state-focus,
-    .k-orgchart-node-group-container.k-state-focused,
     .k-orgchart-node-group-container.k-focus {
         @include box-shadow( $orgchart-node-group-focus-shadow );
         @include fill ( $border: $orgchart-node-group-focus-border );
@@ -42147,40 +41891,42 @@ $kendo-signature-height: 84px !default;
 $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 
-$kendo-signature-padding: map-get( $spacing, 1 ) !default;
-$kendo-signature-padding-sm: map-get( $spacing, 1 ) - map-get($spacing, thin) !default;
-$kendo-signature-padding-md: $kendo-signature-padding !default;
-$kendo-signature-padding-lg: map-get( $spacing, 1 ) + map-get($spacing, thin) !default;
+$kendo-signature-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-x-sm: map-get( $spacing, 1 ) - map-get($spacing, thin) !default;
+$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
+$kendo-signature-padding-x-lg: map-get( $spacing, 2 ) !default;
+
+$kendo-signature-padding-y: $kendo-signature-padding-x !default;
+$kendo-signature-padding-y-sm: $kendo-signature-padding-x-sm !default;
+$kendo-signature-padding-y-md: $kendo-signature-padding-x-md !default;
+$kendo-signature-padding-y-lg: $kendo-signature-padding-x-lg !default;
 
 $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
 $kendo-signature-line-color: rgba( $info, .24 ) !default;
 
-$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
-$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
-$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
-$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
+$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
+$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
+$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-x-md} ) !default;
+$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-x-lg} ) !default;
 
-$kendo-signature-line-bottom-offset: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding} ) !default;
-$kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
-$kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
-$kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
+$kendo-signature-line-bottom-offset: 33% !default;
 
 $kendo-signature-sizes: (
     sm: (
-        padding: $kendo-signature-padding-sm,
-        line-size: $kendo-signature-line-size-sm,
-        line-offset: $kendo-signature-line-bottom-offset-sm
+        padding-x: $kendo-signature-padding-x-sm,
+        padding-y: $kendo-signature-padding-y-sm,
+        line-size: $kendo-signature-line-size-sm
     ),
     md: (
-        padding: $kendo-signature-padding-md,
-        line-size: $kendo-signature-line-size-md,
-        line-offset: $kendo-signature-line-bottom-offset-md
+        padding-x: $kendo-signature-padding-x-md,
+        padding-y: $kendo-signature-padding-y-md,
+        line-size: $kendo-signature-line-size-md
     ),
     lg: (
-        padding: $kendo-signature-padding-lg,
-        line-size: $kendo-signature-line-size-lg,
-        line-offset: $kendo-signature-line-bottom-offset-lg
+        padding-x: $kendo-signature-padding-x-lg,
+        padding-y: $kendo-signature-padding-y-lg,
+        line-size: $kendo-signature-line-size-lg
     )
 ) !default;
 
@@ -42193,7 +41939,7 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
 
     .k-signature {
         width: $kendo-signature-width;
-        height: $kendo-signature-height;
+        min-height: $kendo-signature-height;
         position: relative;
         box-sizing: border-box;
         display: flex;
@@ -42230,27 +41976,30 @@ $kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacin
 
     .k-signature-line {
         position: absolute;
-        z-index: 0;
+        bottom: $kendo-signature-line-bottom-offset;
+        z-index: 2;
+        pointer-events: none;
         border-bottom-width: $kendo-signature-line-width;
         border-bottom-style: $kendo-signature-line-style;
     }
 
     // Sizes
     @each $size, $size-props in $kendo-signature-sizes {
-        $_padding: map-get($size-props, padding);
+        $_padding-x: map-get($size-props, padding-x);
+        $_padding-y: map-get($size-props, padding-y);
         $_line-size: map-get($size-props, line-size);
         $_line-offset: map-get($size-props, line-offset);
 
         .k-signature-#{$size} {
-            padding: $_padding;
+            padding-inline: $_padding-x;
+            padding-block: $_padding-y;
 
             .k-signature-line {
                 width: $_line-size;
-                bottom: $_line-offset;
             }
         }
-
     }
+
 }
 
 // #endregion