@progress/kendo-theme-bootstrap 5.6.1-dev.6 → 5.8.0

package/dist/all.scss

@@ -3488,7 +3488,7 @@ $line-height-xs: 1 !default;
 $line-height-sm: $line-height-sm !default;
 $line-height-md: $line-height !default;
 $line-height-lg: $line-height-lg !default;
-$line-height-em: ($line-height * 1em) !default;
+$line-height-em: calc( #{$line-height} * 1em ) !default;
 
 
 // Font weight
@@ -3722,7 +3722,6 @@ $display4-letter-spacing: null !default;
 @include exports( "common/disabled" ) {
 
     // Disabled state
-    .k-state-disabled,
     .k-disabled,
     .k-widget[disabled],
     .k-disabled {
@@ -3737,8 +3736,7 @@ $display4-letter-spacing: null !default;
 
         // Nested disabled
         [disabled],
-        .k-disabled,
-        .k-state-disabled {
+        .k-disabled {
             opacity: 1;
             filter: grayscale(0);
         }
@@ -6537,18 +6535,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;
         }
     }
@@ -6559,60 +6567,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);
-    }
 
 }
 
@@ -11217,8 +11181,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);
             }
@@ -11239,8 +11202,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);
             }
@@ -12170,7 +12132,6 @@ $floating-label-focus-text: null !default;
             width: auto;
         }
 
-        &.k-state-empty,
         &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
@@ -12181,8 +12142,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;
@@ -12194,7 +12153,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;
         }
@@ -12208,7 +12166,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;
@@ -12217,8 +12174,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;
@@ -12249,8 +12204,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
@@ -14601,8 +14555,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;
         }
     }
 
@@ -15522,6 +15479,12 @@ $tooltip-error-border: $tooltip-error-bg !default;
             align-items: center;
         }
 
+        // Template item
+        .k-toolbar-item:focus {
+            text-decoration: none;
+            outline: 0;
+        }
+
     }
 
 
@@ -15686,6 +15649,13 @@ $tooltip-error-border: $tooltip-error-bg !default;
         }
 
 
+        // Template item
+        .k-toolbar-item:focus,
+        .k-toolbar-item.k-focus {
+            @include box-shadow( $kendo-button-focus-shadow );
+        }
+
+
         // Button group
         .k-button-group {}
 
@@ -15946,7 +15916,7 @@ $form-spacer: $padding-x * 2 !default;
 
 $form-font-size: $font-size !default;
 $form-line-height: $input-btn-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;
 
@@ -17334,7 +17304,6 @@ $kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
 
 
         // Selection
-        > .k-state-selected,
         > .k-selected {
             border-width: 0;
             border-style: solid;
@@ -17405,7 +17374,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
@@ -17432,7 +17400,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;
@@ -17457,7 +17424,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
@@ -17487,7 +17453,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;
@@ -17499,7 +17464,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;
@@ -17510,9 +17474,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;
         }
@@ -17541,7 +17503,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;
@@ -17551,7 +17512,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;
         }
@@ -17560,12 +17520,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;
         }
@@ -17631,7 +17589,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 );
         }
@@ -18014,7 +17971,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
 
@@ -18078,7 +18034,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,
@@ -18090,7 +18045,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 );
@@ -18099,13 +18053,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 );
@@ -18122,7 +18074,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 );
@@ -18299,7 +18250,6 @@ $slider-disabled-opacity: null !default;
         }
 
 
-        &.k-state-disabled,
         &.k-disabled {
             .k-tick,
             .k-slider-track,
@@ -18593,8 +18543,8 @@ $slider-disabled-opacity: null !default;
                 left: auto;
             }
 
-            .k-button .k-i-arrow-e,
-            .k-button .k-i-arrow-w {
+            .k-button-increase .k-icon,
+            .k-button-decrease .k-icon {
                 transform: scaleX(-1);
             }
         }
@@ -18756,20 +18706,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;
         }
@@ -19421,7 +19368,6 @@ $kendo-calendar-sizes: (
         }
 
         // // styles are applied to the k-link element inside
-        // .k-state-selected,
         // .k-selected {
         //     color: inherit;
         //     background: transparent;
@@ -19549,10 +19495,8 @@ $kendo-calendar-sizes: (
 
             &:hover,
             &.k-hover,
-            &.k-state-hover,
             &:focus,
-            &.k-focus,
-            &.k-state-focus {
+            &.k-focus {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -19573,8 +19517,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 {
@@ -19608,8 +19551,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,
@@ -19617,8 +19559,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,
@@ -19627,8 +19568,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,
@@ -19637,14 +19577,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;
         }
 
@@ -19658,8 +19595,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;
             }
         }
@@ -19682,7 +19618,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;
@@ -19730,9 +19665,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);
             }
