@syncfusion/ej2-angular-ribbon 22.1.34-ngcc → 22.1.34

package/styles/fabric-dark.css

@@ -106,6 +106,9 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
+.e-ribbon.e-rbn .e-ribbon-tab .e-item {
+  width: fit-content;
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -114,7 +117,6 @@
   border-width: unset;
   font-size: 14px;
   font-weight: 400;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
   border-radius: unset;
@@ -190,9 +192,6 @@
   height: auto;
   min-height: auto;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
-  box-shadow: none;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
   padding: 0;
 }
@@ -202,10 +201,9 @@
   min-width: auto;
   width: auto;
   border-style: solid;
-  transform: none;
   border-width: 1px;
   border-radius: unset;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -213,7 +211,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
   font-size: 16px;
   height: auto;
-  transform: none;
   line-height: 16px;
   padding: 0 4px;
   width: auto;
@@ -252,7 +249,6 @@
   border: none;
   height: 32px;
   margin: auto;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -283,9 +279,6 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
-.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
-  margin-bottom: 0;
-}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 2px;
   height: auto;
@@ -335,9 +328,6 @@
 .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
   left: var(--fileMenuWidth);
 }
-.e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
-  padding-right: 30px;
-}
 .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -349,9 +339,6 @@
 .e-ribbon.e-rbn.e-rtl .e-tab-header {
   right: var(--fileMenuWidth);
 }
-.e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
-  padding-left: 30px;
-}
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {
@@ -392,8 +379,6 @@
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
   min-width: auto;
-  min-height: auto;
-  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-input-group .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -477,7 +462,6 @@
   font-weight: 400;
   font-size: 12px;
   text-transform: none;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
 .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -576,7 +560,6 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   border: 1px solid transparent;
-  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -586,7 +569,6 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
   border: 1px solid transparent;
   border-radius: unset;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -696,8 +678,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
   margin: 7px 8px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -721,24 +702,22 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  margin-left: auto;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 6px 8px;
   font-weight: 600;
   line-height: 24px;
 }
 
-.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  padding: 8px;
-  margin: 0 0 0 auto;
-}
-
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  padding: 8px;
-  margin: 0 auto 0 0;
+  margin-right: auto;
+  margin-left: unset;
 }
 
 .e-ribbon-menu {
@@ -758,17 +737,6 @@
   padding-left: 30px !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-ribbon-control.e-dropdown-popup ul .e-item {
-  font-size: 16px;
-  height: 36px;
-  -ms-flex-align: center;
-      align-items: center;
-}
-.e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 16px;
-  line-height: 16px;
-}
-
 .e-ribbon-tooltip .e-tip-content {
   padding: 4px;
 }
@@ -807,10 +775,6 @@
   padding-right: 16px;
   height: 50px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 50px;
@@ -902,12 +866,6 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
-.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
-.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
-.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
-  margin-bottom: 0;
-}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1122,9 +1080,7 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
   margin: 7px 10px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1132,27 +1088,6 @@
   margin: 10px;
   padding: 0;
 }
-.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  padding: 10px;
-}
-.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  padding: 10px;
-}
-
-.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
-  font-size: 16px;
-  height: 45px;
-}
-.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 20px;
-  line-height: 20px;
-}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,

package/styles/fabric.css

@@ -104,6 +104,9 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
+.e-ribbon.e-rbn .e-ribbon-tab .e-item {
+  width: fit-content;
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -112,7 +115,6 @@
   border-width: 0 0 1px 0;
   font-size: 14px;
   font-weight: 400;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
   border-radius: unset;
@@ -188,9 +190,6 @@
   height: auto;
   min-height: auto;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
-  box-shadow: none;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
   padding: 0;
 }
@@ -200,10 +199,9 @@
   min-width: auto;
   width: auto;
   border-style: solid;
-  transform: none;
   border-width: 1px;
   border-radius: unset;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -211,7 +209,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
   font-size: 16px;
   height: auto;
-  transform: none;
   line-height: 16px;
   padding: 0 4px;
   width: auto;
