@progress/kendo-theme-material 5.6.1-dev.7 → 5.7.0

package/dist/all.scss

@@ -2337,7 +2337,7 @@ $line-height-xs: 1 !default;
 $line-height-sm: 1.2 !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
@@ -2571,7 +2571,6 @@ $display4-letter-spacing: null !default;
 @include exports( "common/disabled" ) {
 
     // Disabled state
-    .k-state-disabled,
     .k-disabled,
     .k-widget[disabled],
     .k-disabled {
@@ -2586,8 +2585,7 @@ $display4-letter-spacing: null !default;
 
         // Nested disabled
         [disabled],
-        .k-disabled,
-        .k-state-disabled {
+        .k-disabled {
             opacity: 1;
             filter: grayscale(0);
         }
@@ -5365,18 +5363,28 @@ $utils-border-radius: (
 @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;
         }
     }
@@ -5387,60 +5395,16 @@ $utils-border-radius: (
 @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);
-    }
 
 }
 
@@ -9489,8 +9453,7 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
 
         &:disabled,
         &[disabled],
-        &.k-disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             opacity: 1;
             filter: none;
         }
@@ -10242,8 +10205,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);
             }
@@ -10264,8 +10226,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);
             }
@@ -10710,8 +10671,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             pointer-events: none;
         }
 
-        &.k-focus::after,
-        &.k-state-focused::after {
+        &.k-focus::after {
             opacity: 1;
             transform: scaleX(1);
         }
@@ -10729,8 +10689,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             transform: none;
         }
 
-        &.k-focus::after,
-        &.k-state-focused::after {
+        &.k-focus::after {
             transform: none;
         }
         &:focus-within::after {
@@ -11299,7 +11258,6 @@ $floating-label-focus-text: $primary !default;
             width: auto;
         }
 
-        &.k-state-empty,
         &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
@@ -11310,8 +11268,6 @@ $floating-label-focus-text: $primary !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;
@@ -11323,7 +11279,6 @@ $floating-label-focus-text: $primary !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;
         }
@@ -11337,7 +11292,6 @@ $floating-label-focus-text: $primary !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;
@@ -11346,8 +11300,6 @@ $floating-label-focus-text: $primary !default;
             }
 
             > .k-label,
-            // &:focus-within > .k-label,
-            &.k-state-focused > .k-label,
             &.k-focus > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
@@ -11402,8 +11354,7 @@ $floating-label-focus-text: $primary !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
@@ -11424,9 +11375,6 @@ $floating-label-focus-text: $primary !default;
 
         &.k-invalid + .k-label,
         .k-invalid + .k-label,
-        &.k-state-invalid + .k-label,
-        .k-state-invalid + .k-label,
-        .k-invalid + .k-label,
         .ng-invalid.ng-touched + .k-label,
         .ng-invalid.ng-dirty + .k-label {
             @include fill( $color: $error );
@@ -13837,8 +13785,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;
         }
     }
 
@@ -15351,7 +15302,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;
 
@@ -16741,7 +16692,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
 
 
         // Selection
-        > .k-state-selected,
         > .k-selected {
             border-width: 0;
             border-style: solid;
@@ -16812,7 +16762,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
@@ -16839,7 +16788,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;
@@ -16864,7 +16812,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
@@ -16894,7 +16841,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;
@@ -16906,7 +16852,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;
@@ -16917,9 +16862,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;
         }
@@ -16948,7 +16891,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;
@@ -16958,7 +16900,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;
         }
@@ -16967,12 +16908,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;
         }
@@ -17111,7 +17050,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 );
         }
@@ -17550,7 +17488,6 @@ $kendo-radio-ripple-opacity: .2 !default;
         }
 
         .k-radio:focus,
-        .k-radio.k-state-focus,
         .k-radio.k-focus {
             box-shadow: none !important; // sass-lint:disable-line no-important
 
@@ -17623,7 +17560,6 @@ $kendo-radio-ripple-opacity: .2 !default;
 
     // Hover state
     .k-radio:hover,
-    .k-radio.k-state-hover,
     .k-radio.k-hover {
         @include fill(
             $kendo-radio-hover-text,
@@ -17635,7 +17571,6 @@ $kendo-radio-ripple-opacity: .2 !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 );
@@ -17644,13 +17579,11 @@ $kendo-radio-ripple-opacity: .2 !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 );
@@ -17667,7 +17600,6 @@ $kendo-radio-ripple-opacity: .2 !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 );
@@ -17841,7 +17773,6 @@ $slider-disabled-opacity: .65 !default;
         }
 
 