@@ -19968,7 +19901,6 @@ $kendo-time-selector-sizes: (
             display: block;
         }
 
-        &.k-state-focused,
         &.k-focus {
             &::before,
             &::after {
@@ -20143,7 +20075,6 @@ $kendo-time-selector-sizes: (
             color: $time-list-title-text;
         }
 
-        &.k-state-focused,
         &.k-focus {
             .k-title {
                 color: $time-list-title-focus-text;
@@ -20460,18 +20391,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;
@@ -20491,20 +20418,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 );
@@ -20837,7 +20759,7 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 2 ) !default;
             }
 
             // Needed for the double check icons
-            .k-i-check + .k-i-check {
+            .k-icon + .k-icon {
                 margin-left: -13px;
             }
         }
@@ -20883,7 +20805,6 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 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 );
@@ -20904,16 +20825,15 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 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 );
         }
@@ -21109,7 +21029,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 );
@@ -22419,7 +22338,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;
         }
     }
@@ -22499,7 +22418,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 {
@@ -22507,7 +22425,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;
                 }
@@ -22518,19 +22435,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;
@@ -22538,7 +22452,6 @@ $rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
     }
 }
 
-
 // #endregion
 
 // #endregion
@@ -22963,8 +22876,7 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
 @include exports( "switch/layout/bootstrap" ) {
 
     // Switch
-    .k-switch.k-disabled,
-    .k-switch.k-state-disabled {
+    .k-switch.k-disabled {
         opacity: 1;
         filter: none;
     }
@@ -23773,7 +23685,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;
         }
@@ -23821,12 +23732,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;
             }
@@ -23918,7 +23827,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 {
@@ -24474,8 +24382,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 
     // Hover state
     @each $name, $color in $kendo-fab-theme-colors {
-        .k-hover.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:hover {
+        .k-fab-solid-#{$name}:hover,
+        .k-fab-solid-#{$name}.k-hover {
             border-color: try-darken( $color, 10% );
             color: contrast-wcag( try-darken( $color, 7.5% ) );
             background-color: try-darken( $color, 7.5% );
@@ -24484,8 +24392,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 
     // Focus state
     @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name}.k-focus,
-        .k-fab-solid-#{$name}:focus {
+        .k-fab-solid-#{$name}:focus,
+        .k-fab-solid-#{$name}.k-focus {
             outline-style: solid;
             outline-width: 3px;
             outline-color: rgba( $color, .5 );
@@ -24494,9 +24402,9 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 
     // Active state
     @each $name, $color in $kendo-fab-theme-colors {
-        .k-active.k-fab-solid-#{$name},
-        .k-selected.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:active {
+        .k-fab-solid-#{$name}:active,
+        .k-fab-solid-#{$name}.k-active,
+        .k-fab-solid-#{$name}.k-selected {
             @include box-shadow($kendo-fab-active-shadow);
             border-color: try-darken( $color, 12.5% );
             color: contrast-wcag( try-darken( $color, 10% ) );
@@ -24506,8 +24414,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 
     // Disabled state
     @each $name, $color in $kendo-fab-theme-colors {
-        .k-disabled.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:disabled {
+        .k-fab-solid-#{$name}:disabled,
+        .k-fab-solid-#{$name}.k-disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
             background-color: try-tint( $color, 4.5 );
             color: try-tint( contrast-wcag( $color ), 5 );
@@ -24536,8 +24444,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     }
 
     // Hover state
-    .k-fab-item.k-hover .k-fab-item-icon,
-    .k-fab-item:hover .k-fab-item-icon {
+    .k-fab-item:hover .k-fab-item-icon,
+    .k-fab-item.k-hover .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-shadow);
         outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 10% );
         outline-offset: -$kendo-fab-border-width;
@@ -24548,8 +24456,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 
     // Focus state
     .k-fab-item:focus .k-fab-item-text,
-    .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-text,
+    .k-fab-item:focus .k-fab-item-icon,
     .k-fab-item.k-focus .k-fab-item-icon {
         outline-style: solid;
         outline-width: 3px;
@@ -24557,8 +24465,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     }
 
     // Active state
-    .k-fab-item.k-active .k-fab-item-icon,
-    .k-fab-item:active .k-fab-item-icon {
+    .k-fab-item:active .k-fab-item-icon,
+    .k-fab-item.k-active .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-active-shadow);
         outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 12.5% );
         outline-offset: -$kendo-fab-border-width;
@@ -24568,8 +24476,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     }
 
     // Disabled state
-    .k-fab-item.k-disabled,
-    .k-fab-item:disabled {
+    .k-fab-item:disabled,
+    .k-fab-item.k-disabled {
         opacity: 1;
 
         .k-fab-item-text,
@@ -24952,7 +24860,6 @@ $actionsheet-item-disabled-shadow: null !default;
 
         // Hover state
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $actionsheet-item-hover-text,
@@ -24966,7 +24873,6 @@ $actionsheet-item-disabled-shadow: null !default;
 
         // Focus state
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             @include fill(
                 $actionsheet-item-focus-text,
@@ -24980,7 +24886,6 @@ $actionsheet-item-disabled-shadow: null !default;
 
         // Disabed state
         &:disabled,
-        &.k-state-disabled,
         &.k-disabled {
             @include fill(
                 $actionsheet-item-disabled-text,
@@ -25225,7 +25130,6 @@ $actionsheet-item-disabled-shadow: null !default;
 
     .k-window {
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             @include box-shadow( $window-focused-shadow );
         }
@@ -25743,33 +25647,28 @@ $drawer-selected-hover-text: $selected-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;
@@ -25900,7 +25799,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
             flex: none;
         }
 
-        > .k-i-close {
+        > .k-i-close,
+        > .k-i-x {
             margin-right: 0;
             margin-left: $notification-icon-spacing;
             flex: none;
@@ -25923,7 +25823,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
                 margin-left: $notification-icon-spacing;
             }
 
-            > .k-i-close {
+            > .k-i-close,
+            > .k-i-x {
                 margin-left: 0;
                 margin-right: $notification-icon-spacing;
             }
@@ -25948,7 +25849,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
         );
     }
     .k-notification-wrap {
-        > .k-i-close {
+        > .k-i-close,
+        > .k-i-x {
             color: inherit;
         }
     }
@@ -26509,8 +26411,7 @@ $card-callout-height: 1.3em !default;
         }
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include fill(
                 $card-focus-text,
                 $card-focus-bg,
@@ -26519,8 +26420,7 @@ $card-callout-height: 1.3em !default;
             @include box-shadow( $card-focus-shadow );
         }
 
-        &.k-selected,
-        &.k-state-selected {
+        &.k-selected {
             @include box-shadow( $card-focus-shadow );
         }
     }
@@ -26572,10 +26472,8 @@ $card-callout-height: 1.3em !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 );
@@ -27008,7 +26906,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;
     }
@@ -27055,15 +26952,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 ) );
             }
@@ -27078,16 +26971,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) );
@@ -27343,7 +27232,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         text-decoration: $link-decoration;
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             text-decoration: $link-hover-decoration;
         }
