@syncfusion/ej2-angular-navigations 21.2.9 → 22.1.34-ngcc

package/styles/toolbar/bootstrap-dark.css

@@ -21,6 +21,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 15px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 15px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 15px;
@@ -1061,10 +1067,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #131313;
   border: solid #505050;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #313131;
   color: #fff;
+  border: solid #505050;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/bootstrap-dark.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
-@import '../h-scroll/bootstrap-dark-definition.scss';
-@import '../v-scroll/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
-@import 'bootstrap-dark-definition.scss';
-@import 'icons/bootstrap-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/bootstrap-dark.scss';

package/styles/toolbar/bootstrap.css

@@ -22,6 +22,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 3px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 3px;
@@ -1062,10 +1068,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #f8f8f8;
   border: solid #ccc;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #e6e6e6;
   color: #333;
+  border: solid #ccc;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/bootstrap.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
-@import '../h-scroll/bootstrap-definition.scss';
-@import '../v-scroll/bootstrap-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap-definition.scss';
-@import 'bootstrap-definition.scss';
-@import 'icons/bootstrap.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/bootstrap.scss';

package/styles/toolbar/bootstrap4.css

@@ -22,6 +22,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 16px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 16px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 16px;
@@ -1062,10 +1068,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #f8f9fa;
   border: solid #dee2e6;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #6c757d;
   color: #fff;
+  border: solid #dee2e6;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/bootstrap4.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
-@import '../h-scroll/bootstrap4-definition.scss';
-@import '../v-scroll/bootstrap4-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap4-definition.scss';
-@import 'bootstrap4-definition.scss';
-@import 'icons/bootstrap4.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/bootstrap4.scss';

package/styles/toolbar/bootstrap5-dark.css

@@ -33,6 +33,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 12px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 12px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 12px;
@@ -1073,10 +1079,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #282d31;
   border: solid #444c54;
-  border-left: 0;
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #5c636a;
   color: #adb5bd;
+  border: solid #444c54;
+  border-width: 0 0 0 0;
 }

package/styles/toolbar/bootstrap5-dark.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
-@import '../h-scroll/bootstrap5-dark-definition.scss';
-@import '../v-scroll/bootstrap5-dark-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
-@import 'bootstrap5-dark-definition.scss';
-@import 'icons/bootstrap5-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/bootstrap5-dark.scss';

package/styles/toolbar/bootstrap5.css

@@ -33,6 +33,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 12px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 12px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 12px;
@@ -1073,10 +1079,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #f8f9fa;
   border: solid #dee2e6;
-  border-left: 0;
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #5c636a;
   color: #6c757d;
+  border: solid #dee2e6;
+  border-width: 0 0 0 0;
 }

package/styles/toolbar/bootstrap5.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
-@import '../h-scroll/bootstrap5-definition.scss';
-@import '../v-scroll/bootstrap5-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
-@import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'icons/bootstrap5.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/bootstrap5.scss';

package/styles/toolbar/fabric-dark.css

@@ -21,6 +21,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 3px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 3px;
@@ -936,7 +942,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: #414040;
-  border-left: 0;
+  border-left: 1px solid #414040;
   color: #dadada;
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -945,7 +951,7 @@
 .e-toolbar .e-hor-nav:hover:not(.e-nav-active) {
   border-color: #414040;
   border-style: solid;
-  border-width: 0;
+  border-width: 0 0 0 1px;
 }
 .e-toolbar .e-hor-nav:hover:active {
   background: #414040;
@@ -1061,10 +1067,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #333232;
   border: solid #414040;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #414040;
   color: #dadada;
+  border: solid #414040;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/fabric-dark.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
-@import '../h-scroll/fabric-dark-definition.scss';
-@import '../v-scroll/fabric-dark-definition.scss';
-@import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
-@import 'ej2-popups/styles/popup/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/fabric-dark.scss';

package/styles/toolbar/fabric.css

@@ -22,6 +22,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 3px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 3px;
@@ -937,7 +943,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: #f4f4f4;
-  border-left: 0;
+  border-left: 1px solid #dadada;
   color: #000;
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -946,7 +952,7 @@
 .e-toolbar .e-hor-nav:hover:not(.e-nav-active) {
   border-color: #dadada;
   border-style: solid;
-  border-width: 0;
+  border-width: 0 0 0 1px;
 }
 .e-toolbar .e-hor-nav:hover:active {
   background: #f4f4f4;
@@ -1062,10 +1068,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #fff;
   border: solid #dadada;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #f4f4f4;
   color: #000;
+  border: solid #dadada;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/fabric.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/fabric-definition.scss';
-@import '../h-scroll/fabric-definition.scss';
-@import '../v-scroll/fabric-definition.scss';
-@import 'ej2-buttons/styles/button/fabric-definition.scss';
-@import 'ej2-popups/styles/popup/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'icons/fabric.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/fabric.scss';

package/styles/toolbar/fluent-dark.css

@@ -32,6 +32,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 10px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 10px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 10px;
@@ -1072,10 +1078,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #252423;
   border: solid #292827;
-  border-left: 0;
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #292827;
   color: #f3f2f1;
+  border: solid #292827;
+  border-width: 0 0 0 0;
 }

package/styles/toolbar/fluent-dark.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
-@import '../h-scroll/fluent-dark-definition.scss';
-@import '../v-scroll/fluent-dark-definition.scss';
-@import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
-@import 'ej2-popups/styles/popup/fluent-dark-definition.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/fluent-dark.scss';

package/styles/toolbar/fluent.css

@@ -32,6 +32,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 10px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 10px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 10px;
@@ -1072,10 +1078,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #f3f2f1;
   border: solid #edebe9;
-  border-left: 0;
   border-width: 0 0 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #edebe9;
   color: #201f1e;
+  border: solid #edebe9;
+  border-width: 0 0 0 0;
 }