@@ -250,7 +247,6 @@
   border: none;
   height: 32px;
   margin: auto;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -281,9 +277,6 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
-.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
-  margin-bottom: 0;
-}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 4px;
   height: auto;
@@ -333,9 +326,6 @@
 .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
   left: var(--fileMenuWidth);
 }
-.e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
-  padding-right: 30px;
-}
 .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -347,9 +337,6 @@
 .e-ribbon.e-rbn.e-rtl .e-tab-header {
   right: var(--fileMenuWidth);
 }
-.e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
-  padding-left: 30px;
-}
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {
@@ -390,8 +377,6 @@
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
   min-width: auto;
-  min-height: auto;
-  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-input-group .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -475,7 +460,6 @@
   font-weight: 400;
   font-size: 14px;
   text-transform: none;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
 .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -574,7 +558,6 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   border: 1px solid transparent;
-  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -584,7 +567,6 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
   border: 1px solid transparent;
   border-radius: unset;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -694,8 +676,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
   margin: 7px 8px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -719,24 +700,22 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  margin-left: auto;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 6px 8px;
   font-weight: 600;
   line-height: 24px;
 }
 
-.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  padding: 8px;
-  margin: 0 0 0 auto;
-}
-
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  padding: 8px;
-  margin: 0 auto 0 0;
+  margin-right: auto;
+  margin-left: unset;
 }
 
 .e-ribbon-menu {
@@ -756,17 +735,6 @@
   padding-left: 30px !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-ribbon-control.e-dropdown-popup ul .e-item {
-  font-size: 16px;
-  height: 36px;
-  -ms-flex-align: center;
-      align-items: center;
-}
-.e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 16px;
-  line-height: 16px;
-}
-
 .e-ribbon-tooltip .e-tip-content {
   padding: 4px;
 }
@@ -805,10 +773,6 @@
   padding-right: 16px;
   height: 50px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 50px;
@@ -900,12 +864,6 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
-.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
-.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
-.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
-  margin-bottom: 0;
-}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1120,9 +1078,7 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
   margin: 7px 10px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1130,27 +1086,6 @@
   margin: 10px;
   padding: 0;
 }
-.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  padding: 10px;
-}
-.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  padding: 10px;
-}
-
-.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
-  font-size: 16px;
-  height: 45px;
-}
-.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 20px;
-  line-height: 20px;
-}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,

package/styles/fluent-dark.css

@@ -190,6 +190,9 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll-content > .e-item:not(.e-active) {
   display: none;
 }
+.e-ribbon.e-rbn .e-ribbon-tab .e-item {
+  width: fit-content;
+}
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu {
   position: absolute;
   line-height: 22px;
@@ -198,7 +201,6 @@
   border-width: unset;
   font-size: 14px;
   font-weight: 400;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-ribbon-file-menu.e-active {
   border-radius: unset;
@@ -274,9 +276,6 @@
   height: auto;
   min-height: auto;
 }
-.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
-  box-shadow: none;
-}
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
   padding: 0;
 }
@@ -286,10 +285,9 @@
   min-width: auto;
   width: auto;
   border-style: solid;
-  transform: none;
   border-width: 1px;
   border-radius: 2px;