@@ -27364,7 +27252,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 );
         }
@@ -27381,7 +27268,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,
@@ -27392,7 +27278,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,
@@ -27414,7 +27299,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,
@@ -27425,7 +27309,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,
@@ -27449,7 +27332,6 @@ $breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
             color: $breadcrumb-active-color;
         }
 
-        .k-state-disabled,
         .k-disabled {
             opacity: 1;
             filter: none;
@@ -27593,7 +27475,6 @@ $pager-dropdown-width: 5em !default;
 
             // Focused state
             &:focus,
-            &.k-state-focus,
             &.k-focus {
                 z-index: 3;
             }
@@ -27602,6 +27483,10 @@ $pager-dropdown-width: 5em !default;
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
+            .k-i-caret-alt-to-left,
+            .k-i-caret-alt-to-right,
+            .k-i-caret-alt-left,
+            .k-i-caret-alt-right,
             .k-i-arrow-end-left,
             .k-i-arrow-60-left,
             .k-i-arrow-60-right,
@@ -27643,7 +27528,6 @@ $pager-dropdown-width: 5em !default;
         &:hover {
             z-index: 2;
         }
-        &.k-state-disabled,
         &.k-disabled {
             color: inherit;
         }
@@ -27693,7 +27577,6 @@ $pager-dropdown-width: 5em !default;
         }
 
         // Selected state
-        .k-state-selected,
         .k-selected {
             cursor: inherit;
             z-index: 2;
@@ -27865,9 +27748,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 );
@@ -27883,7 +27763,6 @@ $pager-dropdown-width: 5em !default;
         );
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             @include fill(
                 $pager-item-hover-text,
@@ -27892,7 +27771,6 @@ $pager-dropdown-width: 5em !default;
             );
         }
 
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $pager-item-selected-text,
@@ -27902,7 +27780,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 );
@@ -27926,7 +27803,6 @@ $pager-dropdown-width: 5em !default;
             );
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $pager-number-hover-text,
@@ -27936,13 +27812,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,
@@ -27975,7 +27849,6 @@ $pager-dropdown-width: 5em !default;
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $dropdownlist-hovered-text,
@@ -27985,7 +27858,7 @@ $pager-dropdown-width: 5em !default;
                 }
             }
 
