@syncfusion/ej2-navigations 31.2.16 → 32.1.19

package/styles/material3-lite.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
 /* !componenticons */
 .e-pager .e-icon-last::before,
 .e-grid-menu .e-icon-last::before {
@@ -1109,7 +1189,7 @@
 }
 
 .e-toolbar {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   display: block;
   height: 48px;
   min-height: 48px;
@@ -1145,13 +1225,16 @@
           box-sizing: content-box;
 }
 .e-toolbar.e-corner {
-  border-radius: 1px;
+  border-radius: calc(var(--e-radius) * 0.0625);
 }
 .e-toolbar.e-hidden {
   display: none;
 }
+.e-toolbar.e-overlay .e-toolbar-item:not(.e-separator):not(.e-spacer) .e-tbar-btn {
+  pointer-events: none;
+}
 .e-toolbar .e-toolbar-items {
-  border-radius: 0 0 0 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -1266,7 +1349,7 @@
   min-height: 32px;
   min-width: 32px;
   padding: 0 7px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   line-height: 22px;
   border: none;
   cursor: pointer;
@@ -1405,7 +1488,7 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  border-radius: 0 0 0 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
   cursor: pointer;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -1445,7 +1528,7 @@
   display: none;
 }
 .e-toolbar .e-toolbar-pop {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   overflow: hidden;
   padding: 0;
   position: absolute;
@@ -1468,7 +1551,7 @@
   min-width: 100%;
   padding: 5px 12px;
   border: none;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
@@ -1509,13 +1592,13 @@
 }
 .e-toolbar.e-extended-toolbar.e-tbar-extended {
   border-bottom: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  border-bottom-left-radius: calc(var(--e-radius) * 0);
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended {
   border-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-top-left-radius: calc(var(--e-radius) * 0);
+  border-top-right-radius: calc(var(--e-radius) * 0);
   min-height: 48px;
   padding-bottom: 0;
   padding-left: 8px;
@@ -1686,7 +1769,7 @@
 .e-toolbar.e-rtl .e-hor-nav {
   left: 0;
   right: auto;
-  border-radius: 0 0 0 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
 }
 .e-toolbar.e-toolpop.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-center .e-toolbar-item,
 .e-toolbar.e-toolpop.e-rtl .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-right .e-toolbar-item {
@@ -1749,7 +1832,7 @@
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:focus {
   background: rgba(var(--color-sf-on-surface), 0.04);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   color: rgba(var(--color-sf-on-surface-variant));
   border-color: rgba(var(--color-sf-on-surface-variant));
   border-style: solid;
@@ -1768,7 +1851,7 @@
   border-color: rgba(var(--color-sf-outline-variant));
   border-style: solid;
   border-width: 0;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons {
@@ -1788,7 +1871,7 @@
   border-color: rgba(var(--color-sf-outline-variant));
   border-style: solid;
   border-width: 0;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   color: rgba(var(--color-sf-on-primary-container));
@@ -1836,7 +1919,7 @@
   content: "";
 }
 .e-toolbar .e-hor-nav.e-nav-active:active, .e-toolbar .e-hor-nav.e-nav-active:focus, .e-toolbar .e-hor-nav.e-nav-active:hover {
-  border-bottom-right-radius: 0;
+  border-bottom-right-radius: calc(var(--e-radius) * 0);
 }
 .e-toolbar .e-hor-nav:active {
   border: 0;
@@ -1953,7 +2036,7 @@
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:focus {
   background: rgba(var(--color-sf-on-surface), 0.04);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   border-color: rgba(var(--color-sf-on-surface-variant));
   border-style: solid;
   border-width: 0;
@@ -1962,14 +2045,14 @@
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:hover {
   background: rgba(var(--color-sf-on-surface), 0.05);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   border-color: rgba(var(--color-sf-outline-variant));
   border-style: solid;
   border-width: 0;
 }
 .e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn:active {
   background: rgba(var(--color-sf-on-surface), 0.08);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: none;
           box-shadow: none;
   border-color: rgba(var(--color-sf-outline-variant));
@@ -2014,7 +2097,7 @@
   position: relative;
 }
 .e-accordion .e-acrdn-item {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   margin-top: 0;
 }
 .e-accordion .e-acrdn-item.e-select.e-selected:first-child {
@@ -2063,7 +2146,7 @@
   text-decoration: none;
 }
 .e-accordion .e-acrdn-item .e-acrdn-header {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   line-height: 20px;
   min-height: 36px;
   overflow: hidden;
@@ -2081,7 +2164,7 @@
 .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
   display: table;
   font-size: 16px;
-  height: 36px;
+  height: 38px;
   min-height: 36px;
   min-width: 16px;
   position: absolute;
@@ -2184,35 +2267,35 @@
   -webkit-tap-highlight-color: rgba(var(--color-sf-on-surface), 0.05), 0.05;
   background: transparent;
   border: 1px solid rgba(var(--color-sf-outline-variant));
-  border-radius: 8px;
+  border-radius: calc(var(--e-radius) * 0.5);
 }
 .e-accordion .e-acrdn-item {
   border-color: rgba(var(--color-sf-outline-variant));
   border-style: solid;
   border-width: 0 0 1px 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-accordion .e-acrdn-item.e-active {
   background: rgba(var(--color-sf-surface), 0.0001);
 }
 .e-accordion .e-acrdn-item.e-select:last-child {
   border-bottom: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-accordion .e-acrdn-item:first-child .e-acrdn-header:focus {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25);
 }
 .e-accordion .e-acrdn-item:first-child.e-selected.e-select > .e-acrdn-header:focus {
-  border-radius: 4px 4px 0 0;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25);
 }
 .e-accordion .e-acrdn-item:last-child {
   border-bottom: 0;
 }
 .e-accordion .e-acrdn-item:last-child:not(.e-expand-state) .e-acrdn-header:focus {
-  border-radius: 0 0 4px 4px;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25);
 }
 .e-accordion .e-acrdn-item:last-child.e-selected .e-acrdn-header:focus {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-accordion .e-acrdn-item.e-item-focus {
   border-color: rgba(var(--color-sf-outline-variant));
@@ -2424,7 +2507,7 @@
 }
 .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
   background: transparent;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-color: rgba(var(--color-sf-outline-variant));
   border-style: solid;
   border-width: 0;
@@ -2844,7 +2927,7 @@
   font-size: 14px;
   padding: 4px 0;
   border: 1px solid rgba(var(--color-sf-outline-variant));
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   display: none;
@@ -2876,7 +2959,7 @@
 }
 .e-contextmenu-wrapper ul.e-ul,
 .e-contextmenu-container ul.e-ul {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
 }
 .e-contextmenu-wrapper ul .e-menu-item,
 .e-contextmenu-container ul .e-menu-item {
@@ -3279,7 +3362,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-items.e-hscroll .e-scroll-nav {
   width: 40px;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-tab .e-tab-header .e-toolbar-items.e-hscroll:not(.e-tbar-pos) .e-toolbar-item:last-child {
   margin: 0;
@@ -3307,7 +3390,7 @@
   height: 3px;
   left: 0;
   right: 0;
-  border-radius: 3px 3px 0 0;
+  border-radius: calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
   -webkit-transition: left 0.125s cubic-bezier(0.35, 0, 0.25, 1), right 0.25s cubic-bezier(0.35, 0, 0.25, 1);
   transition: left 0.125s cubic-bezier(0.35, 0, 0.25, 1), right 0.25s cubic-bezier(0.35, 0, 0.25, 1);
 }
@@ -3356,7 +3439,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
   display: inherit;
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -4046,7 +4129,7 @@
 .e-tab .e-tab-header.e-vertical.e-vertical-left .e-indicator {
   left: auto;
   right: 0;
-  border-radius: 3px 0 0 3px;
+  border-radius: calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.1875);
 }
 .e-tab .e-tab-header.e-vertical.e-vertical-left .e-toolbar-items .e-toolbar-item.e-active:hover::before {
   bottom: unset;
@@ -4082,7 +4165,7 @@
 .e-tab .e-tab-header.e-vertical.e-vertical-right .e-indicator {
   left: 0;
   right: auto;
-  border-radius: 0 3px 3px 0;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-vertical.e-vertical-right .e-tab-wrap {
   text-align: right;
@@ -4146,7 +4229,7 @@
 .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before,
 .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon::before {
   float: left;
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 500;
   line-height: 40px;
@@ -4834,7 +4917,7 @@
 }
 .e-tab-clone-element .e-tab-text {
   display: inherit;
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 14px;
   font-weight: 500;
   text-transform: capitalize;
@@ -5014,7 +5097,7 @@
 .e-tab .e-tab-header {
   background: inherit;
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: none;
           box-shadow: none;
   font-weight: 400;
@@ -5051,7 +5134,7 @@
   background: rgba(0, 0, 0, 0.12);
 }
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: rgba(var(--color-sf-on-surface-variant));
   border: 0;
 }
@@ -5061,7 +5144,7 @@
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
   background: transparent;
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 @media screen and (max-width: 480px) {
   .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
@@ -5074,7 +5157,7 @@
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active {
   border: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   border: 0;
@@ -5092,7 +5175,7 @@
   display: block;
   position: absolute;
   width: 100%;
-  border-radius: 3px 3px 0 0;
+  border-radius: calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
   bottom: 0;
 }
 .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
@@ -5133,7 +5216,7 @@
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   border: 1px var(--color-sf-black);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1), 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.13);
           box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1), 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.13);
   overflow-y: auto;
@@ -5154,7 +5237,7 @@
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover {
   background: rgba(var(--color-sf-on-surface), 0.05), 0.08;
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
 .e-tab .e-tab-header .e-toolbar-pop .e-toolbar-item .e-tab-wrap:hover .e-tab-icon,
@@ -5255,7 +5338,7 @@
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-down-icon:hover {
   background: rgba(var(--color-sf-on-surface), 0.05);
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header .e-hor-nav .e-popup-down-icon:hover,
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav) .e-popup-down-icon:hover {
@@ -5271,7 +5354,7 @@
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav):focus .e-popup-down-icon {
   background: rgba(var(--color-sf-on-surface), 0.04), 0.1;
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-tab .e-tab-header .e-hor-nav:focus .e-popup-up-icon:hover,
@@ -5280,7 +5363,7 @@
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav):focus .e-popup-down-icon:hover {
   background: rgba(var(--color-sf-on-surface), 0.05);
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header .e-hor-nav:focus .e-popup-up-icon:active,
 .e-tab .e-tab-header .e-hor-nav:focus .e-popup-down-icon:active,
@@ -5289,7 +5372,7 @@
   background: rgba(var(--color-sf-on-surface), 0.05);
   color: rgba(var(--color-sf-on-surface-variant));
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: none;
           box-shadow: none;
 }
@@ -5314,7 +5397,7 @@
   border: 0;
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header .e-hor-nav.e-nav-active .e-icons,
 .e-tab .e-tab-header .e-hor-nav:not(.e-expended-nav).e-nav-active .e-icons {
@@ -5340,14 +5423,14 @@
   border-width: 0;
 }
 .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item .e-tab-wrap:hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active {
   border-color: none;
   border-style: solid;
   border-width: 0;
   margin-top: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-vertical {
   border-bottom: 0;
@@ -5360,18 +5443,18 @@
   border-top: 0;
 }
 .e-tab .e-tab-header.e-vertical.e-vertical-left .e-toolbar-item .e-tab-wrap:hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-vertical.e-vertical-left .e-toolbar-item.e-active {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-right: initial;
 }
 .e-tab .e-tab-header.e-vertical.e-vertical-right .e-toolbar-item .e-tab-wrap:hover {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-vertical.e-vertical-right .e-toolbar-item.e-active {
   border-left: initial;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab .e-tab-header.e-vertical .e-toolbar-pop {
   -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1), 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.13);
@@ -5540,7 +5623,7 @@
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: rgba(var(--color-sf-primary));
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-color: unset;
 }
 .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-text, .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover .e-tab-icon {
@@ -5705,7 +5788,7 @@
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
   background: rgba(var(--color-sf-primary));
   border-color: rgba(var(--color-sf-primary));
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-style: solid;
   border-width: 0;
 }
@@ -5759,7 +5842,7 @@
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-text-wrap::before {
   border: 1.6px solid rgba(var(--color-sf-on-primary));
-  border-radius: 3px 3px 0 0;
+  border-radius: calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0.1875) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
 }
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-text,
 .e-tab.e-background .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
@@ -5910,7 +5993,7 @@
 }
 .e-tab.e-background .e-tab-header.e-horizontal-bottom .e-toolbar-item.e-active .e-tab-wrap {
   border-color: rgba(var(--color-sf-primary));
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-style: solid;
   border-width: 0;
 }
@@ -5922,7 +6005,7 @@
 }
 .e-tab.e-background .e-tab-header.e-vertical.e-vertical-left .e-toolbar-item.e-active .e-tab-wrap {
   border-color: rgba(var(--color-sf-primary));
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-style: solid;
   border-width: 0;
 }
@@ -5934,7 +6017,7 @@
 }
 .e-tab.e-background .e-tab-header.e-vertical.e-vertical-right .e-toolbar-item.e-active .e-tab-wrap {
   border-color: rgba(var(--color-sf-primary));
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   border-style: solid;
   border-width: 0;
 }
@@ -6019,7 +6102,7 @@
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:hover {
   background: rgba(var(--color-sf-primary));
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-tab.e-background.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus .e-tab-text {
   color: rgba(var(--color-sf-on-primary));
@@ -6076,7 +6159,7 @@
   color: rgba(var(--color-sf-on-surface-variant));
 }
 .e-tab-clone-element .e-tab-wrap {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   color: rgba(var(--color-sf-on-surface-variant));
   border: 1px solid transparent;
 }
@@ -6237,7 +6320,7 @@
 }
 .e-treeview .e-list-item div.e-icons.interaction {
   -webkit-transition: -webkit-transform 0.3s ease-in-out;
-  border-radius: 15px;
+  border-radius: calc(var(--e-radius) * 0.9375);
   transition: -webkit-transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out;
   transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
@@ -6399,7 +6482,7 @@
   z-index: 99999;
 }
 .e-treeview .e-popup .e-content {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   border-style: solid;
   border-width: 1px;
   font-size: 14px;
@@ -6486,7 +6569,7 @@
 }
 .e-treeview.e-drag-item .e-drop-count {
   border: 1px solid;
-  border-radius: 15px;
+  border-radius: calc(var(--e-radius) * 0.9375);
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   font-size: 12px;
@@ -6734,7 +6817,7 @@
 }
 .e-treeview.e-drag-item {
   background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-primary), 0.11)), to(rgba(var(--color-sf-primary), 0.11))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-surface));
 }
