@progress/kendo-theme-default 5.6.1-dev.7 → 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);
         }
@@ -4457,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;
         }
     }
@@ -4479,63 +4487,19 @@ $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;
+        }
+        .\!k-bg-#{$name} {
             background-color: $bg-color !important;
         }
     }
 
 }
 
-
-@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 );
-        }
-    }
-}
-
-
-@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);
-    }
-
-}
-
 // #endregion
 // #region @import "_touch-action.scss"; -> packages/default/scss/utils/_touch-action.scss
 @include exports( "utils/touch-action" ) {
@@ -9049,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);
             }
@@ -9071,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);
             }
@@ -9987,7 +9949,6 @@ $floating-label-focus-text: null !default;
             width: auto;
         }
 
-        &.k-state-empty,
         &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
@@ -9998,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;
@@ -10011,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;
         }
@@ -10025,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;
@@ -10034,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;
@@ -10063,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
@@ -12377,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;
         }
     }
 
@@ -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,
@@ -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 );
@@ -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;
@@ -23862,8 +23749,7 @@ $card-callout-height: 20px !default;
         }
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include fill(
                 $card-focus-text,
                 $card-focus-bg,
@@ -23872,8 +23758,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 );
         }
     }
@@ -23925,10 +23810,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 );
@@ -24352,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;
     }
@@ -24396,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 ) );
             }
@@ -24419,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) );
@@ -24683,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 );
         }
@@ -24700,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,
@@ -24711,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,
@@ -24733,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,
@@ -24744,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,
@@ -24891,7 +24760,6 @@ $pager-dropdown-width: 5em !default;
 
             // Focused state
             &:focus,
-            &.k-state-focus,
             &.k-focus {
                 z-index: 3;
             }
@@ -24945,7 +24813,6 @@ $pager-dropdown-width: 5em !default;
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled,
         &.k-disabled {
             color: inherit;
         }
@@ -24995,7 +24862,6 @@ $pager-dropdown-width: 5em !default;
         }
 
         // Selected state
-        .k-state-selected,
         .k-selected {
             cursor: inherit;
             z-index: 2;
@@ -25140,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 );
@@ -25158,7 +25021,6 @@ $pager-dropdown-width: 5em !default;
         );
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $pager-item-hover-text,
@@ -25167,7 +25029,6 @@ $pager-dropdown-width: 5em !default;
             );
         }
 
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $pager-item-selected-text,
@@ -25177,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 );
@@ -25201,7 +25061,6 @@ $pager-dropdown-width: 5em !default;
             );
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $pager-number-hover-text,
@@ -25211,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,
@@ -25250,7 +25107,6 @@ $pager-dropdown-width: 5em !default;
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
@@ -25260,7 +25116,7 @@ $pager-dropdown-width: 5em !default;
                 }
             }
 
-            &.k-state-expanded {
+            &.k-expanded {
                 @include fill(
                     $popup-text,
                     $popup-bg,
@@ -25271,7 +25127,6 @@ $pager-dropdown-width: 5em !default;
                 .k-link {
 
                     &:hover,
-                    &.k-state-hover,
                     &.k-hover {
                         @include fill(
                             $kendo-list-item-hover-text,
@@ -25279,7 +25134,6 @@ $pager-dropdown-width: 5em !default;
                         );
                     }
 
-                    &.k-state-selected,
                     &.k-selected {
                         @include fill(
                             $kendo-list-item-selected-text,
@@ -25876,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,
@@ -26124,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;
@@ -26219,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;
             }
@@ -26249,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;
             }
@@ -26283,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;
             }
@@ -26319,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;
             }
@@ -26365,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;
             }
@@ -26436,7 +26282,6 @@ $tabstrip-content-border-focused: $component-text !default;
             );
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $tabstrip-item-hovered-text,
@@ -26447,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,
@@ -26460,7 +26303,6 @@ $tabstrip-content-border-focused: $component-text !default;
             }
 
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
@@ -26483,7 +26325,6 @@ $tabstrip-content-border-focused: $component-text !default;
         );
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
@@ -26494,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;
             }
@@ -26585,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;
@@ -26677,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
@@ -26850,7 +26689,6 @@ $expander-content-padding-y: $padding-y * 4 !default;
             $expander-border
         );
 
-        &.k-state-focus,
         &.k-focus {
             box-shadow: $expander-focus-shadow;
         }