-            &.k-state-expanded {
+            &.k-expanded {
                 @include fill(
                     $popup-text,
                     $popup-bg,
@@ -27996,7 +27869,6 @@ $pager-dropdown-width: 5em !default;
                 .k-link {
 
                     &:hover,
-                    &.k-state-hover,
                     &.k-hover {
                         @include fill(
                             $kendo-list-item-hover-text,
@@ -28004,7 +27876,6 @@ $pager-dropdown-width: 5em !default;
                         );
                     }
 
-                    &.k-state-selected,
                     &.k-selected {
                         @include fill(
                             $kendo-list-item-selected-text,
@@ -28044,7 +27915,6 @@ $pager-dropdown-width: 5em !default;
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $pager-text,
@@ -28643,7 +28513,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,
@@ -28894,13 +28763,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;
@@ -28989,7 +28856,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;
             }
@@ -29019,7 +28885,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;
             }
@@ -29053,7 +28918,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;
             }
@@ -29089,7 +28953,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;
             }
@@ -29135,7 +28998,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;
             }
@@ -29209,7 +29071,6 @@ $tabstrip-content-border-focused: $component-text !default;
             );
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 @include fill(
                     $tabstrip-item-hovered-text,
@@ -29220,9 +29081,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,
@@ -29233,7 +29092,6 @@ $tabstrip-content-border-focused: $component-text !default;
             }
 
             &:focus,
-            &.k-state-focused,
             &.k-focus {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
@@ -29256,7 +29114,6 @@ $tabstrip-content-border-focused: $component-text !default;
         );
 
         &:focus,
-        &.k-state-focused,
         &.k-focus {
             outline-color: $tabstrip-content-border-focused;
         }
@@ -29267,7 +29124,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;
             }
@@ -29284,36 +29140,32 @@ $tabstrip-content-border-focused: $component-text !default;
     // Tabstrip variants
     .k-tabstrip-top {
 
-        > .k-tabstrip-items .k-item.k-state-hover,
+        > .k-tabstrip-items .k-item:hover,
         > .k-tabstrip-items .k-item.k-hover,
-        > .k-tabstrip-items .k-item.k-state-active,
         > .k-tabstrip-items .k-item.k-active {
             border-bottom-color: transparent;
         }
     }
     .k-tabstrip-bottom {
 
-        > .k-tabstrip-items .k-item.k-state-hover,
+        > .k-tabstrip-items .k-item:hover,
         > .k-tabstrip-items .k-item.k-hover,
-        > .k-tabstrip-items .k-item.k-state-active,
         > .k-tabstrip-items .k-item.k-active {
             border-top-color: transparent;
         }
     }
     .k-tabstrip-left {
 
-        > .k-tabstrip-items .k-item.k-state-hover,
+        > .k-tabstrip-items .k-item:hover,
         > .k-tabstrip-items .k-item.k-hover,
-        > .k-tabstrip-items .k-item.k-state-active,
         > .k-tabstrip-items .k-item.k-active {
             border-right-color: transparent;
         }
     }
     .k-tabstrip-right {
 
-        > .k-tabstrip-items .k-item.k-state-hover,
+        > .k-tabstrip-items .k-item:hover,
         > .k-tabstrip-items .k-item.k-hover,
-        > .k-tabstrip-items .k-item.k-state-active,
         > .k-tabstrip-items .k-item.k-active {
             border-left-color: transparent;
         }
@@ -29404,7 +29256,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;
@@ -29499,20 +29350,20 @@ $wizard-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 // #region @import "_theme.scss"; -> packages/bootstrap/scss/wizard/_theme.scss
 // #region @import "~@progress/kendo-theme-default/scss/wizard/_theme.scss"; -> packages/bootstrap/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
@@ -29678,7 +29529,6 @@ $expander-content-padding-y: $expander-content-padding-x !default;
             $expander-border
         );
 
-        &.k-state-focus,
         &.k-focus {
             box-shadow: $expander-focus-shadow;
         }
@@ -29693,13 +29543,10 @@ $expander-content-padding-y: $expander-content-padding-x !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;
@@ -29945,6 +29792,10 @@ $panelbar-header-expanded-gradient: null !default;
             }
         }
 