-  z-index: 3;
+  z-index: 2;
 }
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav.e-overlay {
   display: none;
@@ -297,7 +295,6 @@
 .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll .e-scroll-nav .e-nav-arrow {
   font-size: 14px;
   height: auto;
-  transform: none;
   line-height: 14px;
   padding: 0 5px;
   width: auto;
@@ -336,7 +333,6 @@
   border: none;
   height: 26px;
   margin: auto;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-group-of-btn .e-btn-icon,
 .e-ribbon.e-rbn.e-ribbon-overflow .e-ribbon-overall-of-btn .e-btn-icon {
@@ -367,9 +363,6 @@
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
   overflow-y: hidden;
 }
-.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group {
-  margin-bottom: 0;
-}
 .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group {
   padding-top: 1px;
   height: auto;
@@ -419,9 +412,6 @@
 .e-ribbon.e-rbn:not(.e-rtl) .e-tab-header {
   left: var(--fileMenuWidth);
 }
-.e-ribbon.e-rbn:not(.e-rtl) .e-ribbon-tab .e-hscroll.e-scroll-device {
-  padding-right: 30px;
-}
 .e-ribbon.e-rbn.e-rtl .e-ribbon-collapse-btn,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-help-template,
 .e-ribbon.e-rbn.e-rtl .e-ribbon-group::after {
@@ -433,9 +423,6 @@
 .e-ribbon.e-rbn.e-rtl .e-tab-header {
   right: var(--fileMenuWidth);
 }
-.e-ribbon.e-rbn.e-rtl .e-ribbon-tab .e-hscroll.e-scroll-device {
-  padding-left: 30px;
-}
 
 .e-ribbon.e-rbn,
 .e-ribbon-group-overflow-ddb {
@@ -476,8 +463,6 @@
 .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-clear-icon {
   min-width: auto;
-  min-height: auto;
-  border-radius: unset;
 }
 .e-ribbon.e-rbn .e-input-group .e-clear-icon,
 .e-ribbon-group-overflow-ddb .e-input-group .e-clear-icon {
@@ -561,7 +546,6 @@
   font-weight: 400;
   font-size: 12px;
   text-transform: none;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-group-overflow .e-btn:focus,
 .e-ribbon.e-rbn .e-ribbon-item .e-btn:focus,
@@ -660,7 +644,6 @@
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
   border: 1px solid transparent;
-  border-radius: 2px;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
@@ -670,7 +653,6 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper {
   border: 1px solid transparent;
   border-radius: 2px;
-  box-shadow: none;
 }
 .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper .e-btn,
 .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper .e-btn {
@@ -780,8 +762,7 @@
 .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
   display: none;
 }
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
   margin: 3px 5px;
 }
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
@@ -805,24 +786,22 @@
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-icons.e-caret,
+.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-dropdown-btn .e-icons.e-caret {
+  transform: rotate(-90deg);
+  margin-left: auto;
+}
 .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
   padding: 3px 5px;
   font-weight: 600;
   line-height: 18px;
 }
 
-.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  transform: rotate(-90deg);
-  padding: 5px;
-  margin: 0 0 0 auto;
-}
-
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
 .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
   transform: rotate(90deg);
-  padding: 5px;
-  margin: 0 auto 0 0;
+  margin-right: auto;
+  margin-left: unset;
 }
 
 .e-ribbon-menu {
@@ -842,17 +821,6 @@
   padding-left: 26px !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.e-ribbon-control.e-dropdown-popup ul .e-item {
-  font-size: 12px;
-  height: 24px;
-  -ms-flex-align: center;
-      align-items: center;
-}
-.e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 16px;
-  line-height: 16px;
-}
-
 .e-ribbon-tooltip .e-tip-content {
   padding: 4px;
 }
@@ -891,10 +859,6 @@
   padding-right: 16px;
   height: 48px;
 }
-.e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-hscroll,
-.e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-hscroll {
-  min-height: auto;
-}
 .e-bigger.e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-hor-nav {
   height: 48px;
@@ -986,12 +950,6 @@
 .e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group {
   height: auto;
 }
-.e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
-.e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-input-group,
-.e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-input-group {
-  margin-bottom: 0;
-}
 .e-bigger.e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-group-content,
 .e-bigger .e-ribbon-group-overflow-ddb.e-ribbon-simplified-mode .e-ribbon-group-content,
@@ -1206,9 +1164,7 @@
 }
 
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
-.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
+.e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group {
   margin: 3px 7px;
 }
 .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
@@ -1216,27 +1172,6 @@
   margin: 7px;
   padding: 0;
 }
-.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  padding: 7px;
-}
-.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
-.e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
-  padding: 7px;
-}
-
-.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
-  font-size: 14px;
-  height: 32px;
-}
-.e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
-  font-size: 20px;
-  line-height: 20px;
-}
 
 .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
 .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,