@syncfusion/blazor-themes 23.2.5 → 23.2.7

package/SCSS-Themes/highcontrast.scss

@@ -74863,6 +74863,7 @@ $grid-headercell-div-padding: 0 !default;
 $grid-headecell-span-height: 26px !default;
 $grid-headercelldiv-right-align-padding: 0 0 0 10px !default;
 $grid-headercelldiv-padding: 0 10px 0 0 !default;
+$grid-headercelldiv-sort-centeralign-padding-right: 0 !default;
 $grid-headercell-both-border-width: 0 0 0 1px !default;
 $grid-filterbarcell-first-last-child-padding-left: 10px !default;
 $grid-stackedheadercell-botttom-padding: 4px !default;
@@ -77456,6 +77457,22 @@ margin: $grid-group-animator-cell-margin;
       padding: $grid-headercelldiv-padding;
     }
 
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-right: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-left: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
     .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
       @if $grid-skin == 'bootstrap5' {
         padding-left: 8px;
@@ -78417,6 +78434,7 @@ margin: $grid-group-animator-cell-margin;
 
     .e-tooltip-wrap.e-griderror .e-arrow-tip.e-tip-top {
       left: 44%;
+      top: -8px;
     }
 
     .e-normaledit .e-rowcell {
@@ -81604,6 +81622,10 @@ margin: $grid-group-animator-cell-margin;
     }
   }
 