+        // Panelbar item
+        .k-panelbar-item {
+            outline-style: none;
+        }
 
         // Panelbar content
         .k-panelbar-content {
@@ -30046,7 +29897,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,
@@ -30073,7 +29923,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,
@@ -30085,9 +29934,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,
@@ -30100,7 +29946,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,
@@ -30111,7 +29956,6 @@ $panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected
-            > .k-link.k-state-selected,
             > .k-link.k-selected {
                 @include fill(
                     $panelbar-header-selected-text,
@@ -30127,9 +29971,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,
@@ -30140,12 +29982,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,
@@ -30155,12 +29993,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,
@@ -30177,10 +30011,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,
@@ -30192,14 +30024,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,
@@ -30212,10 +30038,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,
@@ -30226,9 +30050,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,
@@ -30239,13 +30061,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,
@@ -30256,18 +30074,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,
@@ -30277,18 +30087,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,
@@ -30526,7 +30328,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
@@ -30575,7 +30377,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 {
@@ -30583,9 +30384,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;
@@ -30696,9 +30494,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);
     }
@@ -31112,7 +30907,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 border-radius: 50%;
             }
 
-            .k-i-reload {
+            .k-i-reload,
+            .k-i-arrow-rotate-cw {
                 font-size: 1em;
                 margin-right: .5em;
             }
@@ -31375,12 +31171,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;
             }
@@ -32126,7 +31920,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
         .k-cell-inner > .k-link > .k-icon {
             &.k-i-sort-desc-sm,
-            &.k-i-sort-asc-sm {
+            &.k-i-sort-asc-sm,
+            &.k-i-sort-asc-small,
+            &.k-i-sort-desc-small {
                 vertical-align: text-top;
                 margin-inline-start: $grid-sorted-icon-spacing;
             }
@@ -32958,34 +32754,27 @@ $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 {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
 
         // Selected state
-        th.k-state-selected,
         th.k-selected,
-        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.k-focus,
-        th.k-state-focused,
         th.k-focus,
         th: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,
         .k-grid-pager:focus {
             box-shadow: $grid-focused-shadow;
@@ -33020,20 +32809,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 );
             }
@@ -33080,6 +32865,8 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
 
         .k-i-sort-asc-sm,
         .k-i-sort-desc-sm,
+        .k-i-sort-asc-small,
+        .k-i-sort-desc-small,
         .k-sort-order {
             color: $grid-sorting-indicator-text;
         }
@@ -33089,12 +32876,9 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         .k-grid-header-menu,
         .k-hierarchy-cell .k-icon {
             &: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;
@@ -33148,20 +32932,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 );
         }
@@ -33169,27 +32947,19 @@ $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,
+        &: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: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;
         }
@@ -33203,7 +32973,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;
             }
@@ -33215,7 +32984,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             background-color: $grid-sticky-bg;
 
             &:hover td,
-            &.k-state-hover td,
             &.k-hover td {
                 background-color: $grid-sticky-hovered-bg;
             }
@@ -33227,66 +32995,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;
         }
@@ -33298,7 +33043,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 );
         }
@@ -33311,7 +33055,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
         }
 
         &:hover .k-grid-footer-sticky,
-        &.k-state-hover .k-grid-footer-sticky,
         &.k-hover .k-grid-footer-sticky {
             @include fill( $bg: $grid-sticky-footer-hovered-bg );
         }
@@ -33354,7 +33097,6 @@ $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 );
     }
@@ -33364,7 +33106,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
     }
 
     .k-columnmenu-item {
-        &.k-state-selected,
         &.k-selected {
             @include fill(
                 $kendo-list-item-selected-text,
@@ -33390,7 +33131,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 );
 
                 &:hover,
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
@@ -33398,7 +33138,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                     );
                 }
 