-        &.k-state-disabled,
         &.k-disabled {
             .k-tick,
             .k-slider-track,
@@ -18347,20 +18278,17 @@ $slider-disabled-opacity: .65 !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;
         }
@@ -18399,7 +18327,6 @@ $slider-disabled-opacity: .65 !default;
             }
         }
 
-        &.k-state-disabled,
         &.k-disabled {
             opacity: 1;
 
@@ -19051,7 +18978,6 @@ $kendo-calendar-sizes: (
         }
 
         // // styles are applied to the k-link element inside
-        // .k-state-selected,
         // .k-selected {
         //     color: inherit;
         //     background: transparent;
@@ -19206,10 +19132,8 @@ $kendo-calendar-sizes: (
 
             &:hover,
             &.k-hover,
-            &.k-state-hover,
             &:focus,
-            &.k-focus,
-            &.k-state-focus {
+            &.k-focus {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -19230,8 +19154,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 {
@@ -19265,8 +19188,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,
@@ -19274,8 +19196,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,
@@ -19284,8 +19205,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,
@@ -19294,14 +19214,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;
         }
 
@@ -19315,8 +19232,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;
             }
         }
@@ -19339,7 +19255,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;
@@ -19387,9 +19302,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);
             }
@@ -19430,7 +19343,6 @@ $kendo-calendar-sizes: (
 
     .k-calendar {
 
-        .k-state-focused .k-link,
         .k-focus .k-link {
             @include fill(
                 $calendar-cell-hover-text,
@@ -19438,7 +19350,6 @@ $kendo-calendar-sizes: (
                 $calendar-cell-hover-border
             );
         }
-        .k-state-selected.k-state-focused .k-link,
         .k-selected.k-focus .k-link {
             @include fill(
                 $calendar-cell-selected-text,
@@ -19649,7 +19560,6 @@ $kendo-time-selector-sizes: (
             display: block;
         }
 
-        &.k-state-focused,
         &.k-focus {
             &::before,
             &::after {
@@ -19824,7 +19734,6 @@ $kendo-time-selector-sizes: (
             color: $time-list-title-text;
         }
 
-        &.k-state-focused,
         &.k-focus {
             .k-title {
                 color: $time-list-title-focus-text;
@@ -20160,18 +20069,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;
@@ -20191,20 +20096,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 );
@@ -20583,7 +20483,6 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !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 );
@@ -20604,16 +20503,15 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !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 );
         }
@@ -20808,7 +20706,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 );
@@ -22155,7 +22052,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;
         }
     }
@@ -22235,7 +22132,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 {
@@ -22243,7 +22139,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;
                 }
@@ -22254,19 +22149,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;
@@ -22274,7 +22166,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
     }
 }
 
-
 // #endregion
 
 // #endregion
@@ -23560,7 +23451,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;
         }
@@ -23608,12 +23498,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;
             }
@@ -23705,7 +23593,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 {
@@ -24755,7 +24642,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
 
         // Hover state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $actionsheet-item-hover-text,
@@ -24769,7 +24655,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
 
         // Focus state
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             @include fill(
                 $actionsheet-item-focus-text,
@@ -24783,7 +24668,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
 
         // Disabed state
         &:disabled,
-        &.k-state-disabled,
         &.k-disabled {
             @include fill(
                 $actionsheet-item-disabled-text,
@@ -25037,7 +24921,6 @@ $actionsheet-item-disabled-opacity: .42 !default;
 
     .k-window {
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include box-shadow( $window-focused-shadow );
         }
@@ -25573,33 +25456,28 @@ $drawer-selected-hover-text: $secondary !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;
@@ -25615,18 +25493,18 @@ $drawer-selected-hover-text: $secondary !default;
 // #endregion
 
 @include exports( "drawer/theme/material" ) {
+
     .k-drawer-item {
-        &.k-state-selected,
         &.k-selected {
 
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 background-color: $drawer-focused-bg;
                 box-shadow: $drawer-focused-shadow;
             }
         }
     }
+
 }
 
 // #endregion
@@ -26357,8 +26235,7 @@ $card-callout-height: 20px !default;
         }
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include fill(
                 $card-focus-text,
                 $card-focus-bg,
@@ -26367,8 +26244,7 @@ $card-callout-height: 20px !default;
             @include box-shadow( $card-focus-shadow );
         }
 
-        &.k-selected,
-        &.k-state-selected {
+        &.k-selected {
             @include box-shadow( $card-focus-shadow );
         }
     }
@@ -26420,10 +26296,8 @@ $card-callout-height: 20px !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 );
@@ -26857,7 +26731,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;
     }
