@sankhyalabs/ez-design 3.0.0-beta.1 → 3.0.0

package/dist/default/ez-themed.css

@@ -2,6 +2,22 @@
 /* clean-css ignore:start */
 @import url(./icons/fonts/ez-icons.css);
 /* clean-css ignore:end */
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./fonts/roboto-latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
+
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(./fonts/roboto-latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
+
 /*Cores*/
 /*Textos*/
 /*Tamanho do texto*/
@@ -40,7 +56,8 @@
   --color--error-900: #99000F;
   --color--warning: #f2d410;
   --color--warning-200: #FDF8D8;
-  --color--warning-900: #EFB103;
+  --color--alert-warning-200: #FFF7D5;
+  --color--alert-warning-900: #8C6B00;
   --color-alert--cold-50: #E1E9FF;
   --color-alert--cold-800: #042eff;
   --color-alert--warm-50: #feede3;
@@ -81,6 +98,10 @@
   --background--strong: #e4eaf1;
   --background--xstrong: #383c45;
   --background--body: #fafcff;
+  --rgb-background--overlay: 43, 58, 84;
+  --background-blur--medium: 4px;
+  --opacity--bright: 0.1;
+  --opacity--soft: 0.4;
   --border--radius-small: 6px;
   --border--radius-medium: 12px;
   --border--radius-large: 24px;
@@ -89,6 +110,9 @@
   --border--large: 3px solid;
   --shadow: 0px 0px 16px 0px rgba(0, 38, 111, .12);
   --shadow-focus: 0 0 0 2px;
+  --shadow--small: 0 0 16px rgba(0, 38, 111, 0.07);
+  --shadow--medium: 0px 8px 24px rgba(0, 38, 111, 0.1);
+  --shadow--hard: 0 0 16px rgba(43, 58, 84, 0.24);
   --transition: .2s linear;
   --space--extra-small: 3px;
   --space--small: 6px;
@@ -100,31 +124,51 @@
   --most-visible: 3;
   --hover--inverted: #333333;
   --icon--color: #626e82;
-  --scrollbar--primary: var(--title--primary);
-  --scrollbar--secondary: var(--color--disable-primary); }
+  --icon--extra-small: 14px;
+  --icon--small: 16px;
+  --icon--medium: 18px;
+  --icon--extra-medium: 20px;
+  --icon--large: 24px;
+  --icon--extra-large: 32px;
+  --scrollbar--default: #626e82;
+  --scrollbar--background: #e5eaf0;
+  --scrollbar--hover: #2b3a54;
+  --scrollbar--clicked: #a2abb9; }
 
 html,
 body,
 body * {
   scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
+  scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
+  html::-webkit-scrollbar,
+  body::-webkit-scrollbar,
+  body *::-webkit-scrollbar {
+    background-color: var(--scrollbar--background);
+    width: var(--space--medium);
+    max-width: var(--space--medium);
+    min-width: var(--space--medium); }
   html::-webkit-scrollbar-track,
   body::-webkit-scrollbar-track,
   body *::-webkit-scrollbar-track {
-    background-color: var(--scrollbar--secondary);
+    background-color: var(--scrollbar--background);
     border-radius: var(--border--radius-small); }
   html::-webkit-scrollbar-thumb,
   body::-webkit-scrollbar-thumb,
   body *::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar--primary);
+    background-color: var(--scrollbar--default);
     border-radius: var(--border--radius-small); }