-                &.k-state-selected,
                 &.k-selected {
                     @include fill(
                         $kendo-list-item-selected-text,
@@ -33407,7 +33146,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 }
 
                 &:focus,
-                &.k-state-focused,
                 &.k-focus {
                     @include box-shadow( $kendo-list-item-focus-shadow );
                 }
@@ -33646,7 +33384,6 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
     // Listview content
     .k-listview-content {
 
-        > .k-state-focused,
         > .k-focus {
             @include fill(
                 $listview-item-focus-text,
@@ -33656,7 +33393,6 @@ $listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !defaul
             @include box-shadow( $listview-item-focus-shadow );
         }
 
-        > .k-state-selected,
         > .k-selected {
             @include fill(
                 $listview-item-selected-text,
@@ -33868,7 +33604,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 {
@@ -34037,7 +33773,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;
         }
@@ -34599,7 +34334,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;
@@ -34665,7 +34399,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;
                 }
@@ -34842,7 +34575,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,
@@ -34869,7 +34601,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         > .k-menu,
         > .k-menu:not(.k-context-menu) {
             .k-item {
-                &.k-state-hover,
                 &.k-hover {
                     @include fill(
                         $kendo-list-item-hover-text,
@@ -34900,13 +34631,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;
             }
@@ -34941,7 +34670,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,
@@ -34949,9 +34677,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,
@@ -35208,6 +34934,10 @@ $pivotgrid-remove-text: null !default;
         border-right-width: $pivotgrid-cell-border-width;
         border-bottom-style: solid;
         border-bottom-width: $pivotgrid-cell-border-width;
+
+        &:focus {
+            outline: none;
+        }
     }
 
 
@@ -35278,6 +35008,10 @@ $pivotgrid-remove-text: null !default;
         white-space: nowrap;
         vertical-align: top;
         overflow: hidden;
+
+        &:focus {
+            outline: none;
+        }
     }
 
     .k-pivotgrid-cell .k-icon {
@@ -35898,15 +35632,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,
@@ -35915,9 +35646,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,
@@ -35926,9 +35658,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,
@@ -36160,7 +35890,6 @@ $treelist-footer-row-border-width: 1px !default;
         }
 
         .k-treelist-dragging,
-        .k-treelist-dragging .k-state-hover,
         .k-treelist-dragging .k-hover {
             cursor: default;
         }
@@ -36926,7 +36655,6 @@ $filemanager-preview-icon-border: null !default;
                 );
             }
 
-            &.k-state-selected .k-file-icon,
             &.k-selected .k-file-icon {
                 @include fill(
                     inherit,
@@ -37295,10 +37023,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;
             }
         }
@@ -37390,7 +37116,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,
@@ -37429,39 +37154,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 );
         }
     }
@@ -37593,7 +37312,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;
@@ -37849,7 +37567,8 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
         border-bottom-color: inherit;
         cursor: se-resize;
 
-        .k-i-arrow-45-down-right {
+        .k-i-arrow-45-down-right,
+        .k-i-caret-br {
             display: none;
         }
     }
@@ -38047,7 +37766,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;
@@ -38270,7 +37988,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;
             }
@@ -38308,7 +38025,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;
         }
@@ -38326,7 +38043,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 );
         }
@@ -38839,7 +38555,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
@@ -38884,7 +38600,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                 }
             }
 
-            tr.k-state-selected > td:last-child,
             tr.k-selected > td:last-child {
                 background: transparent;
             }
@@ -39063,7 +38778,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 {
@@ -39154,7 +38869,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;
     }
@@ -39228,7 +38942,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;
     }
@@ -39702,7 +39415,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,
@@ -39717,7 +39429,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
                 stroke: $gantt-line-fill;
             }
 
-            polyline.k-state-selected,
             polyline.k-selected {
                 stroke: $gantt-line-selected-fill;
             }
@@ -39771,7 +39482,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,
@@ -39797,7 +39507,6 @@ $gantt-validation-tooltip-invalid-border: $error !default;
             );
         }
     }
-    .k-task-milestone.k-state-selected,
     .k-task-milestone.k-selected {
         background-image: none;
         @include fill(
@@ -39828,7 +39537,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;
 
@@ -39872,7 +39580,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,
@@ -39889,7 +39596,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;
     }
@@ -40548,7 +40254,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
             }
 
             &:hover,
-            &.k-state-hover,
             &.k-hover {
                 .k-event-delete {
                     opacity: 1;
@@ -40614,7 +40319,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 {
@@ -40872,11 +40576,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;
         }
@@ -40950,7 +40652,6 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
                 position: relative;
             }
 
-            td.k-state-selected,
             td.k-selected {
                 background-color: inherit;
             }
@@ -41159,6 +40860,8 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
 
         .k-scheduler,
         &.k-scheduler {
+            .k-i-caret-alt-left,
+            .k-i-caret-alt-right,
             .k-i-arrow-60-left,
             .k-i-arrow-60-right,
             .k-current-time-arrow-right {
@@ -41331,9 +41034,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);
     }
@@ -41356,7 +41057,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,
@@ -41367,7 +41068,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,
@@ -41434,10 +41134,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,
@@ -41449,9 +41147,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,
@@ -41461,13 +41157,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;
         }
@@ -41485,7 +41178,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 );
         }
@@ -41789,7 +41481,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;
@@ -41918,7 +41609,6 @@ $chat-quick-reply-hover-border: $primary !default;
         align-items: center;
 
         &:focus,
-        &.k-state-focus,
         &.k-focus,
         &:focus-within {
             outline: 0;
@@ -41999,7 +41689,6 @@ $chat-quick-reply-hover-border: $primary !default;
             flex: 0 0 auto;
         }
 
-        &.k-state-selected,
         &.k-selected {
             background: none;
         }