@@ -26904,15 +26777,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 ) );
             }
@@ -26927,16 +26796,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) );
@@ -27197,7 +27062,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 );
         }
@@ -27214,7 +27078,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,
@@ -27225,7 +27088,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,
@@ -27247,7 +27109,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,
@@ -27258,7 +27119,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,
@@ -27408,7 +27268,6 @@ $pager-dropdown-width: 5em !default;
 
             // Focused state
             &:focus,
-            &.k-state-focus,
             &.k-focus {
                 z-index: 3;
             }
@@ -27462,7 +27321,6 @@ $pager-dropdown-width: 5em !default;
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled,
         &.k-disabled {
             color: inherit;
         }
@@ -27512,7 +27370,6 @@ $pager-dropdown-width: 5em !default;
         }
 
         // Selected state
-        .k-state-selected,
         .k-selected {
             cursor: inherit;
             z-index: 2;
@@ -27678,9 +27535,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 );
@@ -27696,7 +27550,6 @@ $pager-dropdown-width: 5em !default;
         );
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $pager-item-hover-text,
@@ -27705,7 +27558,6 @@ $pager-dropdown-width: 5em !default;
             );
         }
 
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $pager-item-selected-text,
@@ -27715,7 +27567,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 );
@@ -27739,7 +27590,6 @@ $pager-dropdown-width: 5em !default;
             );
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $pager-number-hover-text,
@@ -27749,13 +27599,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,
@@ -27788,7 +27636,6 @@ $pager-dropdown-width: 5em !default;
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
@@ -27798,7 +27645,7 @@ $pager-dropdown-width: 5em !default;
                 }
             }
 
-            &.k-state-expanded {
+            &.k-expanded {
                 @include fill(
                     $popup-text,
                     $popup-bg,
@@ -27809,7 +27656,6 @@ $pager-dropdown-width: 5em !default;
                 .k-link {
 
                     &:hover,
-                    &.k-state-hover,
                     &.k-hover {
                         @include fill(
                             $kendo-list-item-hover-text,
@@ -27817,7 +27663,6 @@ $pager-dropdown-width: 5em !default;
                         );
                     }
 
-                    &.k-state-selected,
                     &.k-selected {
                         @include fill(
                             $kendo-list-item-selected-text,
@@ -28451,7 +28296,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,
@@ -28702,13 +28546,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;
@@ -28797,7 +28639,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;
             }
@@ -28827,7 +28668,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;
             }
@@ -28861,7 +28701,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;
             }
@@ -28897,7 +28736,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;
             }
@@ -28943,7 +28781,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;
             }
@@ -29038,7 +28875,6 @@ $tabstrip-content-border-focused: $component-text !default;
             );
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $tabstrip-item-hovered-text,
@@ -29049,9 +28885,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,
@@ -29062,7 +28896,6 @@ $tabstrip-content-border-focused: $component-text !default;
             }
 
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
@@ -29085,7 +28918,6 @@ $tabstrip-content-border-focused: $component-text !default;
         );
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
@@ -29096,7 +28928,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;
             }
@@ -29202,7 +29033,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;
@@ -29297,20 +29127,20 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 // #region @import "_theme.scss"; -> packages/material/scss/wizard/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/wizard/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-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
@@ -29476,7 +29306,6 @@ $expander-content-padding-y: $padding-y * 6 !default;
             $expander-border
         );
 
-        &.k-state-focus,
         &.k-focus {
             box-shadow: $expander-focus-shadow;
         }
@@ -29491,13 +29320,10 @@ $expander-content-padding-y: $padding-y * 6 !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;
@@ -29744,6 +29570,10 @@ $panelbar-header-expanded-gradient: null !default;
             }
         }
 
