@syncfusion/blazor-themes 27.1.48 → 27.1.51

package/SCSS-Themes/bootstrap5.3.scss

@@ -4887,9 +4887,7 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
 
   .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
     border-color: transparent;
-    @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'highcontrast' {
-      background: none;
-    }
+    background: none;
   }
 }
 
@@ -31212,6 +31210,13 @@ $cbox-border-style: solid !default;
           }
         }
       }
+
+      &:hover .e-checkbox:focus + .e-frame.e-check {
+        @if $theme-name == 'fluent2-highcontrast' {
+          background-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */
+          border-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
     }
   }
 }
@@ -36147,13 +36152,11 @@ $slider-hover-handle-border-color: $primary-border-color-hover !default;
           @if ($skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'Material3') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
           }
-          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
-            @if ($skin-name == 'tailwind') {
-              left: calc(50%);
-            }
-            @else {
-              @include alignment(4px, calc(50% - 2px), 'vertical');
-            }
+          @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'FluentUI' or $skin-name == 'Material3' or $skin-name == 'fluent2' ) {
+            @include alignment(4px, calc(50% - 2px), 'vertical');
+          }
+          @if ($skin-name == 'tailwind') {
+            @include alignment(4px, calc(50%), 'vertical');
           }
           @if ($skin-name == 'highcontrast' or $skin-name == 'highcontrast-light') {
             @include alignment(6px, calc(50% - 3px), 'vertical');
@@ -38965,7 +38968,7 @@ $cpicker-recent-color-tile-border: $border-light !default;
           color: $cpicker-handler-tooltip-color;
         }
         @else if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
-          background-color: $btn-hover-bgcolor !important; /* stylelint-disable-line declaration-no-important */
+          background-color: $btn-hover-bgcolor;
           color: $cpicker-handler-tooltip-color;
         }
       }
@@ -41915,7 +41918,7 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
         }
 
         &::before {
-          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' {
+          @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' or $skin-name == 'tailwind' {
             background-color: $radio-btn-disabled-not-checked-bg-color;
           }
           @else {
@@ -44002,6 +44005,10 @@ $listview-template-focused-multiline-content-color: $content-text-color-selected
         }
       }
 