@@ -42236,7 +41925,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 );
         }
@@ -42252,7 +41940,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 );
         }
@@ -43057,7 +42744,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;
@@ -43078,7 +42764,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 );
     }
@@ -43099,6 +42784,9 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
 // #region @import "../common/_index.scss"; -> packages/bootstrap/scss/common/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../button/_variables.scss"; -> packages/bootstrap/scss/button/_variables.scss
+// File already imported_once. Skipping output.
+// #endregion
 // #region @import "../combobox/_index.scss"; -> packages/bootstrap/scss/combobox/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
@@ -43114,6 +42802,12 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
 // #region @import "../icons/_index.scss"; -> packages/bootstrap/scss/icons/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../dropzone/_index.scss"; -> packages/bootstrap/scss/dropzone/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "../window/_index.scss"; -> packages/bootstrap/scss/window/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Component
@@ -43144,12 +42838,25 @@ $pdf-viewer-page-text: $component-text !default;
 $pdf-viewer-page-border: $component-border !default;
 $pdf-viewer-page-shadow: 0 0 ($pdf-viewer-page-spacing / 2) $pdf-viewer-page-border !default;
 
-$pdf-viewer-search-dialog-padding: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-padding-x: $toolbar-padding-x !default;
+$pdf-viewer-search-dialog-padding-y: calc( #{$toolbar-padding-x} * 2 ) !default;
 $pdf-viewer-search-dialog-spacing: $toolbar-spacing !default;
 
+$pdf-viewer-search-panel-border-width: 1px !default;
+$pdf-viewer-search-panel-border-radius: map-get( $spacing, 1 ) !default;
+$pdf-viewer-search-panel-bg: $component-bg !default;
+$pdf-viewer-search-panel-text: $component-text !default;
+$pdf-viewer-search-panel-border: $component-border !default;
+$pdf-viewer-search-panel-shadow: null !default;
+$pdf-viewer-search-panel-matches-spacing: $padding-x-sm !default;
+
 $pdf-viewer-selection-line-height: 1.2 !default;
 
 $pdf-viewer-search-highlight-bg: $body-text !default;
+$pdf-viewer-search-highlight-mark-bg: yellow !default;
+
+$pdf-viewer-icon-text: $dropzone-icon-text !default;
+$pdf-viewer-icon-size: calc( #{$icon-size} * 3 ) !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/bootstrap/scss/pdf-viewer/_layout.scss
@@ -43160,6 +42867,7 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
         border-width: $pdf-viewer-border-width;
         border-style: solid;
         box-sizing: border-box;
+        position: relative;
         outline: 0;
         font-family: $pdf-viewer-font-family;
         font-size: $pdf-viewer-font-size;
@@ -43190,11 +42898,14 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
 
 
         // Canvas
-        .k-list-scroller {
+        .k-canvas {
+            display: flex;
+            flex-direction: column;
             flex: 1 1 auto;
             outline: none;
 
-            .k-enable-text-select {
+            .k-enable-text-select,
+            &.k-enable-text-select {
                 -webkit-user-select: text;
                 -moz-user-select: text;
                 -ms-user-select: text;
@@ -43202,16 +42913,22 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
                 cursor: text;
             }
 
-            .k-enable-panning {
+            .k-enable-panning,
+            &.k-enable-panning {
                 cursor: grab;
             }
-            .k-enable-panning span::selection {
+            .k-enable-panning span::selection,
+            &.k-enable-panning span::selection {
                 background-color: transparent;
             }
         }
 
 
-        // Page
+        // Pages
+        .k-pdf-viewer-pages {
+            flex: 1 1 auto;
+        }
+
         .k-page {
             position: relative;
             margin: $pdf-viewer-page-spacing auto;
@@ -43237,46 +42954,88 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
                 mark {
                     color: transparent;
                 }
+
+                .k-search-highlight-mark {
+                    color: transparent;
+                }
             }
         }
+
+        .k-blank-page {
+            margin: 0;
+            display: flex;
+            flex-flow: column nowrap;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            background-color: inherit !important; // sass-lint:disable-line no-important
+
+            .k-upload,
+            .k-dropzone,
+            .k-dropzone-inner {
+                border: 0;
+                background: none;
+            }
+
+            > .k-icon {
+                font-size: $pdf-viewer-icon-size;
+            }
+        }
+
     }
 
     // Search
     .k-pdf-viewer-search-dialog {
-        padding: $pdf-viewer-search-dialog-padding;
+        padding: 0 !important; // sass-lint:disable-line no-important
+    }
 
-        .k-search-container {
-            display: flex;
-            gap: $pdf-viewer-search-dialog-spacing;
-            flex-flow: row nowrap;
-            flex: 0 0 auto;
-            justify-content: flex-start;
-            align-items: center;
+    .k-search-panel {
+        padding: $pdf-viewer-search-dialog-padding-y $pdf-viewer-search-dialog-padding-x;
+        display: flex;
+        gap: $pdf-viewer-search-dialog-spacing;
+        flex-flow: row nowrap;
+        flex: 0 0 auto;
+        justify-content: flex-start;
+        align-items: center;
 
-            .k-search-dialog-draghandle {
-                cursor: move;
-                margin-left: 0;
-            }
+        .k-search-dialog-draghandle {
+            cursor: move;
+            margin-left: 0;
+        }
 
-            .k-textbox {
-                width: 10em;
-                flex: none;
+        .k-textbox {
+            width: 10em;
+            flex: none;
 
-                .k-button {
-                    border-width: 0;
-                }
+            .k-button {
+                border-width: 0;
             }
+        }
 
-            .k-search-matches {
-                flex: 1 1 auto;
-            }
+        .k-search-matches {
+            display: inline-flex;
+            gap: $pdf-viewer-search-panel-matches-spacing;
         }
     }
 
+    .k-pdf-viewer-canvas > .k-search-panel {
+        width: max-content;
+        margin-top: calc( (#{$kendo-button-calc-size} + ( 2 * #{$pdf-viewer-search-panel-border-width} ) + ( 2 * #{$pdf-viewer-search-dialog-padding-y} )) * -1 );
+        border-width: $pdf-viewer-search-panel-border-width;
+        border-style: solid;
+        border-radius: $pdf-viewer-search-panel-border-radius;
+        z-index: 10;
+    }
+
+    // Alias
+    .k-search-container {
+        @extend .k-search-panel !optional;
+    }
+
 
     // IE
     .k-ie .k-pdf-viewer-search-dialog {
-
         .k-search-container > * + * {
             margin-left: $pdf-viewer-search-dialog-spacing;
         }
@@ -43331,12 +43090,33 @@ $pdf-viewer-search-highlight-bg: $body-text !default;
             @include box-shadow( $pdf-viewer-page-shadow );
         }
 
+        .k-blank-page > .k-icon {
+            @include fill( $color: $pdf-viewer-icon-text );
+        }
+
 
         // Search
         .k-search-highlight {
             background-color: $pdf-viewer-search-highlight-bg;
         }
 
+        .k-search-highlight-mark {
+            @include fill( $bg: $pdf-viewer-search-highlight-mark-bg );
+        }
+
+    }
+
+    .k-pdf-viewer-canvas > .k-search-panel {
+        @include fill(
+            $pdf-viewer-search-panel-text,
+            $pdf-viewer-search-panel-bg,
+            $pdf-viewer-search-panel-border,
+        );
+        @include box-shadow( $pdf-viewer-search-panel-shadow );
+    }
+
+    .k-search-container {
+        @extend .k-search-panel !optional;
     }
 
 }
@@ -43785,7 +43565,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
         outline-width: 0;
 
         &:focus,
-        &.k-state-focus,
         &.k-focus {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -43796,7 +43575,6 @@ $scrollview-transition-timing-function: ease-in-out !default;
         }
 
         &:hover,
-        &.k-state-hover,
         &.k-hover {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
@@ -43818,14 +43596,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;
     }
@@ -44642,7 +44418,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;
         }
@@ -45124,8 +44900,7 @@ $orgchart-line-v-height: 25px !default;
         }
 
         &:focus,
-        &.k-focus,
-        &.k-state-focus {
+        &.k-focus {
             @include box-shadow( $orgchart-card-focus-shadow );
         }
     }
@@ -45139,9 +44914,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 );
@@ -45185,40 +44957,42 @@ $kendo-signature-height: 108px !default;
 $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 
-$kendo-signature-padding: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
-$kendo-signature-padding-sm: map-get( $spacing, 1 ) !default;
-$kendo-signature-padding-md: $kendo-signature-padding !default;
-$kendo-signature-padding-lg: map-get( $spacing, 2 ) !default;
+$kendo-signature-padding-x: map-get( $spacing, 3 ) !default;
+$kendo-signature-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
+$kendo-signature-padding-x-lg: map-get( $spacing, 4 ) !default;
+
+$kendo-signature-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-signature-padding-y-sm: map-get( $spacing, thin ) !default;
+$kendo-signature-padding-y-md: $kendo-signature-padding-y !default;
+$kendo-signature-padding-y-lg: map-get( $spacing, 2 ) !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;
 
@@ -45232,7 +45006,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;
@@ -45269,27 +45043,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