package/styles/toolbar/fluent.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/fluent-definition.scss';
-@import '../h-scroll/fluent-definition.scss';
-@import '../v-scroll/fluent-definition.scss';
-@import 'ej2-buttons/styles/button/fluent-definition.scss';
-@import 'ej2-popups/styles/popup/fluent-definition.scss';
-@import 'fluent-definition.scss';
-@import 'icons/fluent.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/fluent.scss';

package/styles/toolbar/highcontrast-light.css

@@ -21,6 +21,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 3px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 3px;
@@ -936,7 +942,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: #ecf;
-  border-left: 0;
+  border-left: 1px solid #000;
   color: #000;
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -1061,10 +1067,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #fff;
   border: solid #000;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #ecf;
   color: #000;
+  border: solid #000;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/highcontrast-light.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
-@import '../h-scroll/highcontrast-light-definition.scss';
-@import '../v-scroll/highcontrast-light-definition.scss';
-@import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
-@import 'ej2-popups/styles/popup/highcontrast-light-definition.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'icons/highcontrast-light.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/highcontrast-light.scss';

package/styles/toolbar/highcontrast.css

@@ -22,6 +22,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 3px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 3px;
@@ -937,7 +943,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: #685708;
-  border-left: 0;
+  border-left: 1px solid #fff;
   color: #fff;
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -1062,10 +1068,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #000;
   border: solid #fff;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: #685708;
   color: #fff;
+  border: solid #fff;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/highcontrast.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
-@import '../h-scroll/highcontrast-definition.scss';
-@import '../v-scroll/highcontrast-definition.scss';
-@import 'ej2-buttons/styles/button/highcontrast-definition.scss';
-@import 'ej2-popups/styles/popup/highcontrast-definition.scss';
-@import 'highcontrast-definition.scss';
-@import 'icons/highcontrast.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/highcontrast.scss';

package/styles/toolbar/material-dark.css

@@ -49,6 +49,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 3px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 3px;
@@ -975,7 +981,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: rgba(255, 255, 255, 0.1);
-  border-left: 0;
+  border-left: 1px solid #616161;
   color: #fff;
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -984,7 +990,7 @@
 .e-toolbar .e-hor-nav:hover:not(.e-nav-active) {
   border-color: #616161;
   border-style: solid;
-  border-width: 0;
+  border-width: 0 0 0 1px;
 }
 .e-toolbar .e-hor-nav:hover:active {
   background: rgba(255, 255, 255, 0.1);
@@ -1100,10 +1106,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #212121;
   border: solid #616161;
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
+  border: solid #616161;
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/material-dark.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
-@import '../h-scroll/material-dark-definition.scss';
-@import '../v-scroll/material-dark-definition.scss';
-@import 'ej2-buttons/styles/button/material-dark-definition.scss';
-@import 'ej2-popups/styles/popup/material-dark-definition.scss';
-@import 'material-dark-definition.scss';
-@import 'icons/material-dark.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/material-dark.scss';

package/styles/toolbar/material.css

@@ -52,6 +52,12 @@
 .e-toolbar.e-bigger .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child {
   margin-left: 3px;
 }
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-bigger .e-toolbar .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-item:last-child,
+.e-toolbar.e-bigger .e-toolbar-items:first-child:not(.e-toolbar-multirow) > .e-toolbar-right .e-toolbar-item:last-child {
+  margin-right: 3px;
+}
 .e-bigger .e-toolbar .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child,
 .e-toolbar.e-bigger .e-toolbar-items .e-hscroll-bar .e-hscroll-content > .e-toolbar-item:last-child {
   margin-right: 3px;
@@ -978,7 +984,7 @@
 }
 .e-toolbar .e-hor-nav:hover {
   background: rgba(0, 0, 0, 0.12);
-  border-left: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
 }
 .e-toolbar .e-hor-nav:hover .e-icons {
@@ -987,7 +993,7 @@
 .e-toolbar .e-hor-nav:hover:not(.e-nav-active) {
   border-color: rgba(0, 0, 0, 0.12);
   border-style: solid;
-  border-width: 0;
+  border-width: 0 0 0 1px;
 }
 .e-toolbar .e-hor-nav:hover:active {
   background: rgba(0, 0, 0, 0.12);
@@ -1103,10 +1109,11 @@
 .e-toolbar.e-rtl .e-hor-nav {
   background: #fafafa;
   border: solid rgba(0, 0, 0, 0.12);
-  border-left: 0;
   border-width: 0 1px 0 0;
 }
 .e-toolbar.e-rtl .e-hor-nav:not(.e-nav-active):hover {
   background: rgba(0, 0, 0, 0.12);
   color: rgba(0, 0, 0, 0.87);
+  border: solid rgba(0, 0, 0, 0.12);
+  border-width: 0 1px 0 0;
 }

package/styles/toolbar/material.scss

@@ -1,8 +1 @@
-@import 'ej2-base/styles/material-definition.scss';
-@import '../h-scroll/material-definition.scss';
-@import '../v-scroll/material-definition.scss';
-@import 'ej2-buttons/styles/button/material-definition.scss';
-@import 'ej2-popups/styles/popup/material-definition.scss';
-@import 'material-definition.scss';
-@import 'icons/material.scss';
-@import 'all.scss';
+@import 'ej2-navigations/styles/toolbar/material.scss';