-  html::-webkit-scrollbar,
-  body::-webkit-scrollbar,
-  body *::-webkit-scrollbar {
-    background-color: var(--scrollbar--secondary);
-    width: var(--space--medium);
-    max-width: var(--space--medium);
-    min-width: var(--space--medium); }
+    html::-webkit-scrollbar-thumb:vertical:hover, html::-webkit-scrollbar-thumb:horizontal:hover,
+    body::-webkit-scrollbar-thumb:vertical:hover,
+    body::-webkit-scrollbar-thumb:horizontal:hover,
+    body *::-webkit-scrollbar-thumb:vertical:hover,
+    body *::-webkit-scrollbar-thumb:horizontal:hover {
+      background-color: var(--scrollbar--hover); }
+    html::-webkit-scrollbar-thumb:vertical:active, html::-webkit-scrollbar-thumb:horizontal:active,
+    body::-webkit-scrollbar-thumb:vertical:active,
+    body::-webkit-scrollbar-thumb:horizontal:active,
+    body *::-webkit-scrollbar-thumb:vertical:active,
+    body *::-webkit-scrollbar-thumb:horizontal:active {
+      background-color: var(--scrollbar--clicked); }
 
 /*Medias*/
 body {
@@ -137,7 +181,8 @@ body {
   display: flex;
   flex-wrap: wrap;
   align-self: flex-start;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+  width: 100%; }
   .ez-col--stretch {
     align-self: stretch; }
   .ez-col--undefined {
@@ -298,6 +343,8 @@ body {
     justify-content: space-around; }
   .ez-flex--justify-evenly {
     justify-content: space-evenly; }
+  .ez-flex--justify-center {
+    justify-content: center; }
   .ez-flex--align-items-start {
     align-items: flex-start; }
   .ez-flex--align-items-end {
@@ -787,11 +834,11 @@ body {
   .ez-title--extra-large {
     font-size: 24px; }
   .ez-title--center {
-    text-align: center; }
+    justify-content: center; }
   .ez-title--right {
-    text-align: right; }
+    justify-content: flex-end; }
   .ez-title--left {
-    text-align: left; }
+    justify-content: flex-start; }
   .ez-title--primary {
     color: #2b3a54; }
   .ez-title--secondary {
@@ -1061,14 +1108,14 @@ body {
   .ez-box--no-border {
     border: none; }
   .ez-box--info--success {
-    background-color: #157A00;
-    border-radius: 12px;
+    background-color: #E7F6E0;
     color: #157A00;
+    border-radius: 12px;
     padding: 2px 12px; }
   .ez-box--info--warning {
-    background-color: #efb103;
-    border-radius: 12px;
+    background-color: #fff7d5;
     color: #8c6b00;
+    border-radius: 12px;
     padding: 2px 12px; }
 
 .ez-breadcrumb {
@@ -2561,6 +2608,21 @@ body {
       .ez-toggle-group__item--disabled:hover {
         background-color: #e5eaf0; }
 
+.ez-scrim {
+  position: fixed;
+  padding: 0;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  z-index: var(--more-visible); }
+  .ez-scrim--light {
+    background-color: rgba(var(--rgb-background--overlay), var(--opacity--bright)); }
+  .ez-scrim--medium {
+    background-color: rgba(var(--rgb-background--overlay), var(--opacity--soft));
+    backdrop-filter: blur(var(--background-blur--medium)); }
+
 /**
  ****************************
  * Generic Styles
@@ -8401,7 +8463,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     font-family: var(--font-pattern);
     font-size: var(--text--medium);
     color: var(--text--primary); }
-    .ez-grid__cell-body.ag-cell-value:not(.ag-cell-range-right):not(.ag-cell-range-single-cell), .ez-grid__cell-body.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell), .ez-grid__cell-body.ag-cell-last-right-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
+    .ez-grid__cell-body.ag-cell-value:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus), .ez-grid__cell-body.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus), .ez-grid__cell-body.ag-cell-last-right-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus) {
       border-right-color: var(--color--strokes); }
     .ez-grid__cell-body.ag-cell[col-id="statusColumn"] {
       display: flex;
@@ -8416,8 +8478,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
       .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] .ag-selection-checkbox {
         margin: 0 5px; }
       .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] .ag-checkbox-input-wrapper {
-        width: 18px;
-        height: 18px; }
+        width: 20px;
+        height: 20px; }
         .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] .ag-checkbox-input-wrapper input[type="checkbox"] {
           position: relative;
           cursor: pointer;
@@ -8427,8 +8489,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
           content: "";
           display: block;
           position: absolute;
-          width: 18px;
-          height: 18px;
+          width: 20px;
+          height: 20px;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
@@ -8449,8 +8511,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
           -ms-transform: rotate(45deg);
           transform: rotate(45deg);
           position: absolute;
-          top: 4px;
-          left: 6.5px; }
+          top: 5.5px;
+          left: 7.5px; }
         .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] .ag-checkbox-input-wrapper input[type="checkbox"]:indeterminate::after {
           content: "";
           display: block;
@@ -8471,7 +8533,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     border: 1px solid transparent;
     border-radius: 50%;
     margin: 0 auto; }
-  .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-value:not(.ag-cell-range-right):not(.ag-cell-range-single-cell), .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell), .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-last-right-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
+  .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-value:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus), .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus), .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell-last-right-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell):not(.ag-cell-focus) {
     border-right-color: var(--color--strokes); }
   .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell[col-id="statusColumn"] {
     display: flex;
@@ -8486,8 +8548,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] .ag-selection-checkbox {
       margin: 0 5px; }
     .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] .ag-checkbox-input-wrapper {
-      width: 18px;
-      height: 18px; }
+      width: 20px;
+      height: 20px; }
       .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] .ag-checkbox-input-wrapper input[type="checkbox"] {
         position: relative;
         cursor: pointer;
@@ -8497,8 +8559,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
         content: "";
         display: block;
         position: absolute;
-        width: 18px;
-        height: 18px;
+        width: 20px;
+        height: 20px;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
@@ -8519,8 +8581,8 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
-        top: 4px;
-        left: 6.5px; }
+        top: 5.5px;
+        left: 7.5px; }
       .ez-grid .ag-ltr .ez-grid__cell-body.ag-cell[col-id="checkBoxColumn"] .ag-checkbox-input-wrapper input[type="checkbox"]:indeterminate::after {
         content: "";
         display: block;
@@ -8637,11 +8699,16 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     border: none;
     background-color: var(--background--medium); }
   .ez-grid .ag-ltr .ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected) {
-    border-right: var(--border--small) transparent;
-    border-left: var(--border--small) transparent;
-    border-top: var(--border--small) transparent;
-    border-bottom: var(--border--small) transparent;
+    border-right: var(--border--small) var(--color--primary-600);
+    border-left: var(--border--small) var(--color--primary-600);
+    border-top: var(--border--small) var(--color--primary-600);
+    border-bottom: var(--border--small) var(--color--primary-600);
     outline: none; }
+    .ez-grid .ag-ltr .ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected)[col-id="statusColumn"], .ez-grid .ag-ltr .ag-has-focus .ag-cell-focus:not(.ag-cell-range-selected)[col-id="checkBoxColumn"] {
+      border-right: var(--border--small) transparent;
+      border-left: var(--border--small) transparent;
+      border-top: var(--border--small) transparent;
+      border-bottom: var(--border--small) transparent; }
   .ez-grid .ag-row-odd {
     border-bottom: var(--border--small) var(--color--strokes); }
   .ez-grid .ag-row-even {
@@ -8661,58 +8728,78 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     max-height: 150px; }
   .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child {
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
-  .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-track {
-    background-color: var(--scrollbar--secondary); }
-  .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar--primary);
-    border-radius: var(--border--radius-small); }
+    scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
   .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar {
-    background-color: var(--scrollbar--secondary);
+    background-color: var(--scrollbar--background);
     width: var(--space--medium);
     max-width: var(--space--medium);
     min-width: var(--space--medium); }
+  .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-track {
+    background-color: var(--scrollbar--background);
+    border-radius: var(--border--radius-small); }
+  .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar--default);
+    border-radius: var(--border--radius-small); }
+    .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb:vertical:hover, .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb:horizontal:hover {
+      background-color: var(--scrollbar--hover); }
+    .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb:vertical:active, .ez-grid .ag-tabs.ag-menu.ag-focus-managed.ag-ltr.ag-popup-child::-webkit-scrollbar-thumb:horizontal:active {
+      background-color: var(--scrollbar--clicked); }
   .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed {
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
+    scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
   .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar {
-    background-color: var(--scrollbar--secondary);
+    background-color: var(--scrollbar--background);
     width: var(--space--medium);
     max-width: var(--space--medium);
     min-width: var(--space--medium); }
   .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-track {
-    background-color: var(--scrollbar--secondary); }
+    background-color: var(--scrollbar--background);
+    border-radius: var(--border--radius-small); }
   .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar--primary);
+    background-color: var(--scrollbar--default);
     border-radius: var(--border--radius-small); }
+    .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:vertical:hover, .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:horizontal:hover {
+      background-color: var(--scrollbar--hover); }
+    .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:vertical:active, .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:horizontal:active {
+      background-color: var(--scrollbar--clicked); }
   .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed {
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
+    scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
   .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar {
-    background-color: var(--scrollbar--secondary);
+    background-color: var(--scrollbar--background);
     width: var(--space--medium);
     max-width: var(--space--medium);
     min-width: var(--space--medium); }
   .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-track {
-    background-color: var(--scrollbar--secondary); }
+    background-color: var(--scrollbar--background);
+    border-radius: var(--border--radius-small); }
   .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar--primary);
+    background-color: var(--scrollbar--default);
     border-radius: var(--border--radius-small); }
+    .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:vertical:hover, .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:horizontal:hover {
+      background-color: var(--scrollbar--hover); }
+    .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:vertical:active, .ez-grid .ag-virtual-list-viewport.ag-filter-virtual-list-viewport.ag-focus-managed::-webkit-scrollbar-thumb:horizontal:active {
+      background-color: var(--scrollbar--clicked); }
   .ez-grid .ag-body-viewport {
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
+    scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
   .ez-grid .ag-center-cols-viewport {
     overflow-x: hidden; }
   .ez-grid .ag-body-viewport::-webkit-scrollbar {
-    background-color: var(--scrollbar--secondary);
+    background-color: var(--scrollbar--background);
     width: var(--space--medium);
     max-width: var(--space--medium);
     min-width: var(--space--medium); }
   .ez-grid .ag-body-viewport::-webkit-scrollbar-track {
-    background-color: var(--scrollbar--secondary); }
+    background-color: var(--scrollbar--background);
+    border-radius: var(--border--radius-small); }
   .ez-grid .ag-body-viewport::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar--primary);
+    background-color: var(--scrollbar--default);
     border-radius: var(--border--radius-small); }
+    .ez-grid .ag-body-viewport::-webkit-scrollbar-thumb:vertical:hover, .ez-grid .ag-body-viewport::-webkit-scrollbar-thumb:horizontal:hover {
+      background-color: var(--scrollbar--hover); }
+    .ez-grid .ag-body-viewport::-webkit-scrollbar-thumb:vertical:active, .ez-grid .ag-body-viewport::-webkit-scrollbar-thumb:horizontal:active {
+      background-color: var(--scrollbar--clicked); }
   .ez-grid .ag-virtual-list-viewport.ag-column-select-virtual-list-viewport.ag-focus-managed {
     padding: 0; }
   .ez-grid .ag-virtual-list-item.ag-column-select-virtual-list-item {
@@ -8727,16 +8814,28 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
     margin: 0; }
   .ez-grid .ag-body-horizontal-scroll-viewport {
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar--primary) var(--scrollbar--secondary); }
+    scrollbar-color: var(--scrollbar--clicked) var(--scrollbar--background); }
   .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
-    background-color: var(--scrollbar--secondary);
+    background-color: var(--scrollbar--background);
     height: var(--space--medium);
     max-height: var(--space--medium);
     min-height: var(--space--medium); }
   .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
-    background-color: var(--scrollbar--secondary); }
+    background-color: var(--scrollbar--background);
+    border-radius: var(--border--radius-small); }
   .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
-    background-color: var(--scrollbar--primary);
+    background-color: var(--scrollbar--default);
     border-radius: var(--border--radius-small); }
+    .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:vertical:hover, .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:horizontal:hover {
+      background-color: var(--scrollbar--hover); }
+    .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:vertical:active, .ez-grid .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:horizontal:active {
+      background-color: var(--scrollbar--clicked); }
   .ez-grid .ag-checkbox-input-wrapper.ag-checked > input[type="checkbox"]:before {
     border: var(--border--medium) var(--color--primary); }
+  .ez-grid .ag-header__selection-checkbox {
+    padding-left: 2px;
+    --ez-check--outter-gap: 0px;
+    --ez-check--focus--background-color: transparent;
+    --ez-check--hover--background-color: transparent; }
+  .ez-grid .ag-header-row-column {
+    display: flex; }