+      &.e-virtualization .e-list-container{
+        overflow: unset;
+      }
+
       & .e-list-container {
         overflow: hidden;
         position: relative;
@@ -50137,41 +50144,6 @@ $dialog-enable-resize-padding-bottom: 15px !default;
   .e-footer-content {
     background-color: $dialog-footer-bg-color;
 
-    @if $skin-name == 'material' or $skin-name == 'material-dark' {
-      .e-btn.e-primary {
-        background: none;
-        box-shadow: none;
-        color: $dialog-primary-button-color;
-      }
-
-      .e-btn:not(.e-primary) {
-        background: none;
-        box-shadow: none;
-        color: $dialog-secondary-button-color;
-      }
-    }
-
-    @if $skin-name == 'material' or $skin-name == 'material-dark' {
-      .e-btn.e-primary:not([DISABLED]):focus-visible,
-      .e-btn.e-primary:not([DISABLED]):focus {
-        background: $dialog-footer-primary-focus-btn-bg-color;
-      }
-      .e-btn.e-primary:not([DISABLED]):hover {
-        background: $dialog-footer-primary-hover-btn-bg-color;
-      }
-      .e-btn.e-primary:not([DISABLED]):active {
-        background: $dialog-footer-primary-active-btn-bg-color;
-      }
-      .e-btn:not([DISABLED]):focus-visible,
-      .e-btn:not(.e-primary):not([DISABLED]):focus,
-      .e-btn:not([DISABLED]):hover {
-        background: $dialog-footer-flat-hover-btn-bg-color;
-      }
-      .e-btn:not([DISABLED]):active {
-        background: $dialog-footer-flat-active-btn-bg-color;
-      }
-    }
-
     @if $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or  $skin-name == 'Material3' or $skin-name == 'tailwind' or $skin-name == 'FluentUI' or $skin-name == 'fluent2' {
       .e-btn.e-primary.e-flat:not([DISABLED]) {
         background: $dialog-footer-btn-bg-color;
@@ -58704,7 +58676,7 @@ $treeview-rtl-icon-margin: 0 -20px 0 0 !default;
 $treeview-icon-padding: 0px !default;
 $treeview-text-padding: 0 8px !default;
 $treeview-text-margin: 0 !default;
-$treeview-image-size: 16px !default;
+$treeview-image-size: 18px !default;
 $treeview-image-margin: 0 0 0 8px !default;
 $treeview-navigable-icon-image-anchor-margin-bigger: 0 12px 0 8px !default;
 $treeview-navigable-icon-image-anchor-margin-reverse-bigger: 0 6px 0 10px !default;
@@ -58712,7 +58684,7 @@ $treeview-navigable-icon-image-anchor-margin: 0 8px 0 0 !default;
 $treeview-navigable-icon-image-anchor-margin-reverse: 0 0 0 8px !default;
 $treeview-navigable-rtl-margin-reverse: 0 12px 0 0 !default;
 $treeview-rtl-image-margin: 0 8px 0 0 !default;
-$treeview-image-text-padding: 0 8px !default;
+$treeview-image-text-padding: 0 12px !default;
 $treeview-icon-image-margin: 0 0 0 8px !default;
 $treeview-rtl-icon-image-margin: 0 8px 0 0 !default;
 $treeview-check-margin: 0 0 0 8px !default;
@@ -67151,6 +67123,10 @@ $ddl-close-down-icon-left: 35px !default;
   display: block;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper:not(.e-control-container) .e-multi-select-wrapper.e-down-icon .e-chips-collection {
+  margin-right: 30px;
+}
+
 .e-multi-select-wrapper .e-multi-hidden {
   border: 0;
   height: 0;
@@ -69182,6 +69158,7 @@ $listbox-dragged-item-text-color: $content-text-color-dragged !default;
       }
     }
 
+    & .e-list-wrap:focus-visible,
     &:focus {
       outline: none;
     }
@@ -83845,28 +83822,18 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     .e-bigger &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
-    &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground,
-    .e-bigger &.e-rtl td.e-rowcell.e-cellselectionbackground,
-    &.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
+    &.e-bothlines.e-bigger.e-rtl td.e-rowcell.e-cellselectionbackground {
       @if $grid-skin == 'material3' {
         border: 1px solid rgba($content-text-color);
       }
     }
 
-    .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
-    .e-bigger & td.e-cellselectionbackground,
-    &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
-    &.e-bigger td.e-cellselectionbackground {
-      @if $grid-skin == 'material3' {
-        padding-bottom: 13px;
-        @include grid-padding-left-right(11.5px, 11.5px);
-      }
-    }
-
-    .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
-    &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
+    .e-bigger &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
+    &.e-bigger:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
       @if $grid-skin == 'material3' {
-        padding-top: 13px;
+        padding-top: 0;
+        padding-bottom: 0;
+        @include grid-padding-left-right(12px, 12px);
       }
     }
 
@@ -84256,7 +84223,12 @@ $grid-checkmark-color: $primary-text-color !default;
       /* stylelint-enable */
 
       .e-dlg-content {
-        padding: 24px 27px;
+        @if $grid-skin == 'fluent2' {
+          padding: 24px 27px;
+        }
+        @else {
+          padding: 8px 16px 8px 8px;
+        }
         overflow-y: hidden;
       }
 
@@ -84506,6 +84478,9 @@ $grid-checkmark-color: $primary-text-color !default;
   
         & .e-res-apply-btn:disabled {
           color: $grid-btn-disabled-bgcolor;
+          @if $grid-skin == 'fluent2' {
+            color: $primary-text-disabled;
+          }
         }
         & .e-btn {
           @if $grid-skin != 'fluent2' {
@@ -85108,7 +85083,7 @@ $grid-checkmark-color: $primary-text-color !default;
   }
 
   .e-grid-popup {
-    position: relative;
+    position: absolute;
   }
 
   #{&}.e-grid,
@@ -85604,6 +85579,18 @@ $grid-checkmark-color: $primary-text-color !default;
       }
     }
 
+    &:not(.sf-grid) .e-res-toolbar .e-toolbar-items .e-search-wrapper {
+      & .e-search-icon {
+        padding: $grid-res-toolbar-search-wrapper-icon-padding;
+        @if $grid-skin == 'bootstrap5.3' {
+          padding: 9px 8px;
+        }
+        @if $grid-skin == 'bootstrap4' {
+          padding: 9px 9.5px;
+        }
+      }
+    }
+
     .e-res-toolbar {
       border-bottom: 1px solid;
       border-bottom-color: $grid-header-border-color;
@@ -85704,18 +85691,6 @@ $grid-checkmark-color: $primary-text-color !default;
           }
         }
 
-        &:not(.sf-grid).e-search-wrapper {
-          & .e-search-icon {
-            padding: $grid-res-toolbar-search-wrapper-icon-padding;
-            @if $grid-skin == 'bootstrap5.3' {
-              padding: 9px 8px;
-            }
-            @if $grid-skin == 'bootstrap4' {
-              padding: 9px 9.5px;
-            }
-          }
-        }
-
         & .e-responsive-right {
           & .e-search-wrapper {
             padding-left: 0;
@@ -85912,8 +85887,11 @@ $grid-checkmark-color: $primary-text-color !default;
       }
     }
 