@@ -26865,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;
@@ -27114,6 +26949,10 @@ $panelbar-header-expanded-gradient: null !default;
             }
         }
 
+        // Panelbar item
+        .k-panelbar-item {
+            outline-style: none;
+        }
 
         // Panelbar content
         .k-panelbar-content {
@@ -27212,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,
@@ -27239,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,
@@ -27251,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,
@@ -27266,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,
@@ -27277,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,
@@ -27293,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,
@@ -27306,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,
@@ -27321,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,
@@ -27343,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,
@@ -27358,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,
@@ -27378,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,
@@ -27392,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,
@@ -27405,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,
@@ -27422,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,
@@ -27443,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,
@@ -27689,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
@@ -27735,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 {
@@ -27743,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;
@@ -27850,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);
     }
@@ -28526,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;
             }
@@ -30152,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;
         }
@@ -30222,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 );
             }
@@ -30279,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;
@@ -30340,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 );
         }
@@ -30362,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;
         }
@@ -30395,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;
             }
@@ -30409,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;
             }
@@ -30421,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;
         }
@@ -30492,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 );
         }
@@ -30506,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,
@@ -30538,7 +30265,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
@@ -30546,7 +30272,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                     );
                 }
 
-                &.k-state-selected,
                 &.k-selected {
                     @include fill(
                         $kendo-list-item-selected-text,
@@ -30555,7 +30280,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 }
 
                 &:focus,
-                &.k-state-focused,
                 &.k-focus {
                     @include box-shadow( $kendo-list-item-focus-shadow );
                 }
@@ -30791,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,
@@ -30801,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,
@@ -31010,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 {
@@ -31179,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;
         }
@@ -31741,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;
@@ -31807,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;
                 }
@@ -31984,7 +31703,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             );
         }
 
-        &.k-state-active,
         &.k-active {
             @include fill(
                 $kendo-button-active-text,
@@ -32002,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,
@@ -32033,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,
@@ -32041,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,
@@ -32065,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;
             }
@@ -33025,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,
@@ -33042,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,
@@ -33053,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,
@@ -33284,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;
         }
@@ -34000,7 +33708,6 @@ $filemanager-preview-icon-border: null !default;
                 );
             }
 
-            &.k-state-selected .k-file-icon,
             &.k-selected .k-file-icon {
                 @include fill(
                     inherit,
@@ -34367,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;
             }
         }
@@ -34459,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,
@@ -34498,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 );
         }
     }
@@ -34659,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;
@@ -35114,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;
@@ -35334,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;
             }
@@ -35372,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;
         }
@@ -35390,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 );
         }
@@ -35894,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
@@ -35939,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;
             }
@@ -36118,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 {
@@ -36209,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;
     }
@@ -36283,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;
     }
@@ -36754,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,
@@ -36769,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;
             }
@@ -36823,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,
@@ -36849,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(
@@ -36880,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;
 
@@ -36924,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,
@@ -36941,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;
     }
@@ -37597,7 +37281,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             }
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 .k-event-delete {
                     opacity: 1;
@@ -37663,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 {
@@ -37921,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;
         }
@@ -37999,7 +37679,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
                 position: relative;
             }
 
-            td.k-state-selected,
             td.k-selected {
                 background-color: inherit;
             }
@@ -38346,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);
     }
@@ -38371,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,
@@ -38382,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,
@@ -38449,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,
@@ -38464,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,
@@ -38476,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;
         }
@@ -38500,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 );
         }
@@ -38801,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;
@@ -38930,7 +38597,6 @@ $chat-quick-reply-hover-border: $primary !default;
         align-items: center;
 
         &:focus,
-        &.k-state-focus,
         &.k-focus,
         &:focus-within {
             outline: 0;
@@ -39011,7 +38677,6 @@ $chat-quick-reply-hover-border: $primary !default;
             flex: 0 0 auto;
         }
 
-        &.k-state-selected,
         &.k-selected {
             background: none;
         }
@@ -39245,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 );
         }
@@ -39261,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 );
         }
@@ -40048,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;
@@ -40069,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 );
     }
@@ -40858,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;
@@ -40869,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;
@@ -40889,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;
     }
@@ -41709,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;
         }
@@ -42179,8 +41836,7 @@ $orgchart-line-v-height: 25px !default;
         }
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include box-shadow( $orgchart-card-focus-shadow );
         }
     }
@@ -42194,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 );
@@ -42238,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;
 
@@ -42284,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;
@@ -42321,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