@@ -7049,7 +7132,7 @@ ejs-sidebar {
 .e-menu-wrapper,
 .e-menu-container {
   border: none;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: inline-block;
   line-height: 0;
 }
@@ -7244,9 +7327,8 @@ ejs-sidebar {
 .e-menu-wrapper .e-menu-header,
 .e-menu-container .e-menu-header {
   display: none;
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
   font-size: 16px;
-  font-weight: 400;
   height: 32px;
   line-height: 32px;
   text-align: left;
@@ -7441,7 +7523,7 @@ ejs-sidebar {
 .e-menu-wrapper.e-hamburger .e-popup.e-menu-popup,
 .e-menu-container.e-hamburger .e-popup.e-menu-popup {
   border: 0;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
   -webkit-box-shadow: none;
           box-shadow: none;
   display: block;
@@ -7463,7 +7545,7 @@ ejs-sidebar {
 .e-menu-wrapper.e-hamburger ul.e-menu .e-menu-item,
 .e-menu-container.e-hamburger ul.e-menu .e-menu-item {
   text-indent: 12px;
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-menu-wrapper.e-hamburger ul.e-menu .e-menu-item.e-blankicon,
 .e-menu-container.e-hamburger ul.e-menu .e-menu-item.e-blankicon {
@@ -7609,7 +7691,7 @@ ejs-sidebar {
   outline: 0 solid rgba(var(--color-sf-outline-variant));
   outline-offset: 0;
   background: rgba(var(--color-sf-on-surface), 0.08);
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-focused .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-focused .e-caret {
@@ -7626,7 +7708,7 @@ ejs-sidebar {
   outline: 0 solid rgba(var(--color-sf-primary), 0.08);
   outline-offset: 0;
   background: rgba(var(--color-sf-primary), 0.08);
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
 }
 .e-menu-wrapper .e-menu .e-menu-item.e-selected .e-caret, .e-menu-wrapper .e-menu .e-menu-item.e-active-item .e-caret,
 .e-menu-container .e-menu .e-menu-item.e-selected .e-caret,
@@ -7707,7 +7789,7 @@ ejs-sidebar {
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:hover,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav:hover {
-  border-radius: 2px;
+  border-radius: calc(var(--e-radius) * 0.125);
 }
 .e-menu-wrapper .e-menu-hscroll.e-hscroll .e-scroll-nav:focus,
 .e-menu-container .e-menu-hscroll.e-hscroll .e-scroll-nav:focus {
@@ -7782,7 +7864,7 @@ ejs-sidebar {
 .e-breadcrumb {
   display: block;
   background-color: transparent;
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-breadcrumb.e-breadcrumb-wrap-mode {
   display: -webkit-box;
@@ -7942,7 +8024,7 @@ ejs-sidebar {
 
 .e-breadcrumb-popup {
   border: 1px solid rgba(var(--color-sf-outline-variant));
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
           box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
   position: absolute;
@@ -8027,14 +8109,14 @@ ejs-sidebar {
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:hover, .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
   background: rgba(var(--color-sf-on-surface-variant), 0.08);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
   background: rgba(var(--color-sf-on-surface), 0.08);
 }
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:active {
   background: rgba(var(--color-sf-on-surface-variant), 0.12);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-breadcrumb .e-breadcrumb-item[data-active-item] .e-breadcrumb-text {
   color: rgba(var(--color-sf-on-surface));
@@ -8389,7 +8471,7 @@ ejs-sidebar {
 }
 .e-stepper.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) .e-icons.e-step-indicator {
   font-size: 32px;
-  border-radius: 9999px;
+  border-radius: 999px;
 }
 .e-stepper.e-step-type-indicator .e-step-content, .e-stepper.e-step-type-label .e-step-content {
   padding: 0 8px;
@@ -8520,7 +8602,7 @@ ejs-sidebar {
 }
 .e-stepper .e-step-container .e-step,
 .e-stepper .e-step-container .e-indicator {
-  border-radius: 9999px;
+  border-radius: 999px;
   min-width: 32px;
   min-height: 32px;
 }