-    &.e-default .e-grouptopleftcell {
-      border-top: $grid-grouptopleftcell-border-top;
+    &.e-default {
+      .e-grouptopleftcell,
+      .e-rowdragheader {
+        border-top: $grid-grouptopleftcell-border-top;
+      }
     }
 
     &.e-default .e-gridheader .e-headercell.e-firstheader,
@@ -85921,10 +85899,13 @@ $grid-checkmark-color: $primary-text-color !default;
       border-left: 1px solid;
     }
 
-    &.e-default.e-verticallines .e-grouptopleftcell,
-    &.e-default.e-bothlines .e-grouptopleftcell,
-    &.e-default.e-hidelines .e-grouptopleftcell {
-      border-top-width: 0;
+    &.e-default.e-verticallines,
+    &.e-default.e-bothlines,
+    &.e-default.e-hidelines {
+      .e-grouptopleftcell,
+      .e-rowdragheader {
+        border-top-width: 0;
+      }
     }
 
     &.e-default.e-verticallines,
@@ -86185,6 +86166,12 @@ $grid-checkmark-color: $primary-text-color !default;
       width: auto;
     }
 
+    .e-rowcell.e-gridchkbox {
+      @if $grid-skin == 'fluent' {
+        padding-left: 8px;
+      }
+    }
+
     &.e-left-shadow,
     &.e-rtl.e-left-shadow,
     &.e-rtl.e-default.e-left-shadow,
@@ -87128,13 +87115,12 @@ $grid-checkmark-color: $primary-text-color !default;
       font-weight: $grid-selection-font-weight;
     }
 
-    &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground,
+    &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell),
     td.e-cellselectionbackground {
       font-weight: $grid-selection-font-weight;
       @if $grid-skin == 'material3' {
-        border: 1px solid rgba($content-text-color);
         padding-bottom: 7px;
-        @include grid-padding-left-right(7.5px, 7.5px);
+        @include grid-padding-left-right(8px, 8px);
       }
     }
 
