@featherk/styles 0.6.6 → 0.6.8

package/dist/v8.2.0/scss/_overrides.scss

@@ -73,12 +73,16 @@
             outline-width: 0px;
             outline-color: $fk-feather-primary;
             transition-timing-function: ease-out;
-            column-gap: 0.5rem;
+            column-gap: 0.125rem;
+            min-width: 4rem;
+            min-height: 2.25rem;
         
 }
     .k-button.k-button-md{
                     @extend %fk-typography-feather-button;
-      
+          padding-right: 0.5rem;
+            padding-left: 0.5rem;
+        
 }
     .k-button-group{
     isolation: isolate;
@@ -537,7 +541,7 @@
 }
     .k-numerictextbox.k-input .k-input-spinner.k-spin-button{
     color: $fk-feather-icon-on-neutral;
-            align-self: center;
+            align-self: stretch;
             height: 100%;
         
 }
@@ -799,20 +803,15 @@
         
 }
     .k-textbox.k-input.k-focus.k-input-solid,.k-textbox.k-input.k-state-focus.k-input-solid,.k-textbox.k-input.k-state-focused.k-input-solid,.k-textbox.k-input.k-input-solid:focus{
+    color: k-color( primary );
+        
+}
+    .k-textbox.k-input.k-focus.k-input-solid,.k-textbox.k-input.k-state-focus.k-focus.k-input-solid,.k-textbox.k-input.k-state-focused.k-focus.k-input-solid,.k-textbox.k-input.k-focus.k-input-solid:focus,.k-textbox.k-input.k-focus.k-state-focus.k-input-solid,.k-textbox.k-input.k-state-focus.k-input-solid,.k-textbox.k-input.k-state-focused.k-state-focus.k-input-solid,.k-textbox.k-input.k-state-focus.k-input-solid:focus,.k-textbox.k-input.k-focus.k-state-focused.k-input-solid,.k-textbox.k-input.k-state-focus.k-state-focused.k-input-solid,.k-textbox.k-input.k-state-focused.k-input-solid,.k-textbox.k-input.k-state-focused.k-input-solid:focus,.k-textbox.k-input.k-focus:focus.k-input-solid,.k-textbox.k-input.k-state-focus:focus.k-input-solid,.k-textbox.k-input.k-state-focused:focus.k-input-solid,.k-textbox.k-input:focus.k-input-solid{
     border-bottom-color: currentcolor;
             border-left-color: currentcolor;
             border-right-color: currentcolor;
             border-top-color: currentcolor;
-            color: k-color( primary );
         
-}
-    .k-textbox.k-input.k-focus.k-input-solid,.k-textbox.k-input.k-state-focus.k-input-solid,.k-textbox.k-input.k-state-focused.k-input-solid,.k-textbox.k-input:focus.k-input-solid{
-                    @extend %fk-effects-feather-focus-outer-on-surface;
-      
-}
-    .k-textbox.k-input.k-invalid.k-focus.k-input-solid,.k-textbox.k-input.ng-invalid.ng-touched.k-focus.k-input-solid,.k-textbox.k-input.ng-invalid.ng-dirty.k-focus.k-input-solid,.k-textbox.k-input.k-invalid.k-state-focus.k-input-solid,.k-textbox.k-input.k-invalid.k-state-focused.k-input-solid,.k-textbox.k-input.k-invalid:focus.k-input-solid,.k-textbox.k-input.ng-invalid.ng-touched.k-state-focus.k-input-solid,.k-textbox.k-input.ng-invalid.ng-touched.k-state-focused.k-input-solid,.k-textbox.k-input.ng-invalid.ng-touched:focus.k-input-solid,.k-textbox.k-input.ng-invalid.ng-dirty.k-state-focus.k-input-solid,.k-textbox.k-input.ng-invalid.ng-dirty.k-state-focused.k-input-solid,.k-textbox.k-input.ng-invalid.ng-dirty:focus.k-input-solid{
-                    @extend %fk-effects-feather-focus-invalid-outer;
-      
 }
     .k-label.k-text-disabled{
     opacity: 100%;
@@ -1176,7 +1175,7 @@
     .k-textbox.k-input{
     transition-property: all;
             transition-duration: 280ms;
-            outline-style: solid;
+            align-items: center;
         
 }
     .k-textbox.k-input.k-input-solid{
@@ -1458,6 +1457,8 @@
 }
     .k-button.k-button-outline.k-button-outline-primary .k-button-text{
     color: k-color( primary );
+            padding-right: $fk-kendo-padding-sm-x;
+            padding-left: $fk-kendo-padding-sm-x;
         
 }
     .k-button.k-button-outline.k-button-outline-primary .k-button-icon.k-icon.k-svg-icon >svg{
@@ -1524,22 +1525,19 @@
     box-shadow: none;
         
 }
-    .k-numerictextbox.k-input.k-hover,.k-numerictextbox.k-input.k-state-hover,.k-numerictextbox.k-input.k-state-hovered,.k-numerictextbox.k-input:hover{
+    .k-numerictextbox.k-input.k-hover.k-input-solid,.k-numerictextbox.k-input.k-state-hover.k-input-solid,.k-numerictextbox.k-input.k-state-hovered.k-input-solid,.k-numerictextbox.k-input:hover.k-input-solid{
+    color: $fk-feather-primary-text-on-surface;
+        
+}
+    .k-numerictextbox.k-input.k-hover.k-input-solid,.k-numerictextbox.k-input.k-state-hover.k-input-solid,.k-numerictextbox.k-input.k-state-hovered.k-input-solid,.k-numerictextbox.k-input.k-input-solid:hover{
     border-bottom-color: $fk-kendo-input-hover-border;
             border-left-color: $fk-kendo-input-hover-border;
             border-right-color: $fk-kendo-input-hover-border;
             border-top-color: $fk-kendo-input-hover-border;
-            outline-offset: -0.5px;
-            outline-width: 1px;
-        
-}
-    .k-numerictextbox.k-input.k-hover.k-input-solid,.k-numerictextbox.k-input.k-state-hover.k-input-solid,.k-numerictextbox.k-input.k-state-hovered.k-input-solid,.k-numerictextbox.k-input:hover.k-input-solid{
-    color: $fk-feather-primary-text-on-surface;
         
 }
     .k-numerictextbox.k-input.k-state-focus-within.k-input-solid,.k-numerictextbox.k-input:focus-within.k-input-solid{
-                    @extend %fk-effects-feather-focus-outer-on-surface;
-          color: k-color( primary );
+    color: k-color( primary );
         
 }
     .k-numerictextbox.k-input.k-disabled.k-input-solid,.k-numerictextbox.k-input.k-state-disabled.k-input-solid,.k-numerictextbox.k-input:disabled.k-input-solid{
@@ -1578,11 +1576,11 @@
         
 }
     .k-numerictextbox.k-input.k-invalid.k-input-solid,.k-numerictextbox.k-input.ng-invalid.ng-touched.k-input-solid,.k-numerictextbox.k-input.ng-invalid.ng-dirty.k-input-solid{
-    border-bottom-color: k-color( error );
-            border-left-color: k-color( error );
-            border-right-color: k-color( error );
-            border-top-color: k-color( error );
-            color: k-color( error );
+    color: k-color( error );
+            border-bottom-color: $fk-kendo-input-invalid-border;
+            border-left-color: $fk-kendo-input-invalid-border;
+            border-right-color: $fk-kendo-input-invalid-border;
+            border-top-color: $fk-kendo-input-invalid-border;
         
 }
     .k-calendar.k-calendar-range.k-calendar-md .k-calendar-view.k-calendar-yearview .k-calendar-table .k-calendar-td.k-today .k-link{
@@ -1794,17 +1792,25 @@
     .k-textarea.k-input.k-disabled,.k-textarea.k-input.k-state-disabled,.k-textarea.k-input:disabled{
     opacity: unset;
         
-}
-    .k-maskedtextbox.k-input.k-state-focus-within,.k-maskedtextbox.k-input:focus-within{
-    outline-color: transparent;
-            outline-style: solid;
-            outline-width: 2px;
-        
 }
     .k-maskedtextbox.k-input.k-state-focus-within.k-input-solid,.k-maskedtextbox.k-input:focus-within.k-input-solid{
                     @extend %fk-effects-feather-focus-outer-on-surface;
           color: k-color( primary );
         
+}
+    .k-maskedtextbox.k-input.k-state-focus-within.k-input-solid,.k-maskedtextbox.k-input.k-state-focus-within.k-input-solid:focus-within,.k-maskedtextbox.k-input.k-state-focus-within:focus-within.k-input-solid,.k-maskedtextbox.k-input:focus-within.k-input-solid{
+    border-bottom-color: currentcolor;
+            border-left-color: currentcolor;
+            border-right-color: currentcolor;
+            border-top-color: currentcolor;
+        
+}
+    .k-maskedtextbox.k-input.k-invalid.k-state-focus-within,.k-maskedtextbox.k-input.ng-invalid.ng-touched.k-state-focus-within,.k-maskedtextbox.k-input.ng-invalid.ng-dirty.k-state-focus-within,.k-maskedtextbox.k-input.k-invalid:focus-within,.k-maskedtextbox.k-input.ng-invalid.ng-touched:focus-within,.k-maskedtextbox.k-input.ng-invalid.ng-dirty:focus-within{
+    border-bottom-color: currentcolor;
+            border-left-color: currentcolor;
+            border-right-color: currentcolor;
+            border-top-color: currentcolor;
+        
 }
     .k-maskedtextbox.k-input.k-invalid.k-state-focus-within.k-input-solid,.k-maskedtextbox.k-input.ng-invalid.ng-touched.k-state-focus-within.k-input-solid,.k-maskedtextbox.k-input.ng-invalid.ng-dirty.k-state-focus-within.k-input-solid,.k-maskedtextbox.k-input.k-invalid:focus-within.k-input-solid,.k-maskedtextbox.k-input.ng-invalid.ng-touched:focus-within.k-input-solid,.k-maskedtextbox.k-input.ng-invalid.ng-dirty:focus-within.k-input-solid{
                     @extend %fk-effects-feather-focus-invalid-outer;
@@ -1827,15 +1833,6 @@
             border-right-color: $fk-feather-disabled-text-on-surface;
             border-top-color: $fk-feather-disabled-text-on-surface;
         
-}
-    .k-maskedtextbox.k-input .k-input-inner.k-state-readonly,.k-maskedtextbox.k-input .k-input-inner[readonly]{
-    background-color: $fk-feather-border-light-on-surface;
-            background-image: none;
-        
-}
-    .k-numerictextbox.k-input.k-invalid.k-state-focus-within.k-input-solid,.k-numerictextbox.k-input.ng-invalid.ng-touched.k-state-focus-within.k-input-solid,.k-numerictextbox.k-input.ng-invalid.ng-dirty.k-state-focus-within.k-input-solid,.k-numerictextbox.k-input.k-invalid:focus-within.k-input-solid,.k-numerictextbox.k-input.ng-invalid.ng-touched:focus-within.k-input-solid,.k-numerictextbox.k-input.ng-invalid.ng-dirty:focus-within.k-input-solid{
-                    @extend %fk-effects-feather-focus-invalid-outer;
-      
 }
     .k-numerictextbox.k-input .k-input-spinner.k-spin-button .k-button.k-button-md.k-button-solid.k-button-solid-base.k-icon-button.k-spinner-increase .k-button-icon.k-icon.k-svg-icon{
     color: inherit;
@@ -1921,14 +1918,9 @@
     .k-timepicker.k-input.k-hover.k-input-solid,.k-timepicker.k-input.k-state-hover.k-input-solid,.k-timepicker.k-input.k-state-hovered.k-input-solid,.k-timepicker.k-input:hover.k-input-solid{
     color: $fk-feather-primary-text-on-surface;
         
-}
-    .k-timepicker.k-input.k-hover,.k-timepicker.k-input.k-state-hover,.k-timepicker.k-input.k-state-hovered,.k-timepicker.k-input:hover{
-                    @extend %fk-effects-feather-input-hover-on-surface;
-      
 }
     .k-timepicker.k-input.k-state-focus-within.k-input-solid,.k-timepicker.k-input:focus-within.k-input-solid{
-                    @extend %fk-effects-feather-focus-outer-on-surface;
-          color: k-color( primary );
+    color: k-color( primary );
         
 }
     .k-timepicker.k-input.k-state-focus-within.k-input-solid,.k-timepicker.k-input.k-state-focus-within.k-input-solid:focus-within,.k-timepicker.k-input.k-state-focus-within:focus-within.k-input-solid,.k-timepicker.k-input:focus-within.k-input-solid{
@@ -2175,6 +2167,7 @@
             transition-timing-function: ease-out;
             height: $fk-feather-container-height-lg;
             font-variant-numeric: tabular-nums;
+            align-items: center;
         
 }
     .k-numerictextbox.k-input.k-input-md{
@@ -2582,10 +2575,6 @@
 }
     .k-textbox.k-input.k-hover,.k-textbox.k-input.k-state-hover,.k-textbox.k-input.k-state-hovered,.k-textbox.k-input:hover{
     color: unset;
-            outline-color: currentcolor;
-            outline-style: solid;
-            outline-width: 1px;
-            outline-offset: -0.5px;
         
 }
     .k-numerictextbox.k-input .k-input-inner{
@@ -3334,6 +3323,11 @@
             border-top-left-radius: $fk-feather-border-radius-full;
             border-top-right-radius: $fk-feather-border-radius-full;
         
+}
+    .k-button.k-button-solid-primary.k-icon-button{
+    background-color: k-color( primary );
+            background-image: linear-gradient(transparent, transparent);
+        
 }
     .k-button.k-button-outline.k-icon-button.k-rounded-md{
     border-bottom-left-radius: 40px;
@@ -3419,10 +3413,6 @@
             transition-timing-function: ease-out;
             height: $fk-feather-container-height-lg;
             background-image: none;
-            outline-color: currentcolor;
-            outline-style: solid;
-            outline-width: 1px;
-            outline-offset: -1px;
         
 }
     .k-input.k-input-solid{
@@ -3508,6 +3498,9 @@
             border-left-color: k-color( border );
             border-right-color: k-color( border );
             border-top-color: k-color( border );
+            row-gap: 0px;
+            column-gap: 0.125rem;
+            padding-right: 0.75rem;
         
 }
     .k-switch.k-switch-on .k-switch-track{
@@ -3633,13 +3626,15 @@
         
 }
     .k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-focus .k-time-list::before,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-state-focus .k-time-list::before,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-state-focused .k-time-list::before,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper:focus .k-time-list::before{
-    visibility: visible;
+    visibility: hidden;
         
 }
     .k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-focus::before,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-state-focus::before,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-state-focused::before,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper:focus::before{
     visibility: visible;
             position: absolute;
             top: 36px;
+            background-color: initial;
+            background-image: $fk-feather-hover-on-surface-gradient;
         
 }
     .k-pager .k-pager-numbers-wrap .k-button.k-pager-nav{
@@ -3678,10 +3673,6 @@
     .k-maskedtextbox.k-input.k-hover .k-input-inner,.k-maskedtextbox.k-input.k-state-hover .k-input-inner,.k-maskedtextbox.k-input.k-state-hovered .k-input-inner,.k-maskedtextbox.k-input:hover .k-input-inner{
     box-sizing: border-box;
         
-}
-    .k-input.k-focus.k-input-solid,.k-input.k-state-focus.k-input-solid,.k-input.k-state-focused.k-input-solid,.k-input:focus.k-input-solid{
-                    @extend %fk-effects-feather-focus-outer-on-surface;
-      
 }
     .k-input.k-state-focus-within.k-input-solid,.k-input:focus-within.k-input-solid{
                     @extend %fk-effects-feather-focus-outer-on-surface;
@@ -3709,20 +3700,17 @@
         
 }
     .k-input.k-state-readonly.k-input-solid,.k-input[readonly].k-input-solid{
-    border-bottom-color: k-color( border );
-            border-left-color: k-color( border );
-            border-right-color: k-color( border );
-            border-top-color: k-color( border );
+    border-bottom-color: rgba(0,0,0,0.2);
+            border-left-color: rgba(0,0,0,0.2);
+            border-right-color: rgba(0,0,0,0.2);
+            border-top-color: rgba(0,0,0,0.2);
         
 }
     .k-input.k-state-readonly,.k-input[readonly]{
-    background-color: initial;
-            background-image: none;
-            border-bottom-style: solid;
+    border-bottom-style: solid;
             border-left-style: solid;
             border-right-style: solid;
             border-top-style: solid;
-            outline-style: none;
         
 }
     .k-dateinput.k-input .k-input-inner{
@@ -3932,15 +3920,9 @@
     background-color: k-color( primary );
             background-image: $fk-feather-active-on-color;
         
-}
-    .k-button.k-selected.k-button-solid-primary{
-    color: k-color( primary );
-            background-color: k-color( app-surface );
-            background-image: $fk-feather-selected-on-surface-gradient;
-        
 }
     .k-button.k-selected.k-button-solid-primary .k-button-text{
-    color: inherit;
+    color: k-color( primary );
         
 }
     .k-button.k-focus.k-button-solid-primary,.k-button.k-state-focus.k-button-solid-primary,.k-button.k-state-focused.k-button-solid-primary,.k-button:focus.k-button-solid-primary{
@@ -3955,6 +3937,14 @@
             transition-timing-function: ease-out;
             color: k-color( secondary );
             flex-direction: row;
+            column-gap: 0px;
+            background-color: k-color( primary );
+            background-image: linear-gradient(transparent, transparent);
+        
+}
+    .k-button.k-button-solid-primary.k-button-md{
+    padding-right: $fk-kendo-button-md-padding-x;
+            padding-left: $fk-kendo-button-md-padding-x;
         
 }
     .k-button.k-button-outline.k-button-outline-primary.k-icon-button .k-button-icon.k-icon.k-svg-icon >svg{
@@ -3962,8 +3952,9 @@
         
 }
     .k-button .k-button-icon.k-icon.k-svg-icon >svg{
-    width: auto;
+    width: 24px;
             height: auto;
+            min-width: 24px;
         
 }
     .k-button.k-button-outline.k-button-outline-primary.k-icon-button{
@@ -3976,8 +3967,8 @@
     .k-button.k-button-solid-primary .k-button-icon.k-icon.k-svg-icon >svg{
     translate: 0 -1px;
             color: k-color( on-primary );
-            width: $fk-kendo-icon-size;
-            height: $fk-kendo-icon-size;
+            padding-right: 0.125rem;
+            padding-left: 0.125rem;
         
 }
     .k-button-group .k-button.k-button-flat.k-icon-button.k-group-start,.k-button-group .k-button.k-button-flat.k-icon-button:first-child{
@@ -3997,6 +3988,7 @@
     aspect-ratio: 1/1;
             background-image: none;
             column-gap: 0px;
+            min-width: unset;
         
 }
     .k-button.k-icon-button.k-button-md{
@@ -4009,6 +4001,13 @@
     .k-button.k-icon-button.k-button-solid-base{
     background-color: $fk-kendo-button-bg;
         
+}
+    .k-button.k-button-solid-base.k-icon-button.k-rounded-md{
+    border-bottom-left-radius: $fk-feather-border-radius-full;
+            border-bottom-right-radius: $fk-feather-border-radius-full;
+            border-top-left-radius: $fk-feather-border-radius-full;
+            border-top-right-radius: $fk-feather-border-radius-full;
+        
 }
     .k-button.k-icon-button .k-button-icon.k-icon.k-svg-icon >svg{
     width: $fk-kendo-icon-size;
@@ -4155,10 +4154,6 @@
     .k-button-group .k-button.k-button-flat.k-focus.k-group-end.k-icon-button,.k-button-group .k-button.k-button-flat.k-state-focus.k-group-end.k-icon-button,.k-button-group .k-button.k-button-flat.k-state-focused.k-group-end.k-icon-button,.k-button-group .k-button.k-button-flat:focus.k-group-end.k-icon-button,.k-button-group .k-button.k-button-flat.k-focus:last-child.k-icon-button,.k-button-group .k-button.k-button-flat.k-state-focus:last-child.k-icon-button,.k-button-group .k-button.k-button-flat.k-state-focused:last-child.k-icon-button,.k-button-group .k-button.k-button-flat:focus:last-child.k-icon-button{
                     @extend %fk-effects-feather-focus-inner-on-surface-important;
       
-}
-    .fk-button-group.k-button-group .k-button.k-button-flat.k-focus.k-group-end,.fk-button-group.k-button-group .k-button.k-button-flat.k-state-focus.k-group-end,.fk-button-group.k-button-group .k-button.k-button-flat.k-state-focused.k-group-end,.fk-button-group.k-button-group .k-button.k-button-flat:focus.k-group-end,.fk-button-group.k-button-group .k-button.k-button-flat.k-focus:last-child,.fk-button-group.k-button-group .k-button.k-button-flat.k-state-focus:last-child,.fk-button-group.k-button-group .k-button.k-button-flat.k-state-focused:last-child,.fk-button-group.k-button-group .k-button.k-button-flat:focus:last-child{
-                    @extend %fk-effects-feather-focus-inner-on-surface-important;
-      
 }
     .k-button-group .k-button.k-icon-button.k-group-start,.k-button-group .k-button.k-icon-button:first-child{
     border-top-left-radius: $fk-kendo-border-radius;
@@ -4499,8 +4494,14 @@
 }
     .k-button.k-focus.k-button-outline.k-button-outline-primary,.k-button.k-state-focus.k-button-outline.k-button-outline-primary,.k-button.k-state-focused.k-button-outline.k-button-outline-primary,.k-button:focus.k-button-outline.k-button-outline-primary{
                     @extend %fk-effects-feather-focus-outer-on-surface-thin;
-          outline-style: none;
-            color: k-color( secondary );
+          color: k-color( secondary );
+            border-bottom-color: currentcolor;
+            border-left-color: currentcolor;
+            border-right-color: currentcolor;
+            border-top-color: currentcolor;
+            background-color: rgba(0, 0, 0, 0);
+            background-image: $fk-feather-focused-on-surface-gradient;
+            outline-width: 2px;
         
 }
     .k-calendar.k-calendar-range.k-calendar-md .k-calendar-view.k-calendar-monthview .k-calendar-table .k-calendar-td.k-focus .k-link,.k-calendar.k-calendar-range.k-calendar-md .k-calendar-view.k-calendar-monthview .k-calendar-table .k-calendar-td.k-state-focus .k-link,.k-calendar.k-calendar-range.k-calendar-md .k-calendar-view.k-calendar-monthview .k-calendar-table .k-calendar-td.k-state-focused .k-link,.k-calendar.k-calendar-range.k-calendar-md .k-calendar-view.k-calendar-monthview .k-calendar-table .k-calendar-td:focus .k-link{
@@ -4700,6 +4701,8 @@
 }
     .k-button.k-button-solid-primary .k-button-text{
     color: k-color( on-primary );
+            padding-right: $fk-kendo-padding-sm-x;
+            padding-left: $fk-kendo-padding-sm-x;
         
 }
     .k-button.k-disabled.k-button-solid-primary .k-button-icon.k-icon.k-svg-icon >svg,.k-button.k-state-disabled.k-button-solid-primary .k-button-icon.k-icon.k-svg-icon >svg,.k-button:disabled.k-button-solid-primary .k-button-icon.k-icon.k-svg-icon >svg{
@@ -4796,30 +4799,28 @@
 }
     .k-maskedtextbox.k-input.k-invalid.k-input-solid,.k-maskedtextbox.k-input.ng-invalid.ng-touched.k-input-solid,.k-maskedtextbox.k-input.ng-invalid.ng-dirty.k-input-solid{
     color: k-color( error );
+            border-bottom-color: currentcolor;
+            border-left-color: currentcolor;
+            border-right-color: currentcolor;
+            border-top-color: currentcolor;
         
 }
-    .k-input.k-invalid.k-focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-focus.k-input-solid,.k-input.k-invalid.k-state-focus.k-input-solid,.k-input.k-invalid.k-state-focused.k-input-solid,.k-input.k-invalid:focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focused.k-input-solid,.k-input.ng-invalid.ng-touched:focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focused.k-input-solid,.k-input.ng-invalid.ng-dirty:focus.k-input-solid{
-                    @extend %fk-effects-feather-focus-invalid-outer;
-      
-}
-    .k-input.k-invalid.k-input-solid,.k-input.ng-invalid.ng-touched.k-input-solid,.k-input.ng-invalid.ng-dirty.k-input-solid{
+    .k-input.k-invalid.k-focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-focus.k-input-solid,.k-input.k-invalid.k-state-focus.k-focus.k-input-solid,.k-input.k-invalid.k-state-focused.k-focus.k-input-solid,.k-input.k-invalid.k-focus.k-input-solid:focus,.k-input.ng-invalid.ng-touched.k-state-focus.k-focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focused.k-focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-focus.k-input-solid:focus,.k-input.ng-invalid.ng-dirty.k-state-focus.k-focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focused.k-focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-focus.k-input-solid:focus,.k-input.k-invalid.k-focus.k-state-focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-focus.k-state-focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-focus.k-state-focus.k-input-solid,.k-input.k-invalid.k-state-focus.k-input-solid,.k-input.k-invalid.k-state-focused.k-state-focus.k-input-solid,.k-input.k-invalid.k-state-focus.k-input-solid:focus,.k-input.ng-invalid.ng-touched.k-state-focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focused.k-state-focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focus.k-input-solid:focus,.k-input.ng-invalid.ng-dirty.k-state-focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focused.k-state-focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focus.k-input-solid:focus,.k-input.k-invalid.k-focus.k-state-focused.k-input-solid,.k-input.ng-invalid.ng-touched.k-focus.k-state-focused.k-input-solid,.k-input.ng-invalid.ng-dirty.k-focus.k-state-focused.k-input-solid,.k-input.k-invalid.k-state-focus.k-state-focused.k-input-solid,.k-input.k-invalid.k-state-focused.k-input-solid,.k-input.k-invalid.k-state-focused.k-input-solid:focus,.k-input.ng-invalid.ng-touched.k-state-focus.k-state-focused.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focused.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focused.k-input-solid:focus,.k-input.ng-invalid.ng-dirty.k-state-focus.k-state-focused.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focused.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focused.k-input-solid:focus,.k-input.k-invalid.k-focus:focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-focus:focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-focus:focus.k-input-solid,.k-input.k-invalid.k-state-focus:focus.k-input-solid,.k-input.k-invalid.k-state-focused:focus.k-input-solid,.k-input.k-invalid:focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focus:focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focused:focus.k-input-solid,.k-input.ng-invalid.ng-touched:focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focus:focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focused:focus.k-input-solid,.k-input.ng-invalid.ng-dirty:focus.k-input-solid{
     border-bottom-color: $fk-kendo-input-invalid-border;
             border-left-color: $fk-kendo-input-invalid-border;
             border-right-color: $fk-kendo-input-invalid-border;
             border-top-color: $fk-kendo-input-invalid-border;
         
 }
-    .k-input.k-invalid,.k-input.ng-invalid.ng-touched,.k-input.ng-invalid.ng-dirty{
-    outline-color: $fk-kendo-input-invalid-border;
-        
+    .k-input.k-invalid.k-focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-focus.k-input-solid,.k-input.k-invalid.k-state-focus.k-input-solid,.k-input.k-invalid.k-state-focused.k-input-solid,.k-input.k-invalid:focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focus.k-input-solid,.k-input.ng-invalid.ng-touched.k-state-focused.k-input-solid,.k-input.ng-invalid.ng-touched:focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focus.k-input-solid,.k-input.ng-invalid.ng-dirty.k-state-focused.k-input-solid,.k-input.ng-invalid.ng-dirty:focus.k-input-solid{
+                    @extend %fk-effects-feather-focus-invalid-outer;
+      
 }
     .k-input.k-hover,.k-input.k-state-hover,.k-input.k-state-hovered,.k-input:hover{
-    transition-property: all;
+                    @extend %fk-effects-feather-input-hover-on-surface;
+          transition-property: all;
             transition-duration: 280ms;
             transition-timing-function: ease-out;
-            outline-style: solid;
-            outline-width: 0.5px;
-            outline-color: $fk-kendo-input-hover-border;
         
 }
     .k-datepicker.k-input.k-invalid.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-touched.k-invalid.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-dirty.k-invalid.k-input-solid,.k-datepicker.k-input.k-invalid.ng-invalid.ng-touched.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-touched.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-dirty.ng-touched.k-input-solid,.k-datepicker.k-input.k-invalid.ng-invalid.ng-dirty.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-touched.ng-dirty.k-input-solid,.k-datepicker.k-input.ng-invalid.ng-dirty.k-input-solid{
@@ -4875,12 +4876,13 @@
     background-color: initial;
             background-image: $fk-feather-focused-on-surface-gradient;
             visibility: visible;
-            margin-top: 14px;
             border-bottom-style: none;
             border-left-style: none;
             border-right-style: none;
             border-top-style: none;
             height: 3rem;
+            top: 50%;
+            translate: 0 50%;
         
 }
     .k-popup.k-timepicker-popup .k-timeselector .k-time-list-container .k-time-separator{
@@ -4908,14 +4910,15 @@
     .k-timeselector .k-time-list-container .k-time-list-wrapper.k-focus .k-title,.k-timeselector .k-time-list-container .k-time-list-wrapper.k-state-focus .k-title,.k-timeselector .k-time-list-container .k-time-list-wrapper.k-state-focused .k-title,.k-timeselector .k-time-list-container .k-time-list-wrapper:focus .k-title{
     color: k-color( primary );
             font-weight: 700;
+            visibility: visible;
+            line-height: 3;
         
 }
     .k-timeselector .k-time-list-container .k-time-list-wrapper .k-title{
     color: $fk-kendo-component-text;
             font-weight: 500;
             line-height: 3;
-            position: relative;
-            top: -10px;
+            translate: 0 -6px;
         
 }
     .k-popup.k-timepicker-popup .k-timeselector .k-time-header{
@@ -4930,8 +4933,11 @@
     padding-bottom: $fk-feather-spacing-xs;
             padding-left: $fk-feather-spacing-s;
             padding-right: $fk-feather-spacing-s;
-            padding-top: $fk-feather-spacing-xs;
-            margin-top: $fk-feather-spacing-xs;
+            padding-top: $fk-feather-spacing-m;
+            margin-bottom: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+            margin-top: 0px;
         
 }
     .k-datetimepicker.k-input .k-input-inner{
@@ -5087,10 +5093,6 @@
     .fk-loader.k-loader.k-loader-lg.k-loader-spinner-4::before{
     visibility: visible;
         
-}
-    .k-button.k-selected.k-button-solid-primary .k-button-icon.k-icon.k-svg-icon >svg{
-    color: k-color( primary );
-        
 }
     .fk-loader.k-loader.k-loader-lg.k-loader-spinner-4{
     visibility: visible;
@@ -5118,6 +5120,14 @@
     background-color: inherit;
             background-image: $fk-feather-hover-on-surface-gradient;
             aspect-ratio: 1/1;
+            min-width: unset;
+        
+}
+    .k-button.k-button-solid-base.k-icon-button.k-rounded-md{
+    border-bottom-left-radius: $fk-feather-border-radius-full;
+            border-bottom-right-radius: $fk-feather-border-radius-full;
+            border-top-left-radius: $fk-feather-border-radius-full;
+            border-top-right-radius: $fk-feather-border-radius-full;
         
 }
     .k-button.k-active.k-icon-button,.k-button.k-state-active.k-icon-button,.k-button:active.k-icon-button{
@@ -5152,11 +5162,6 @@
     .fk-loader.k-loader.k-loader-lg.k-loader-spinner-3 .k-loader-canvas .k-loader-segment{
     visibility: hidden;
         
-}
-    .k-maskedtextbox.k-input.k-hover,.k-maskedtextbox.k-input.k-state-hover,.k-maskedtextbox.k-input.k-state-hovered,.k-maskedtextbox.k-input:hover{
-    outline-color: currentcolor;
-            outline-offset: -0.5px;
-        
 }
     .k-textarea.k-input.k-invalid .k-input-inner,.k-textarea.k-input.ng-invalid.ng-touched .k-input-inner,.k-textarea.k-input.ng-invalid.ng-dirty .k-input-inner{
     color: $fk-kendo-input-text;
@@ -5191,20 +5196,16 @@
             border-left-color: currentcolor;
             border-right-color: currentcolor;
             border-top-color: currentcolor;
+            align-items: center;
         
 }
     .k-textbox.k-input.k-input-outline.k-focus,.k-textbox.k-input.k-input-outline.k-state-focus,.k-textbox.k-input.k-input-outline.k-state-focused,.k-textbox.k-input.k-input-outline:focus{
                     @extend %fk-effects-feather-focus-outer-on-surface;
-          border-bottom-color: currentcolor;
-            border-left-color: currentcolor;
-            border-right-color: currentcolor;
-            border-top-color: currentcolor;
-            color: k-color( primary );
+          color: k-color( primary );
         
 }
     .k-textbox.k-input.k-input-outline.k-invalid,.k-textbox.k-input.k-input-outline.ng-invalid.ng-touched,.k-textbox.k-input.k-input-outline.ng-invalid.ng-dirty{
     color: k-color( error );
-            outline-color: currentcolor;
         
 }
     .k-textbox.k-input.k-input-outline.k-invalid.k-focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-touched.k-focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-dirty.k-focus,.k-textbox.k-input.k-input-outline.k-invalid.k-state-focus,.k-textbox.k-input.k-input-outline.k-invalid.k-state-focused,.k-textbox.k-input.k-input-outline.k-invalid:focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-touched.k-state-focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-touched.k-state-focused,.k-textbox.k-input.k-input-outline.ng-invalid.ng-touched:focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-dirty.k-state-focus,.k-textbox.k-input.k-input-outline.ng-invalid.ng-dirty.k-state-focused,.k-textbox.k-input.k-input-outline.ng-invalid.ng-dirty:focus{
@@ -5381,4 +5382,123 @@
     h1{
                     @extend %fk-typography-feather-heading-1;
       
+}
+    .fk-solid-date-range-picker.k-daterangepicker .k-floating-label-container{
+    border-bottom-style: none;
+            border-left-style: none;
+            border-right-style: none;
+            border-top-style: none;
+        
+}
+    .k-textbox.k-input .k-input-inner.k-state-readonly,.k-textbox.k-input .k-input-inner[readonly]{
+    border-bottom-style: none;
+            border-left-style: none;
+            border-right-style: none;
+            border-top-style: none;
+            outline-style: none;
+            outline-color: transparent;
+            border-bottom-color: transparent;
+            border-left-color: transparent;
+            border-right-color: transparent;
+            border-top-color: transparent;
+        
+}
+    .k-button.k-hover.k-button-solid-primary.k-icon-button,.k-button.k-state-hover.k-button-solid-primary.k-icon-button,.k-button.k-state-hovered.k-button-solid-primary.k-icon-button,.k-button:hover.k-button-solid-primary.k-icon-button{
+    background-color: k-color( primary );
+            background-image: $fk-feather-hover-on-color;
+        
+}
+    .k-button.k-active.k-button-solid-primary.k-icon-button,.k-button.k-state-active.k-button-solid-primary.k-icon-button,.k-button:active.k-button-solid-primary.k-icon-button{
+    background-color: k-color( primary );
+            background-image: $fk-feather-active-on-color;
+        
+}
+    .k-button.k-focus.k-button-solid-primary.k-icon-button,.k-button.k-state-focus.k-button-solid-primary.k-icon-button,.k-button.k-state-focused.k-button-solid-primary.k-icon-button,.k-button:focus.k-button-solid-primary.k-icon-button{
+    background-color: k-color( primary );
+            background-image: $fk-feather-focused-on-color;
+        
+}
+    .k-button.k-disabled.k-button-solid-primary.k-icon-button,.k-button.k-state-disabled.k-button-solid-primary.k-icon-button,.k-button:disabled.k-button-solid-primary.k-icon-button{
+    background-color: $fk-feather-border-light-on-surface;
+            background-image: none;
+        
+}
+    .k-button.k-selected.k-button-solid-primary.k-icon-button{
+    background-color: k-color( app-surface );
+            background-image: $fk-feather-selected-on-surface-gradient;
+        
+}
+    .k-button.k-selected.k-button-solid-primary .k-button-icon.k-icon.k-svg-icon >svg{
+    color: k-color( primary );
+        
+}
+    .k-button.k-selected.k-button-solid-primary{
+    background-color: k-color( app-surface );
+            background-image: $fk-feather-active-on-surface-gradient;
+        
+}
+    .k-input.k-focus.k-input-solid,.k-input.k-state-focus.k-input-solid,.k-input.k-state-focused.k-input-solid,.k-input:focus.k-input-solid{
+                    @extend %fk-effects-feather-focus-outer-on-surface;
+          border-bottom-color: $fk-kendo-input-focus-border;
+            border-left-color: $fk-kendo-input-focus-border;
+            border-right-color: $fk-kendo-input-focus-border;
+            border-top-color: $fk-kendo-input-focus-border;
+        
+}
+    .k-numerictextbox.k-input.k-invalid.k-state-focus-within.k-input-solid,.k-numerictextbox.k-input.ng-invalid.ng-touched.k-state-focus-within.k-input-solid,.k-numerictextbox.k-input.ng-invalid.ng-dirty.k-state-focus-within.k-input-solid,.k-numerictextbox.k-input.k-invalid:focus-within.k-input-solid,.k-numerictextbox.k-input.ng-invalid.ng-touched:focus-within.k-input-solid,.k-numerictextbox.k-input.ng-invalid.ng-dirty:focus-within.k-input-solid{
+                    @extend %fk-effects-feather-focus-invalid-outer;
+      
+}
+    .k-timepicker.k-input.k-disabled .k-input-inner,.k-timepicker.k-input.k-state-disabled .k-input-inner,.k-timepicker.k-input:disabled .k-input-inner{
+    color: $fk-feather-disabled-text-on-surface;
+        
+}
+    .k-popup.k-datetime-container .k-time-list-container .k-time-list-wrapper .k-time-list .k-content.k-scrollable.k-time-container .k-reset .k-item{
+    translate: 0 -33%;
+            line-height: 3;
+            border-bottom-left-radius: $fk-feather-border-radius-full;
+            border-bottom-right-radius: $fk-feather-border-radius-full;
+            border-top-left-radius: $fk-feather-border-radius-full;
+            border-top-right-radius: $fk-feather-border-radius-full;
+        
+}
+    .k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper .k-time-list::before{
+    box-shadow: none;
+        
+}
+    .k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-focus::after,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-state-focus::after,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-state-focused::after,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper:focus::after{
+    background-color: initial;
+            background-image: $fk-feather-hover-on-surface-gradient;
+        
+}
+    .k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-focus .k-time-list::after,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-state-focus .k-time-list::after,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper.k-state-focused .k-time-list::after,.k-popup.k-datetime-container .k-time-tab.k-datetime-wrap .k-time-list-container .k-time-list-wrapper:focus .k-time-list::after{
+    visibility: hidden;
+        
+}
+    .k-popup.k-datetime-container .k-time-list-container .k-time-list-wrapper .k-time-list .k-content.k-scrollable.k-time-container .k-reset .k-item.k-hover,.k-popup.k-datetime-container .k-time-list-container .k-time-list-wrapper .k-time-list .k-content.k-scrollable.k-time-container .k-reset .k-item.k-state-hover,.k-popup.k-datetime-container .k-time-list-container .k-time-list-wrapper .k-time-list .k-content.k-scrollable.k-time-container .k-reset .k-item.k-state-hovered,.k-popup.k-datetime-container .k-time-list-container .k-time-list-wrapper .k-time-list .k-content.k-scrollable.k-time-container .k-reset .k-item:hover{
+    color: k-color( primary );
+            font-weight: 700;
+            aspect-ratio: 1 / 1;
+            text-decoration-line: underline;
+            text-underline-offset: 4px;
+            text-decoration-color: currentColor;
+            text-decoration-thickness: 1px;
+        
+}
+    .k-button .k-button-text{
+    padding-right: 0.25rem;
+            padding-left: 0.25rem;
+        
+}
+    .k-button.k-focus.k-button-outline.k-button-outline-primary.k-icon-button,.k-button.k-state-focus.k-button-outline.k-button-outline-primary.k-icon-button,.k-button.k-state-focused.k-button-outline.k-button-outline-primary.k-icon-button,.k-button:focus.k-button-outline.k-button-outline-primary.k-icon-button{
+                    @extend %fk-effects-feather-focus-outer-on-surface;
+      
+}
+    .k-button.k-button-solid-primary.k-icon-button .k-button-icon.k-icon.k-svg-icon{
+    left: 0px;
+        
+}
+    .k-button.k-button-solid-primary .k-button-icon.k-icon.k-svg-icon{
+    box-sizing: content-box;
+        
 }