+  .e-spreadsheet .e-ftrchk.e-chkfocus {
+    background-color: $grid-hover-bg-color;
+  }
+
   .e-tooltip-wrap.e-griderror,
   .e-control.e-tooltip-wrap.e-popup.e-griderror {
     background-color: $grid-val-error-bg-color;
@@ -96365,6 +96387,9 @@ $toast-danger-hover-box-shadow: none !default;
 
 $toast-title-font-weight: bold !default;
 
+$toast-close-icon-hover-bg-color: transparent !default;
+$toast-close-icon-hover-color: $selection-font !default;
+
 @include export-module('toast-layout') {
 
   /*! toast layout */
@@ -96847,6 +96872,34 @@ $toast-title-font-weight: bold !default;
         box-shadow: none;
         outline: 0;
       }
+
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
 
     &.e-toast-success {
@@ -99732,15 +99785,15 @@ $pv-eye-icon-margin-top: 3px !default;
     font-size: 18px;
   }
 
-  .e-pv-annotation-color-container .e-btn,
-  .e-pv-annotation-opacity-container .e-btn,
-  .e-pv-annotation-stroke-container .e-btn,
-  .e-pv-custom-annotation-thickness-container .e-btn,
-  .e-pv-custom-annotation-opacity-container .e-btn,
-  .e-pv-annotation-thickness-container .e-btn,
-  .e-pv-annotation-textcolor-container .e-btn,
-  .e-pv-annotation-textalign-container .e-btn,
-  .e-pv-annotation-textprop-container .e-btn {
+  .e-pv-annotation-color-container.e-icon-btn,
+  .e-pv-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-stroke-container.e-icon-btn,
+  .e-pv-custom-annotation-thickness-container.e-icon-btn,
+  .e-pv-custom-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-thickness-container.e-icon-btn,
+  .e-pv-annotation-textcolor-container.e-icon-btn,
+  .e-pv-annotation-textalign-container.e-icon-btn,
+  .e-pv-annotation-textprop-container.e-icon-btn {
     height: $pv-annotation-drop-down-height;
     width: $pv-annotation-drop-down-width;
   }

package/SCSS-Themes/material-dark.scss

@@ -76047,6 +76047,7 @@ $grid-rtl-headercelldiv-padding: 0 .6em 0 1.8em !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 .6em 0 .55em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .6em 0 1.15em !default;
 $grid-headercelldiv-padding: 0 1.8em 0 .6em !default;
+$grid-headercelldiv-sort-centeralign-padding-right: .6em !default;
 $grid-headercelldiv-right-align-padding: 0 .6em 0 1.9em !default;
 $grid-filterbarcell-text-input: 26px !default;
 $grid-summary-cell-line-height: 18px !default;
@@ -78751,6 +78752,22 @@ margin: $grid-group-animator-cell-margin;
       padding: $grid-headercelldiv-padding;
     }
 
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-right: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-left: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
     .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
       @if $grid-skin == 'bootstrap5' {
         padding-left: 8px;
@@ -79712,6 +79729,7 @@ margin: $grid-group-animator-cell-margin;
 
     .e-tooltip-wrap.e-griderror .e-arrow-tip.e-tip-top {
       left: 44%;
+      top: -8px;
     }
 
     .e-normaledit .e-rowcell {
@@ -82899,6 +82917,10 @@ margin: $grid-group-animator-cell-margin;
     }
   }
 
+  .e-spreadsheet .e-ftrchk.e-chkfocus {
+    background-color: $grid-hover-bg-color;
+  }
+
   .e-tooltip-wrap.e-griderror,
   .e-control.e-tooltip-wrap.e-popup.e-griderror {
     background-color: $grid-val-error-bg-color;
@@ -97678,6 +97700,10 @@ $toast-danger-hover-bg-color: #ff5d48 !default;
 $toast-danger-hover-color: $message-font !default;
 $toast-danger-hover-box-shadow: 0 3px 5px -1px rgba($grey-black, .2), 0 6px 10px 0 rgba($grey-black, .14), 0 1px 18px 0 rgba($grey-black, .12) !default;
 
+$toast-close-icon-hover-bg-color: rgba($grey-white, .1) !default;
+$toast-close-icon-hover-color: $grey-dark-font !default;
+$toast-icon-hover-border-radius: 50% !default;
+
 //enddefault
 
 @include export-module('toast-layout') {
@@ -98162,6 +98188,34 @@ $toast-danger-hover-box-shadow: 0 3px 5px -1px rgba($grey-black, .2), 0 6px 10px
         box-shadow: none;
         outline: 0;
       }
+
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
 
     &.e-toast-success {
@@ -101046,15 +101100,15 @@ $pv-eye-icon-margin-top: 3px !default;
     font-size: 18px;
   }
 
-  .e-pv-annotation-color-container .e-btn,
-  .e-pv-annotation-opacity-container .e-btn,
-  .e-pv-annotation-stroke-container .e-btn,
-  .e-pv-custom-annotation-thickness-container .e-btn,
-  .e-pv-custom-annotation-opacity-container .e-btn,
-  .e-pv-annotation-thickness-container .e-btn,
-  .e-pv-annotation-textcolor-container .e-btn,
-  .e-pv-annotation-textalign-container .e-btn,
-  .e-pv-annotation-textprop-container .e-btn {
+  .e-pv-annotation-color-container.e-icon-btn,
+  .e-pv-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-stroke-container.e-icon-btn,
+  .e-pv-custom-annotation-thickness-container.e-icon-btn,
+  .e-pv-custom-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-thickness-container.e-icon-btn,
+  .e-pv-annotation-textcolor-container.e-icon-btn,
+  .e-pv-annotation-textalign-container.e-icon-btn,
+  .e-pv-annotation-textprop-container.e-icon-btn {
     height: $pv-annotation-drop-down-height;
     width: $pv-annotation-drop-down-width;
   }

package/SCSS-Themes/material.scss

@@ -75775,6 +75775,7 @@ $grid-rtl-headercelldiv-padding: 0 .6em 0 1.8em !default;
 $grid-rtl-headercelldiv-chkbox-padding: 0 .6em 0 .55em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .6em 0 1.15em !default;
 $grid-headercelldiv-padding: 0 1.8em 0 .6em !default;
+$grid-headercelldiv-sort-centeralign-padding-right: .6em !default;
 $grid-headercelldiv-right-align-padding: 0 .6em 0 1.9em !default;
 $grid-filterbarcell-text-input: 26px !default;
 $grid-summary-cell-line-height: 18px !default;
@@ -78472,6 +78473,22 @@ margin: $grid-group-animator-cell-margin;
       padding: $grid-headercelldiv-padding;
     }
 
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-right: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-left: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
     .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
       @if $grid-skin == 'bootstrap5' {
         padding-left: 8px;
@@ -79433,6 +79450,7 @@ margin: $grid-group-animator-cell-margin;
 
     .e-tooltip-wrap.e-griderror .e-arrow-tip.e-tip-top {
       left: 44%;
+      top: -8px;
     }
 
     .e-normaledit .e-rowcell {
@@ -82620,6 +82638,10 @@ margin: $grid-group-animator-cell-margin;
     }
   }
 
+  .e-spreadsheet .e-ftrchk.e-chkfocus {
+    background-color: $grid-hover-bg-color;
+  }
+
   .e-tooltip-wrap.e-griderror,
   .e-control.e-tooltip-wrap.e-popup.e-griderror {
     background-color: $grid-val-error-bg-color;
@@ -97393,6 +97415,10 @@ $toast-danger-hover-box-shadow: 0 3px 6px 0 rgba($grey-black, .26) !default;
 
 $toast-title-font-weight: bold !default;
 
+$toast-close-icon-hover-bg-color: $grey-300 !default;
+$toast-close-icon-hover-color: $grey-light-font !default;
+$toast-icon-hover-border-radius: 50% !default;
+
 @include export-module('toast-layout') {
 
   /*! toast layout */
@@ -97875,6 +97901,34 @@ $toast-title-font-weight: bold !default;
         box-shadow: none;
         outline: 0;
       }
+
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
 
     &.e-toast-success {
@@ -100757,15 +100811,15 @@ $pv-eye-icon-margin-top: 3px !default;
     font-size: 18px;
   }
 
-  .e-pv-annotation-color-container .e-btn,
-  .e-pv-annotation-opacity-container .e-btn,
-  .e-pv-annotation-stroke-container .e-btn,
-  .e-pv-custom-annotation-thickness-container .e-btn,
-  .e-pv-custom-annotation-opacity-container .e-btn,
-  .e-pv-annotation-thickness-container .e-btn,
-  .e-pv-annotation-textcolor-container .e-btn,
-  .e-pv-annotation-textalign-container .e-btn,
-  .e-pv-annotation-textprop-container .e-btn {
+  .e-pv-annotation-color-container.e-icon-btn,
+  .e-pv-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-stroke-container.e-icon-btn,
+  .e-pv-custom-annotation-thickness-container.e-icon-btn,
+  .e-pv-custom-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-thickness-container.e-icon-btn,
+  .e-pv-annotation-textcolor-container.e-icon-btn,
+  .e-pv-annotation-textalign-container.e-icon-btn,
+  .e-pv-annotation-textprop-container.e-icon-btn {
     height: $pv-annotation-drop-down-height;
     width: $pv-annotation-drop-down-width;
   }

package/SCSS-Themes/material3-dark.scss

@@ -76529,6 +76529,7 @@ $grid-rtl-headercelldiv-chkbox-padding: 0 .5em 0 2.8em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .5em 0 2.8em !default;
 $grid-ungroup-rtl-padding-right: -7px !default;
 $grid-headercelldiv-padding: 0 20px 0 8px !default;
+$grid-headercelldiv-sort-centeralign-padding-right: 8px !default;
 $grid-headercell-div-padding: 0 .4em !default;
 $grid-group-text-width: auto !default;
 $grid-grouptopleftcell-border-top: 2px solid !default;
@@ -78972,6 +78973,22 @@ margin: $grid-group-animator-cell-margin;
       padding: $grid-headercelldiv-padding;
     }
 
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-right: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-left: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
     .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
       @if $grid-skin == 'bootstrap5' {
         padding-left: 8px;
@@ -79933,6 +79950,7 @@ margin: $grid-group-animator-cell-margin;
 
     .e-tooltip-wrap.e-griderror .e-arrow-tip.e-tip-top {
       left: 44%;
+      top: -8px;
     }
 
     .e-normaledit .e-rowcell {
@@ -83120,6 +83138,10 @@ margin: $grid-group-animator-cell-margin;
     }
   }
 
+  .e-spreadsheet .e-ftrchk.e-chkfocus {
+    background-color: $grid-hover-bg-color;
+  }
+
   .e-tooltip-wrap.e-griderror,
   .e-control.e-tooltip-wrap.e-popup.e-griderror {
     background-color: $grid-val-error-bg-color;
@@ -97935,6 +97957,10 @@ $toast-danger-hover-bg-color: rgba($danger-dark) !default;
 $toast-danger-hover-color: rgba($danger-bg-color) !default;
 $toast-danger-hover-box-shadow: rgba($shadow) !default;
 
+$toast-close-icon-hover-bg-color: rgba($grey-white, .18) !default;
+$toast-close-icon-hover-color: rgba($on-primary) !default;
+$toast-icon-hover-border-radius: 50% !default;
+
 // Toast Type Definitions End
 //icon Variable
 $toast-close-icon: '\e7e7' !default;
@@ -98427,6 +98453,34 @@ $toast-warning-icon: '\e88b' !default;
         box-shadow: none;
         outline: 0;
       }
+
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
 
     &.e-toast-success {
@@ -101310,15 +101364,15 @@ $pv-search-btn-width-big: 32px !default;
     font-size: 18px;
   }
 
-  .e-pv-annotation-color-container .e-btn,
-  .e-pv-annotation-opacity-container .e-btn,
-  .e-pv-annotation-stroke-container .e-btn,
-  .e-pv-custom-annotation-thickness-container .e-btn,
-  .e-pv-custom-annotation-opacity-container .e-btn,
-  .e-pv-annotation-thickness-container .e-btn,
-  .e-pv-annotation-textcolor-container .e-btn,
-  .e-pv-annotation-textalign-container .e-btn,
-  .e-pv-annotation-textprop-container .e-btn {
+  .e-pv-annotation-color-container.e-icon-btn,
+  .e-pv-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-stroke-container.e-icon-btn,
+  .e-pv-custom-annotation-thickness-container.e-icon-btn,
+  .e-pv-custom-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-thickness-container.e-icon-btn,
+  .e-pv-annotation-textcolor-container.e-icon-btn,
+  .e-pv-annotation-textalign-container.e-icon-btn,
+  .e-pv-annotation-textprop-container.e-icon-btn {
     height: $pv-annotation-drop-down-height;
     width: $pv-annotation-drop-down-width;
   }

package/SCSS-Themes/material3.scss

@@ -76612,6 +76612,7 @@ $grid-rtl-headercelldiv-chkbox-padding: 0 .5em 0 2.8em !default;
 $grid-bigger-rtl-headercelldiv-chkbox-padding: 0 .5em 0 2.8em !default;
 $grid-ungroup-rtl-padding-right: -7px !default;
 $grid-headercelldiv-padding: 0 20px 0 8px !default;
+$grid-headercelldiv-sort-centeralign-padding-right: 8px !default;
 $grid-headercell-div-padding: 0 .4em !default;
 $grid-group-text-width: auto !default;
 $grid-grouptopleftcell-border-top: 2px solid !default;
@@ -79055,6 +79056,22 @@ margin: $grid-group-animator-cell-margin;
       padding: $grid-headercelldiv-padding;
     }
 
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-right: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell[aria-sort="none"],
+    &.e-rtl .e-gridheader .e-sortfilter .e-centeralign.e-headercell:not([aria-sort]) {
+      .e-headercelldiv,
+      .e-stackedheadercelldiv {
+        padding-left: $grid-headercelldiv-sort-centeralign-padding-right;
+      }
+    }
+
     .e-gridheader .e-headercell .e-headercelldiv.e-headerchkcelldiv {
       @if $grid-skin == 'bootstrap5' {
         padding-left: 8px;
@@ -80016,6 +80033,7 @@ margin: $grid-group-animator-cell-margin;
 
     .e-tooltip-wrap.e-griderror .e-arrow-tip.e-tip-top {
       left: 44%;
+      top: -8px;
     }
 
     .e-normaledit .e-rowcell {
@@ -83203,6 +83221,10 @@ margin: $grid-group-animator-cell-margin;
     }
   }
 
+  .e-spreadsheet .e-ftrchk.e-chkfocus {
+    background-color: $grid-hover-bg-color;
+  }
+
   .e-tooltip-wrap.e-griderror,
   .e-control.e-tooltip-wrap.e-popup.e-griderror {
     background-color: $grid-val-error-bg-color;
@@ -98018,6 +98040,10 @@ $toast-danger-hover-bg-color: rgba($danger-dark) !default;
 $toast-danger-hover-color: rgba($danger-bg-color) !default;
 $toast-danger-hover-box-shadow: rgba($shadow) !default;
 
+$toast-close-icon-hover-bg-color: rgba($grey-white, .18) !default;
+$toast-close-icon-hover-color: rgba($on-primary) !default;
+$toast-icon-hover-border-radius: 50% !default;
+
 // Toast Type Definitions End
 //icon Variable
 $toast-close-icon: '\e7e7' !default;
@@ -98510,6 +98536,34 @@ $toast-warning-icon: '\e88b' !default;
         box-shadow: none;
         outline: 0;
       }
+
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
 
     &.e-toast-success {
@@ -101393,15 +101447,15 @@ $pv-search-btn-width-big: 32px !default;
     font-size: 18px;
   }
 
-  .e-pv-annotation-color-container .e-btn,
-  .e-pv-annotation-opacity-container .e-btn,
-  .e-pv-annotation-stroke-container .e-btn,
-  .e-pv-custom-annotation-thickness-container .e-btn,
-  .e-pv-custom-annotation-opacity-container .e-btn,
-  .e-pv-annotation-thickness-container .e-btn,
-  .e-pv-annotation-textcolor-container .e-btn,
-  .e-pv-annotation-textalign-container .e-btn,
-  .e-pv-annotation-textprop-container .e-btn {
+  .e-pv-annotation-color-container.e-icon-btn,
+  .e-pv-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-stroke-container.e-icon-btn,
+  .e-pv-custom-annotation-thickness-container.e-icon-btn,
+  .e-pv-custom-annotation-opacity-container.e-icon-btn,
+  .e-pv-annotation-thickness-container.e-icon-btn,
+  .e-pv-annotation-textcolor-container.e-icon-btn,
+  .e-pv-annotation-textalign-container.e-icon-btn,
+  .e-pv-annotation-textprop-container.e-icon-btn {
     height: $pv-annotation-drop-down-height;
     width: $pv-annotation-drop-down-width;
   }

package/SCSS-Themes/notifications/toast/bootstrap-dark.scss

@@ -104,6 +104,9 @@ $toast-danger-hover-color: $toast-danger-color !default;
 $toast-danger-hover-border-color: $brand-danger !default;
 $toast-danger-hover-box-shadow: 0 6px 12px rgba($base-font, .5) !default;
 
+$toast-close-icon-hover-bg-color: transparent !default;
+$toast-close-icon-hover-color: $grey-dark-font !default;
+
 //enddefault
 
 @include export-module('toast-layout') {
@@ -588,6 +591,34 @@ $toast-danger-hover-box-shadow: 0 6px 12px rgba($base-font, .5) !default;
         box-shadow: none;
         outline: 0;
       }
+
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
 
     &.e-toast-success {

package/SCSS-Themes/notifications/toast/bootstrap.scss

@@ -104,6 +104,9 @@ $toast-danger-hover-border-color: #ebccd1 !default;
 $toast-danger-hover-box-shadow: 0 3px 6px 0 !default;
 $toast-title-font-weight: bold !default;
 
+$toast-close-icon-hover-bg-color: transparent !default;
+$toast-close-icon-hover-color: rgba($base-font, .8) !default;
+
 @include export-module('toast-layout') {
 
   /*! toast layout */
@@ -586,6 +589,34 @@ $toast-title-font-weight: bold !default;
         box-shadow: none;
         outline: 0;
       }
+
+      &.e-blazor-toast-close-icon:focus,
+      &.e-blazor-toast-close-icon:hover {
+        @if $skin-name == 'Material3' {
+          background: $toast-close-icon-hover-bg-color;
+        }
+        @else {
+          background-color: $toast-close-icon-hover-bg-color;
+        }
+        color: $toast-close-icon-hover-color;
+      }
+    }
+    
+    .e-toast-close-icon.e-icons:hover,
+    .e-toast-close-icon.e-icons:focus{
+      @if $skin-name == 'Material3' {
+        background: $toast-close-icon-hover-bg-color;
+        border-radius: $toast-icon-hover-border-radius;
+        height: 32px;
+        margin-top: -6px;
+      }
+      @else {
+        background-color: $toast-close-icon-hover-bg-color;
+      }
+      @if $skin-name == 'material' {
+        border-radius: $toast-icon-hover-border-radius;
+      }
+      color: $toast-close-icon-hover-color;
     }
 
     &.e-toast-success {