@@ -87145,14 +87131,13 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     &.e-bothlines td.e-rowcell.e-cellselectionbackground,
-    &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground,
-    &.e-rtl td.e-rowcell.e-cellselectionbackground {
+    &.e-bothlines.e-rtl td.e-rowcell.e-cellselectionbackground {
       @if $grid-skin == 'material3' {
         border: 1px solid rgba($content-text-color);
       }
     }
 
-    &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground {
+    &:not(.e-row-responsive) .e-gridcontent tr.e-row:first-child td.e-cellselectionbackground:not(.e-gridchkbox-cell) {
       @if $grid-skin == 'material3' {
         padding-top: 7px;
       }
@@ -87418,6 +87403,12 @@ $grid-checkmark-color: $primary-text-color !default;
       padding: $grid-columnchooser-toolbardiv-padding;
     }
 
+    &:not(.sf-grid) .e-toolbar-item.e-cc.e-ccdiv.e-cc-toolbar {
+      @if $grid-skin == 'fluent' {
+        padding-bottom: 1px;
+      }
+    }
+
     .e-edit-dialog {
       min-height: 350px;
       .e-dlg-content {
@@ -88239,12 +88230,20 @@ $grid-checkmark-color: $primary-text-color !default;
         @include wrap-styles;
       }
 
+      & .e-cloneproperties.e-draganddrop.e-grid .e-rowcell {
+        white-space: nowrap;
+      }
+
       & .e-stackedheader .e-columnheader {
         .e-stackedheadercelldiv,
         .e-headercelldiv {
           max-height: $grid-rowcell-wrap-max-height;
         }
       }
+
+      & .e-checkbox-wrapper {
+        vertical-align: middle;
+      }
     }
 
     &.e-wrap .e-columnheader {
@@ -88417,6 +88416,7 @@ $grid-checkmark-color: $primary-text-color !default;
     }
 
     &.sf-grid {
+      
       span.e-ungroupbutton.e-icons {
         margin-left: $grid-group-ungroupicon-margin-left;
         @if $grid-skin == 'material3' {
@@ -88791,7 +88791,8 @@ $grid-checkmark-color: $primary-text-color !default;
 }
 
 @if $grid-skin == 'fluent2' {
-  .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item {
+  .e-grid-menu.e-grid-column-menu.e-contextmenu-wrapper .e-ul .e-menu-item,
+  .e-grid-menu.e-contextmenu-container .e-ul .e-menu-item {
     padding: 0 6px;
   }
   .e-grid-menu.e-grid-column-menu .e-colmenu.e-contextmenu {
@@ -89095,10 +89096,12 @@ $grid-checkmark-color: $primary-text-color !default;
 
     .e-verticallines tr th,
     .e-grouptopleftcell,
+    .e-rowdragheader,
     .e-gridpopup .e-content,
     .e-filterbarcell,
     .e-filterbarcelldisabled,
     &.e-default .e-grouptopleftcell,
+    &.e-default .e-rowdragheader,
     .e-headercell,
     .e-summarycell,
     .e-detailheadercell,
@@ -89703,7 +89706,8 @@ $grid-checkmark-color: $primary-text-color !default;
   }
 
   @if $grid-skin == 'fluent2' {
-    .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label {
+    .e-grid-menu .e-menu-item.e-focused .e-css.e-checkbox-wrapper .e-label,
+    .e-grid-menu .e-menu-item.e-focused .e-wrapper.e-checkbox-wrapper .e-label {
       color: $flyout-text-color-hover;
     }
   }
@@ -97087,6 +97091,22 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         margin-block-start: 10px;
       }
 
+      .e-content ul {
+        list-style-type: disc;
+      }
+
+      .e-content ul ul,
+      .e-content ol ul {
+        list-style-type: circle;
+      }
+
+      .e-content ul ul ul,
+      .e-content ol ul ul,
+      .e-content ul ol ul,
+      .e-content ol ol ul {
+        list-style-type: square;
+      }
+
       .e-content h1 {
         font-size: 2.857em;
         font-weight: 600;
@@ -97155,7 +97175,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         word-break: inherit;
         word-wrap: break-word;
 
-        @if $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+        @if $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
           background-color: $rte-pre-bg-color;
         }
       }
@@ -98996,6 +99016,12 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
             color: $rte-drop-btn-active-color;
           }
         }
+
+        .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
       }
 
       .e-toolbar-extended {
@@ -99022,6 +99048,12 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
           background: $rte-drop-btn-active-bg;
         }
 
+        .e-toolbar-item .e-tbar-btn:hover {
+          @if $theme-name == 'bootstrap5.3' {
+            color: $rte-drop-btn-active-color;
+          }
+        }
+
         @if $skin-name == 'bootstrap5' {
           .e-toolbar-item .e-tbar-btn:focus,
           .e-toolbar-item .e-tbar-btn:hover {
@@ -99040,7 +99072,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       background: transparent;
       color: transparent;
     }
-    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $skin-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
+    @if $skin-name == 'Material3'  or $skin-name == 'fluent2' or $theme-name == 'fluent2-highcontrast' or $skin-name == 'fluent2-dark' {
       ::selection {
         color: $rte-selection-color;
         background: $rte-selection-bg;
@@ -99158,7 +99190,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         .e-rte-list-primary-content {
 
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -99178,7 +99210,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         .e-caret {
 
           &:hover {
-            @if $skin-name == 'fluent2-highcontrast' {
+            @if $theme-name == 'fluent2-highcontrast' {
               background: $rte-split-btn-span-active-bg;
             }
             @else {
@@ -99240,7 +99272,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
               justify-content: center;
             }
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -99251,7 +99283,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
 
           .e-caret {
             &:hover {
-              @if $skin-name == 'fluent2-highcontrast' {
+              @if $theme-name == 'fluent2-highcontrast' {
                 background: $rte-split-btn-span-active-bg;
               }
               @else {
@@ -99545,8 +99577,14 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
       }
     }
   }
+  
   .e-richtexteditor .e-rte-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn.e-active .e-icons {
-    color: $rte-tlbar-expand-active;
+    @if $theme-name == 'fluent2-highcontrast' {
+      color: $rte-drop-btn-active-color;
+    }
+    @else {
+      color: $rte-tlbar-expand-active;
+    }
   }
 
   .e-rte-emojipicker-popup.e-popup.e-popup-open {
@@ -137751,6 +137789,8 @@ $aiassist-header-height: 46px !default;
 $aiassist-icon-height: 30px !default;
 $aiassist-icon-width: 30px !default;
 $send-icon-size: 14px !default;
+$send-icon-bottom: 9px !default;
+$send-icon-bigger-bottom: 11px !default;
 $aiassist-bigger-header-height: 50px !default;
 $aiassist-bigger-icon-height: 40px !default;
 $aiassist-bigger-icon-width: 40px !default;
@@ -137791,63 +137831,86 @@ $rating-selected-bg-color: $rating-selected-color !default;
 $send-icon-color: $icon-color !default;
 $send-icon-disabled-color: $icon-color-disabled !default;
 $prompt-text-border-color: $flyout-border !default;
+$tbar-header-btn-focus-box-shadow: $secondary-shadow-focus !default;
+$tbar-header-hover-bg-color: transparent !default;
 
 @include export-module('aiassistview-bigger') {
   .e-bigger.e-aiassistview,
   .e-bigger .e-aiassistview {
     .e-view-header {
       height: $aiassist-bigger-header-height;
+      .e-toolbar {
+        .e-toolbar-items {
+          .e-toolbar-left {
+            height: calc($aiassist-bigger-header-height - 1px);
+          }
+          .e-toolbar-item {
+            &.e-assist-view-header,
+            &.e-custom-view-header {
+              @if ($skin-name == 'highcontrast') {
+                // To apply box-shadow styling during keyboard navigation
+                padding: 1.5px;
+              }
+              @else {
+                padding: 0;
+              }
+              .e-tbar-btn {
+                padding: 0;
+                .e-btn-icon {
+                  padding: 4px 4px 4px 2px;
+                }
+              }
+            }
+          }
+        }
+      }
     }
     .e-view-content {
       height: calc(100% - $aiassist-bigger-header-height);
     }
-    .e-views {
-      .e-prompt-icon {
-        min-height: $aiassist-bigger-icon-height;
-      }
-      .e-output-icon {
-        height: $aiassist-bigger-icon-height;
-      }
-      .e-prompt-icon,
-      .e-output-icon {
-        min-width: $aiassist-bigger-icon-width;
-      }
-      .e-loading-body,
-      .e-content-body,
-      .e-loading-footer {
-        padding: 2px 0 0 10px;
-      }
-      .e-content-container {
-        font-size: 16px;
-        .e-prompt-text {
-          padding: $prompt-text-bigger-padding;
-          line-height: 22px;
-        }
+    .e-prompt-icon {
+      min-height: $aiassist-bigger-icon-height;
+    }
+    .e-output-icon {
+      height: $aiassist-bigger-icon-height;
+    }
+    .e-prompt-icon,
+    .e-output-icon {
+      min-width: $aiassist-bigger-icon-width;
+    }
+    .e-loading-body,
+    .e-content-body,
+    .e-loading-footer {
+      padding: 6px 0 0 6px;
+    }
+    .e-prompt-text {
+      padding: $prompt-text-bigger-padding;
+      line-height: 22px;
+    }
+    .e-content-container {
+      font-size: 16px;
+    }
+    .e-suggestion-header {
+      font-size: 16px;
+      font-weight: $suggesstions-header-bigger-font-weight;
+      margin-bottom: 15px;
+    }
+    .e-suggestions {
+      &.e-suggestion-item-template ul li {
+        padding: 0;
       }
-      .e-suggestions {
-        &.e-suggestion-item-template ul li {
-          padding: 0;
-        }
-        .e-suggestion-header {
-          font-size: 16px;
-          font-weight: $suggesstions-header-bigger-font-weight;
-          margin-bottom: 15px;
-        }
-        ul {
-          li {
-            line-height: 22px;
-            font-weight: $suggesstions-bigger-font-weight;
-            padding: $suggesstions-bigger-list-padding;
-            margin: $suggesstions-bigger-list-margin;
-          }
-        }
+      li {
+        line-height: 22px;
+        font-weight: $suggesstions-bigger-font-weight;
+        padding: $suggesstions-bigger-list-padding;
+        margin: $suggesstions-bigger-list-margin;
       }
     }
+    .e-assist-send {
+      font-size: $send-icon-size-bigger;
+      bottom: $send-icon-bigger-bottom;
+    }
     .e-footer {
-      .e-assist-send {
-        font-size: $send-icon-size-bigger;
-        bottom: 9px;
-      }
       .e-input-group.e-control-wrapper.e-multi-line-input {
         .e-textarea {
           min-height: 38px;
@@ -137856,6 +137919,11 @@ $prompt-text-border-color: $flyout-border !default;
             min-height: 28px;
           }
         }
+        &.e-rtl .e-textarea {
+          @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
+            padding: 6px 16px 6px 12px;
+          }
+        }
       }
     }
     .e-stop-response.e-btn-active {
@@ -137867,13 +137935,24 @@ $prompt-text-border-color: $flyout-border !default;
       font-size: $response-stopper-bigger-font-size;
     }
     &.e-rtl {
-      .e-views {
-        .e-suggestions {
-          li {
-            margin: $suggesstions-bigger-list-margin-rtl;
+      .e-view-header .e-toolbar-item {
+        &.e-assist-view-header,
+        &.e-custom-view-header {
+          .e-tbar-btn .e-btn-icon {
+            padding: 4px 2px 4px 4px;
           }
         }
       }
+      .e-suggestions {
+        li {
+          margin: $suggesstions-bigger-list-margin-rtl;
+        }
+      }
+      .e-loading-body,
+      .e-content-body,
+      .e-loading-footer {
+        padding: 6px 6px 0 0;
+      }
     }
   }
 }
@@ -137901,14 +137980,29 @@ $prompt-text-border-color: $flyout-border !default;
           width: 100%;
           border-radius: 4px;
         }
-        .e-tbar-btn {
-          padding: 0;
+        &.e-assist-view-header,
+        &.e-custom-view-header {
+          @if ($skin-name == 'highcontrast') {
+            // To apply box-shadow styling during keyboard navigation
+            padding: 1px;
+          }
+          @else {
+            padding: 0;
+          }
+          .e-tbar-btn {
+            padding: 0;
+            .e-btn-icon {
+              padding: 4px 4px 4px 2px;
+            }
+          }
+        }
+        &.e-active .e-btn {
+          cursor: pointer;
         }
       }
-    }
-    .e-view-header .e-toolbar-item.e-active .e-btn {
-      border-radius: 0;
-      cursor: pointer;
+      .e-toolbar .e-toolbar-items .e-toolbar-left {
+        height: calc($aiassist-header-height - 1px);
+      }
     }
     .e-view-container,
     .e-footer {
@@ -137958,36 +138052,94 @@ $prompt-text-border-color: $flyout-border !default;
       }
       .e-toolbar .e-toolbar-item.e-assist-view-header .e-tbar-btn .e-tbar-btn-text,
       .e-toolbar .e-toolbar-item.e-custom-view-header .e-tbar-btn .e-tbar-btn-text {
-        @if $theme-name == 'highcontrast' {
-          padding: 6px 0 6px 5px;
-        }
-        @else {
-          padding: 6px 0 6px 2px;
-        }
+        padding: 6px 2px;
       }
     }
-    .e-views {
+    .e-output-container {
+      width: 90%;
       display: flex;
-      justify-content: space-around;
-      .e-output-container {
-        width: 90%;
-        display: flex;
-        align-self: flex-start;
-        margin: 10px 0;
+      align-self: flex-start;
+      margin: 10px 0;
+    }
+    .e-prompt-icon {
+      margin: 0 0 0 8px;
+      min-height: $aiassist-icon-height;
+    }
+    .e-output-icon {
+      height: $aiassist-icon-height;
+      margin: 0 4px 0 8px;
+    }
+    .e-prompt-icon,
+    .e-output-icon {
+      border-radius: 50%;
+      min-width: $aiassist-icon-width;
+    }
+    .e-loading-body,
+    .e-content-body,
+    .e-loading-footer {
+      padding: 2px 0 0 6px;
+    }
+    .e-content-container {
+      margin-top: 16px;
+      font-size: 14px;
+      justify-content: space-between;
+    }
+    .e-prompt-text {
+      white-space: pre-wrap;
+      height: fit-content;
+      border-radius: $prompt-text-border-radius;
+      padding: $prompt-text-padding;
+      line-height: 20px;
+    }
+    .e-content-footer,
+    .e-prompt-toolbar {
+      opacity: 0;
+    }
+    .e-prompt-container {
+      gap: 2px;
+      align-self: flex-end;
+      max-width: 70%;
+      margin-bottom: 5px;
+      flex-direction: column;
+      &:hover .e-assist-edit-icon {
+        opacity: 1;
+        cursor: pointer;
       }
-      .e-prompt-icon {
-        margin: 0 8px;
-        min-height: $aiassist-icon-height;
+    }
+    .e-suggestion-header {
+      font-size: 14px;
+      font-weight: $suggesstions-header-font-weight;
+      margin: 0 2px 8px 8px;
+      text-align: right;
+    }
+    .e-suggestions {
+      width: 100%;
+      &.e-suggestion-item-template li {
+        padding: 0;
       }
-      .e-output-icon {
-        height: $aiassist-icon-height;
-        margin-left: 10px;
+      ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: end;
       }
-      .e-prompt-icon,
-      .e-output-icon {
-        border-radius: 50%;
-        min-width: $aiassist-icon-width;
+      li {
+        line-height: 20px;
+        font-weight: $suggesstions-font-weight;
+        padding: $suggesstions-list-padding;
+        margin: $suggesstions-list-margin;
+        border-radius: $suggesstions-list-border-radius;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
+    }
+    .e-views {
+      display: flex;
+      justify-content: space-around;
       .e-content-body {
         line-height: 25px;
         border-radius: 4px;
@@ -138073,85 +138225,36 @@ $prompt-text-border-color: $flyout-border !default;
       .e-content-body > *:first-child {
         margin-block-start: 0;
       }
-      .e-loading-body,
-      .e-content-body,
-      .e-loading-footer {
-        padding: 2px 0 0 8px;
-      }
-      .e-content-footer,
-      .e-prompt-toolbar {
-        opacity: 0;
-      }
-      .e-content-container {
-        margin-top: 16px;
-        font-size: 14px;
-        justify-content: space-between;
-        .e-prompt-text {
-          white-space: pre-wrap;
-          height: fit-content;
-          border-radius: $prompt-text-border-radius;
-          padding: $prompt-text-padding;
-          margin-right: 2px;
-          line-height: 20px;
-        }
-      }
-      .e-suggestions {
-        width: 100%;
-        &.e-suggestion-item-template li {
-          padding: 0;
-        }
-        .e-suggestion-header {
-          font-size: 14px;
-          font-weight: $suggesstions-header-font-weight;
-          margin: 0 2px 8px 8px;
-          text-align: right;
-        }
-        ul {
-          list-style-type: none;
-          padding: 0;
-          margin: 0;
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: end;
-        }
-        li {
-          line-height: 20px;
-          font-weight: $suggesstions-font-weight;
-          padding: $suggesstions-list-padding;
-          margin: $suggesstions-list-margin;
-          border-radius: $suggesstions-list-border-radius;
-          cursor: pointer;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-      .e-prompt-container {
-        gap: 2px;
-        align-self: flex-end;
-        max-width: 70%;
-        margin-bottom: 5px;
-        flex-direction: column;
-        &:hover .e-assist-edit-icon {
-          opacity: 1;
-          cursor: pointer;
-        }
-      }
     }
     .e-views,
     .e-custom-view,
-    .e-aiassist-view-content-section {
+    .e-assistview-content-section {
       height: 100%;
-      overflow-y: scroll;
+      overflow: scroll;
       &::-webkit-scrollbar {
         width: $ai-assist-scrollbar-width;
+        height: $ai-assist-scrollbar-width;
       }
       &::-webkit-scrollbar-thumb {
         border-radius: 10px;
       }
     }
-    .e-content {
-      margin-right: 8px;
+    .e-assist-send {
+      position: absolute;
+      right: 20px;
+      font-size: $send-icon-size;
+      bottom: $send-icon-bottom;
+      padding-top: 2px;
+    }
+    .e-assist-send.disabled {
+      pointer-events: none;
+      opacity: .5;
+      cursor: not-allowed;
+    }
+    .e-assist-send.enabled {
+      pointer-events: auto;
+      opacity: 1;
+      cursor: pointer;
     }
     .e-footer {
       position: relative;
@@ -138170,23 +138273,6 @@ $prompt-text-border-color: $flyout-border !default;
       .hide-scrollbar textarea {
         scrollbar-width: none;
       }
-      .e-assist-send {
-        position: absolute;
-        right: 20px;
-        font-size: $send-icon-size;
-        bottom: 8px;
-        padding-top: 2px;
-      }
-      .e-assist-send.disabled {
-        pointer-events: none;
-        opacity: .5;
-        cursor: not-allowed;
-      }
-      .e-assist-send.enabled {
-        pointer-events: auto;
-        opacity: 1;
-        cursor: pointer;
-      }
       &:has(.e-rtl) .e-assist-send {
         right: unset;
         left: 20px;
@@ -138198,6 +138284,13 @@ $prompt-text-border-color: $flyout-border !default;
       .e-multi-line-input.e-rtl {
         padding-left: 35px;
         padding-right: unset;
+        &.e-input-group.e-control-wrapper {
+          .e-textarea {
+            @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
+              padding: 4px 12px 4px 8px;
+            }
+          }
+        }
       }
       .e-input-group.e-multi-line-input {
         @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {
@@ -138279,16 +138372,24 @@ $prompt-text-border-color: $flyout-border !default;
       outline: 1px solid;
     }
     &.e-rtl {
-      .e-views {
-        .e-suggestions {
-          .e-suggestion-header {
-            text-align: left;
-            margin: 0 8px 8px 2px;
-          }
-          li {
-            margin: $suggesstions-list-margin-rtl;
+      .e-view-header .e-toolbar-item {
+        &.e-assist-view-header,
+        &.e-custom-view-header {
+          .e-tbar-btn .e-btn-icon {
+            padding: 4px 2px 4px 4px;
           }
         }
+      }
+      .e-suggestion-header {
+        text-align: left;
+        margin: 0 8px 8px 2px;
+      }
+      .e-suggestions {
+        li {
+          margin: $suggesstions-list-margin-rtl;
+        }
+      }
+      .e-views {
         .e-content-body {
           blockquote {
             padding-left: unset;
@@ -138303,6 +138404,17 @@ $prompt-text-border-color: $flyout-border !default;
           }
         }
       }
+      .e-loading-body,
+      .e-content-body,
+      .e-loading-footer {
+        padding: 2px 6px 0 0;
+      }
+      .e-prompt-icon {
+        margin: 0 8px 0 0;
+      }
+      .e-output-icon {
+        margin: 0 8px 0 4px;
+      }
     }
   }
   @media (max-width: 760px) {
@@ -138311,12 +138423,14 @@ $prompt-text-border-color: $flyout-border !default;
       .e-footer {
         width: 100%;
       }
-      .e-view-container .e-suggestions {
+      .e-view-container .e-suggestions,
+      .e-prompt-content {
         padding-right: 8px;
       }
       &.e-rtl {
-        .e-view-container .e-suggestions {
-          padding-left: 8px;
+        .e-view-container .e-suggestions,
+        .e-prompt-content {
+          padding: 0 0 0 8px;
         }
       }
     }
@@ -138354,26 +138468,55 @@ $prompt-text-border-color: $flyout-border !default;
         }
         .e-tbar-btn {
           background: transparent;
+          &:focus {
+            box-shadow: none;
+          }
+          &:focus-visible {
+            box-shadow: $tbar-header-btn-focus-box-shadow;
+            @if ($skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'bootstrap' or $skin-name == 'bootstrap-dark') {
+              background: $tbar-header-hover-bg-color;
+            }
+          }
         }
       }
     }
-    .e-views {
-      .e-prompt-icon,
-      .e-output-icon {
-        border: 1px solid $icon-border-color;
-        color: $user-logo-color;
-        background-color: $user-logo-bg-color;
-      }
-      .e-prompt-text {
-        background: $suggested-content-bg-color;
+    .e-suggestion-header {
+      color: $suggesstions-header-color;
+    }
+    .e-suggestions {
+      li {
         color: $suggested-content-text-color;
+        box-shadow: $suggestion-li-box-shadow;
         @if ($skin-name == 'bootstrap5.3') {
           border: none;
         }
         @else {
-          border: 1px solid $prompt-text-border-color;
+          border: 1px solid $suggestion-li-border-color;
         }
       }
+    }
+    .e-prompt-icon,
+    .e-output-icon {
+      border: 1px solid $icon-border-color;
+      color: $user-logo-color;
+      @if ($skin-name == 'Material3' or $skin-name == 'Material3-dark') {
+        background: $user-logo-bg-color;
+      }
+      @else {
+        background-color: $user-logo-bg-color;
+      }
+    }
+    .e-prompt-text {
+      background: $suggested-content-bg-color;
+      color: $suggested-content-text-color;
+      @if ($skin-name == 'bootstrap5.3') {
+        border: none;
+      }
+      @else {
+        border: 1px solid $prompt-text-border-color;
+      }
+    }
+    .e-views {
       .e-content-body {
         color: $response-text-color;
         a {
@@ -138413,21 +138556,6 @@ $prompt-text-border-color: $flyout-border !default;
           color: rgba(255, 212, 212, 1);
         }
       }
-      .e-suggestions {
-        .e-suggestion-header {
-          color: $suggesstions-header-color;
-        }
-        li {
-          color: $suggested-content-text-color;
-          box-shadow: $suggestion-li-box-shadow;
-          @if ($skin-name == 'bootstrap5.3') {
-            border: none;
-          }
-          @else {
-            border: 1px solid $suggestion-li-border-color;
-          }
-        }
-      }
     }
     .e-stop-response {
       border-color: $response-stopper-border-color;
@@ -138437,21 +138565,21 @@ $prompt-text-border-color: $flyout-border !default;
     }
     .e-views,
     .e-custom-view,
-    .e-aiassist-view-content-section {
+    .e-assistview-content-section {
       &::-webkit-scrollbar-thumb {
         background: $scrollbar-color;
       }
     }
+    .e-assist-send {
+      color: $send-icon-color;
+      &.disabled {
+        color: $send-icon-disabled-color;
+      }
+    }
     .e-footer {
       textarea::-webkit-scrollbar-thumb {
         background: $scrollbar-color;
       }
-      .e-assist-send {
-        color: $send-icon-color;
-        &.disabled {
-          color: $send-icon-disabled-color;
-        }
-      }
       // To override the default border style of the textarea component for the Material and Material3 themes.
       .e-input-group.e-multi-line-input {
         @if $theme-name == 'Material3' or $theme-name == 'material' or $theme-name == 'Material3-dark' or $theme-name == 'material-dark' {