+        // Panelbar item
+        .k-panelbar-item {
+            outline-style: none;
+        }
 
         // Panelbar content
         .k-panelbar-content {
@@ -29845,7 +29675,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,
@@ -29872,7 +29701,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,
@@ -29884,9 +29712,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,
@@ -29899,7 +29724,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,
@@ -29910,7 +29734,6 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected
-            > .k-link.k-state-selected,
             > .k-link.k-selected {
                 @include fill(
                     $panelbar-header-selected-text,
@@ -29926,9 +29749,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,
@@ -29939,12 +29760,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,
@@ -29954,12 +29771,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,
@@ -29976,10 +29789,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,
@@ -29991,14 +29802,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,
@@ -30011,10 +29816,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,
@@ -30025,9 +29828,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,
@@ -30038,13 +29839,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,
@@ -30055,18 +29852,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,
@@ -30076,18 +29865,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,
@@ -30325,7 +30106,7 @@ $splitbar-selected-text: $primary-contrast !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
@@ -30374,7 +30155,6 @@ $splitbar-selected-text: $primary-contrast !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 {
@@ -30382,9 +30162,6 @@ $splitbar-selected-text: $primary-contrast !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;
@@ -30495,9 +30272,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);
     }
@@ -31175,12 +30949,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;
             }
@@ -32939,33 +32711,28 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
 
         // 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;
         }
@@ -33009,20 +32776,16 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
 
             // 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 );
             }
@@ -33066,12 +32829,9 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                 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;
@@ -33127,20 +32887,14 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
 
         // 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 );
         }
@@ -33149,26 +32903,18 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         // 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;
         }
@@ -33182,7 +32928,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             background-color: $grid-sticky-bg;
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -33196,7 +32941,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
 
             &:hover td,
-            &.k-state-hover td,
             &.k-hover td {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -33208,66 +32952,43 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
 
         // 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;
         }
@@ -33279,7 +33000,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
 
         &: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 );
         }
@@ -33293,13 +33013,11 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         );
     }
     .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,
@@ -33325,7 +33043,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
@@ -33333,7 +33050,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                     );
                 }
 
-                &.k-state-selected,
                 &.k-selected {
                     @include fill(
                         $kendo-list-item-selected-text,
@@ -33342,7 +33058,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                 }
 
                 &:focus,
-                &.k-state-focused,
                 &.k-focus {
                     @include box-shadow( $kendo-list-item-focus-shadow );
                 }
@@ -33377,14 +33092,11 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
     .k-grid {
 
         // Selected state
-        td.k-state-selected,
         td.k-selected,
-        tr.k-state-selected,
         tr.k-selected {
             color: $grid-selected-text;
             background-color: $grid-selected-bg;
         }
-        tr.k-state-selected > td,
         tr.k-selected > td {
             color: inherit;
             background-color: transparent;
@@ -33392,14 +33104,12 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
         // Hover, Focused state
         table {
-            >tr:not(.k-detail-row):hover,
-            >tr:not(.k-detail-row).k-state-hover,
-            >tr:not(.k-detail-row).k-hover,
-            td.k-state-focused,
+            > tr:not(.k-detail-row):hover,
+            > tr:not(.k-detail-row).k-hover,
+            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,
@@ -33409,7 +33119,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
 
             tr:hover,
-            tr.k-state-hover,
             tr.k-hover {
                 .k-grid-header-sticky,
                 .k-grid-footer-sticky {
@@ -33418,9 +33127,8 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
                 }
             }
 
-            td.k-state-focused,
+            td:focus,
             td.k-focus,
-            th.k-state-focused,
             th.k-focus,
             th:focus,
             .k-master-row > td:focus,
@@ -33437,7 +33145,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
         }
         .k-grid-pager:focus,
-        .k-grid-pager.k-state-focused,
         .k-grid-pager.k-focus {
             color: inherit;
         }
@@ -33491,7 +33198,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
             .k-group-footer {
                 &:hover td,
-                &.k-state-hover td,
                 &.k-hover td {
                     color: inherit;
                     @include fill( $bg: $grid-sticky-footer-hovered-bg );
@@ -33542,15 +33248,12 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
             }
 
             &:focus,
-            &.k-state-focus,
-            &.k-focus,
-            &.k-state-border-down {
+            &.k-focus {
                 color: $grid-text;
                 background-color: $grid-filter-button-focus;
                 box-shadow: none;
             }
 
-            &.k-state-active,
             &.k-active {
                 color: $primary-contrast;
                 background-color: $primary;
@@ -33591,7 +33294,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
 
         &:hover td,
-        &.k-state-hover td,
         &.k-hover td {
             @include fill( $bg: $grid-sticky-footer-hovered-bg );
         }
@@ -33624,7 +33326,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
     }
 
     .k-columnmenu-item {
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -33633,7 +33334,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         }
     }
     .k-columnmenu-item:focus,
-    .k-columnmenu-item.k-state-focus,
     .k-columnmenu-item.k-focus {
         background: $kendo-list-item-hover-bg;
     }
@@ -33642,7 +33342,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
         .k-item {
             // Selected state
-            &.k-state-selected,
             &.k-selected {
                 background: $kendo-list-item-hover-bg;
             }
@@ -33863,7 +33562,6 @@ $listview-item-focus-shadow: null !default;
     // Listview content
     .k-listview-content {
 
-        > .k-state-focused,
         > .k-focus {
             @include fill(
                 $listview-item-focus-text,
@@ -33873,7 +33571,6 @@ $listview-item-focus-shadow: null !default;
             @include box-shadow( $listview-item-focus-shadow );
         }
 
-        > .k-state-selected,
         > .k-selected {
             @include fill(
                 $listview-item-selected-text,
@@ -33896,8 +33593,7 @@ $listview-item-focus-shadow: null !default;
 
     // Listview content
     .k-listview-content {}
-    .k-listview-content > .k-state-selected.k-state-focused,
-    .k-listview-content > .k-selected.k-focused {
+    .k-listview-content > .k-selected.k-focus {
         background-color: rgba( contrast-wcag( $listview-bg ), .12 );
     }
 
@@ -34100,7 +33796,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 {
@@ -34269,7 +33965,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;
         }
@@ -34831,7 +34526,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;
@@ -34897,7 +34591,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;
                 }
@@ -35018,7 +34711,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         .k-tabstrip-items .k-item {
             color: inherit;
         }
-        .k-tabstrip-items .k-item.k-state-active::after,
         .k-tabstrip-items .k-item.k-active::after {
             border-color: $primary-contrast;
         }
@@ -35041,7 +34733,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             $toolbar-gradient
         );
 
-        .k-tabstrip-items .k-item.k-state-active,
         .k-tabstrip-items .k-item.k-active {
             border-color: $secondary;
         }
@@ -35163,7 +34854,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         );
         box-shadow: inset 0 0 0 1px $kendo-button-border;
 
-        &.k-state-active,
         &.k-active {
             @include fill(
                 $kendo-button-active-text,
@@ -35209,13 +34899,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;
             }
@@ -35250,7 +34938,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,
@@ -35258,9 +34945,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,
@@ -36219,15 +35904,12 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !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,
@@ -36236,9 +35918,10 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !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,
@@ -36247,9 +35930,7 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !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,
@@ -36427,9 +36108,8 @@ $pivotgrid-remove-text: $pivotgrid-button-bg !default;
 @include exports("pivotgrid/theme/material") {
 
     // Hover and Focus state have the same bg color
-    .k-pivotgrid-cell.k-state-focus,
-    .k-pivotgrid-cell.k-focus,
     .k-pivotgrid-cell:focus,
+    .k-pivotgrid-cell.k-focus,
     .k-master-row > .k-pivotgrid-cell:focus,
     .k-grouping-row > .k-pivotgrid-cell:focus,
     .k-detail-row > .k-pivotgrid-cell:focus,
@@ -36496,7 +36176,6 @@ $treelist-footer-row-border-width: 1px !default;
         }
 
         .k-treelist-dragging,
-        .k-treelist-dragging .k-state-hover,
         .k-treelist-dragging .k-hover {
             cursor: default;
         }
@@ -37272,7 +36951,6 @@ $filemanager-preview-icon-border: null !default;
                 );
             }
 
-            &.k-state-selected .k-file-icon,
             &.k-selected .k-file-icon {
                 @include fill(
                     inherit,
@@ -37642,10 +37320,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;
             }
         }
@@ -37737,7 +37413,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,
@@ -37776,39 +37451,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 );
         }
     }
@@ -37940,7 +37609,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;
@@ -38395,7 +38063,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;
@@ -38704,9 +38371,9 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             }
         }
 
-        // Hover & Actve state
+        // Hover & Active state
         &:hover,
-        &.k-state-active,
+        &.k-hover
         &.k-active {
             border-color: $panel-border;
         }
@@ -38724,7 +38391,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 );
         }
@@ -39235,7 +38901,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
@@ -39280,7 +38946,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                 }
             }
 
-            tr.k-state-selected > td:last-child,
             tr.k-selected > td:last-child {
                 background: transparent;
             }
@@ -39459,7 +39124,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 {
@@ -39550,7 +39215,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;
     }
@@ -39624,7 +39288,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;
     }
@@ -40112,7 +39775,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,
@@ -40127,7 +39789,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                 stroke: $gantt-line-fill;
             }
 
-            polyline.k-state-selected,
             polyline.k-selected {
                 stroke: $gantt-line-selected-fill;
             }
@@ -40181,7 +39842,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,
@@ -40207,7 +39867,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
             );
         }
     }
-    .k-task-milestone.k-state-selected,
     .k-task-milestone.k-selected {
         background-image: none;
         @include fill(
@@ -40238,7 +39897,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;
 
@@ -40282,7 +39940,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,
@@ -40299,7 +39956,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;
     }
@@ -40980,7 +40636,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             }
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 .k-event-delete {
                     opacity: 1;
@@ -41046,7 +40701,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 {
@@ -41304,11 +40958,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;
         }
@@ -41382,7 +41034,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
                 position: relative;
             }
 
-            td.k-state-selected,
             td.k-selected {
                 background-color: inherit;
             }
@@ -41682,7 +41333,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
     kendo-scheduler .k-event,
     .k-event {
 
-        &.k-state-selected,
         &.k-selected {
             &::before {
                 display: block;
@@ -41898,9 +41548,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);
     }
@@ -41923,7 +41571,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,
@@ -41934,7 +41582,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,
@@ -42001,10 +41648,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,
@@ -42016,9 +41661,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,
@@ -42028,13 +41671,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;
         }
@@ -42052,7 +41692,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 );
         }
@@ -42390,7 +42029,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;
@@ -42519,7 +42157,6 @@ $chat-quick-reply-hover-border: $primary !default;
         align-items: center;
 
         &:focus,
-        &.k-state-focus,
         &.k-focus,
         &:focus-within {
             outline: 0;
@@ -42600,7 +42237,6 @@ $chat-quick-reply-hover-border: $primary !default;
             flex: 0 0 auto;
         }
 
-        &.k-state-selected,
         &.k-selected {
             background: none;
         }
@@ -42837,7 +42473,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 );
         }
@@ -42853,7 +42488,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 );
         }
@@ -43616,12 +43250,10 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
     }
 
     .k-timeline-track-item:hover .k-timeline-circle::before,
-    .k-timeline-track-item.k-state-hover .k-timeline-circle::before,
     .k-timeline-track-item.k-hover .k-timeline-circle::before {
         opacity: $kendo-flat-button-hover-opacity;
     }
 
-    .k-timeline-track-item.k-state-focus .k-timeline-circle::before,
     .k-timeline-track-item.k-focus .k-timeline-circle::before {
         opacity: $kendo-flat-button-focus-opacity;
     }
@@ -43673,7 +43305,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;
@@ -43694,7 +43325,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 );
     }
@@ -44501,7 +44131,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;
@@ -44512,7 +44141,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
         }
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -44532,14 +44160,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;
     }
@@ -45358,7 +44984,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;
         }
@@ -45840,8 +45466,7 @@ $orgchart-line-v-height: 25px !default;
         }
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include box-shadow( $orgchart-card-focus-shadow );
         }
     }
@@ -45855,9 +45480,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 );
@@ -45901,40 +45523,42 @@ $kendo-signature-height: 108px !default;
 $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 
-$kendo-signature-padding: map-get( $spacing, 2 ) !default;
-$kendo-signature-padding-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-signature-padding-md: $kendo-signature-padding !default;
-$kendo-signature-padding-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-signature-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-x-sm: map-get( $spacing, thin ) !default;
+$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
+$kendo-signature-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !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-y !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;
 
@@ -45948,7 +45572,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;
@@ -45985,27 +45609,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