ids-enterprise-wc 1.0.0-beta.14 → 1.0.0-beta.16

package/components/ids-data-grid/ids-data-grid.css

@@ -1,7 +1,13 @@
 /* Ids Data Grid Component - Filter */
+.ids-data-grid {
+  --ids-button-formatter-color-text-default: var(--ids-data-grid-filter-icon-color);
+  --ids-button-formatter-color-background-hover: var(--ids-data-grid-filter-icon-color-background-hover);
+  --ids-button-formatter-color-text-hover: var(--ids-data-grid-filter-icon-color-hover);
+}
 .ids-data-grid ::slotted([slot^=filter-]) {
   align-items: center;
   display: flex;
+  position: relative;
 }
 .ids-data-grid .ids-data-grid-header-cell-content.vertical-align-center {
   position: relative;
@@ -43,12 +49,9 @@
   border-color: var(--ids-data-grid-header-checkbox-color-border);
 }
 
-.ids-data-grid-column-groups {
-  border-block-end: 1px solid var(--ids-data-grid-header-color-border);
-}
-
 .ids-data-grid-header-cell {
   border-inline-start: 1px solid var(--ids-data-grid-header-color-border);
+  border-block-end: 1px solid var(--ids-data-grid-header-color-border);
   background-color: var(--ids-data-grid-header-color-background-default);
   min-height: 28px;
   position: relative;
@@ -56,8 +59,8 @@
 .ids-data-grid-header-cell:first-child {
   border-inline-start-width: 0;
 }
-.ids-data-grid-header-cell:hover {
-  background-color: var(--ids-data-grid-header-hover-background-color);
+.ids-data-grid-header-cell:hover.is-actionable {
+  background-color: var(--ids-data-grid-header-color-background-hover);
 }
 .ids-data-grid-header-cell.align-center .ids-data-grid-header-cell-content, .ids-data-grid-header-cell.align-center .ids-data-grid-header-cell-filter-wrapper {
   justify-content: center;
@@ -65,6 +68,10 @@
 .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-content, .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-filter-wrapper {
   justify-content: flex-end;
 }
+.ids-data-grid-header-cell.align-right .is-sortable .ids-data-grid-header-text {
+  padding-inline-end: var(--ids-data-grid-padding-lg);
+  padding-inline-start: 5px;
+}
 .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-filter-wrapper ids-menu-button {
   margin-inline-start: 2px;
 }
@@ -96,7 +103,7 @@
   top: calc(50% - 9px);
 }
 .ids-data-grid-header-cell.align-right .reorderer {
-  inset-inline-end: 8px;
+  inset-inline-end: 5px;
   inset-inline-start: initial;
 }
 .ids-data-grid-header-cell:last-child .resizer {
@@ -112,7 +119,7 @@
   width: 110px;
 }
 .ids-data-grid-header-cell.active-drag-column {
-  background-color: var(--ids-data-grid-header-color-background-placeholder-dragging);
+  background-color: var(--ids-data-grid-header-color-background-default-placeholder-dragging);
 }
 .ids-data-grid-header-cell.active-drag-column .sort-indicator {
   opacity: 0;
@@ -231,7 +238,7 @@
   margin-inline-start: var(--ids-space-50);
 }
 .header-expander:hover {
-  color: var(--ids-data-grid-header-expander-active-color);
+  color: var(--ids-data-grid-header-expander-color-active);
 }
 
 :host([show-header-expander]) .header-expander,
@@ -282,11 +289,11 @@
   width: 0;
 }
 .ids-data-grid-sort-arrows::before {
-  border-top: 5px solid var(--ids-data-grid-header-color-background-default);
+  border-top: 5px solid var(--ids-data-grid-header-drag-arrow-color-background);
   top: -6px;
 }
 .ids-data-grid-sort-arrows::after {
-  border-bottom: 5px solid var(--ids-data-grid-header-color-background-default);
+  border-bottom: 5px solid var(--ids-data-grid-header-drag-arrow-color-background);
   bottom: -9px;
 }
 
@@ -327,7 +334,10 @@ th.ids-data-grid-header-cell {
   inset-inline-start: -11px;
 }
 .ids-data-grid[data-row-height=md] .sort-indicator {
-  margin-inline-start: -6px;
+  margin-inline-start: -8px;
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-header-cell.align-right .reorderer {
+  inset-inline-end: 3px;
 }
 .ids-data-grid[data-row-height=sm] .ids-data-grid-header-text {
   padding: var(--ids-data-grid-header-sm-padding);
@@ -336,9 +346,6 @@ th.ids-data-grid-header-cell {
   display: none;
 }
 .ids-data-grid[data-row-height=sm] .sort-indicator {
-  margin-inline-start: -2px;
-}
-.ids-data-grid[data-row-height=sm] .align-right .sort-indicator {
   margin-inline-start: -4px;
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-header-text {
@@ -349,11 +356,16 @@ th.ids-data-grid-header-cell {
 }
 .ids-data-grid[data-row-height=xs] .sort-indicator {
   margin-inline-start: -2px;
-  margin-block-start: -2px;
+  margin-inline-end: -2px;
+  margin-block-start: -3px;
 }
 .ids-data-grid[data-row-height=xs] .ids-data-grid-checkbox-container {
   padding-top: 2px;
 }
+.ids-data-grid[data-row-height=xs] .ids-data-grid-header-cell.align-right .is-sortable .ids-data-grid-header-text {
+  padding-inline-end: var(--ids-data-grid-padding-xs);
+  padding-inline-start: 5px;
+}
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-header-text {
   padding: var(--ids-data-grid-header-xxs-padding);
 }
@@ -362,7 +374,7 @@ th.ids-data-grid-header-cell {
 }
 .ids-data-grid[data-row-height=xxs] .sort-indicator {
   margin-inline-start: 0;
-  margin-block-start: -5px;
+  margin-block-start: -1px;
   height: 22px;
 }
 .ids-data-grid[data-row-height=xxs] .sort-indicator > ids-icon:first-child {
@@ -371,16 +383,21 @@ th.ids-data-grid-header-cell {
 .ids-data-grid[data-row-height=xxs] .align-right .sort-indicator {
   margin-inline-start: 0;
 }
-.ids-data-grid[data-row-height=xxs] .ids-data-grid-checkbox-container {
-  padding-top: 1px;
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-header-text .ids-data-grid-checkbox-container {
+  padding-top: 3px;
+}
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-header-cell.align-right .is-sortable .ids-data-grid-header-text {
+  padding-inline-end: 3px;
+  padding-inline-start: 3px;
 }
-.ids-data-grid[data-row-height=xxs] ids-input {
+.ids-data-grid[data-row-height=xxs] ids-input,
+.ids-data-grid[data-row-height=xxs] ids-trigger-field {
   --ids-input-height-10: 24px;
 }
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-header-cell-filter-wrapper {
-  padding-inline-start: calc(var(--ids-data-grid-padding-xxs) + 1px);
-  padding-inline-end: calc(var(--ids-data-grid-padding-xxs) + 1px);
-  padding-block-end: calc(var(--ids-data-grid-padding-xxs) + 2px);
+  padding-inline-start: calc(var(--ids-data-grid-padding-xxs) + 2px);
+  padding-inline-end: calc(var(--ids-data-grid-padding-xxs) + 2px);
+  padding-block-end: var(--ids-data-grid-padding-xxs-1px);
 }
 
 :host([dir=rtl]) .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-content, :host([dir=rtl]) .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-filter-wrapper {
@@ -470,6 +487,10 @@ th.ids-data-grid-header-cell {
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-cell ids-hyperlink {
   margin: var(--ids-data-grid-padding-xxs);
 }
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell.is-inline .text-ellipsis {
+  padding-inline-start: var(--ids-data-grid-padding-xs);
+  padding-inline-end: var(--ids-data-grid-padding-xs);
+}
 .ids-data-grid[data-row-height=xxs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell-content:not(.vertical-align-center) .ids-data-grid-header-text {
   padding-inline-start: var(--ids-data-grid-padding-xxs);
   transition: padding var(--ids-motion-duration) var(--ids-motion-ease);
@@ -494,7 +515,15 @@ tr.ids-data-grid-row {
 }
 
 .ids-data-grid.row-navigation .ids-data-grid-row:focus-within {
+  transform-style: preserve-3d;
+}
+.ids-data-grid.row-navigation .ids-data-grid-row:focus-within::after {
   box-shadow: var(--ids-data-grid-row-shadow-focus);
+  content: " ";
+  display: block;
+  height: 100%;
+  position: absolute;
+  width: 100%;
 }
 .ids-data-grid.row-navigation .ids-data-grid-row .ids-data-grid-cell:focus {
   box-shadow: none;
@@ -553,6 +582,9 @@ tr.ids-data-grid-row {
   margin-inline-start: auto;
   margin-inline-end: 0;
 }
+.ids-data-grid-cell.align-right ids-input {
+  text-align: right;
+}
 .ids-data-grid-cell.is-readonly {
   background-color: var(--ids-data-grid-cell-color-background-readonly);
 }
@@ -570,8 +602,23 @@ tr.ids-data-grid-row {
   outline: 1px solid var(--ids-color-border-focus);
   outline-offset: -1px;
 }
-.ids-data-grid-cell.is-editable.is-inline {
-  box-shadow: inset 0 0 0 4px var(--ids-data-grid-cell-color-background-default), inset 0 0 0 5px var(--ids-input-color-border-default);
+.ids-data-grid-cell.is-editable.is-inline.formatter-tree .ids-data-grid-tree-container {
+  height: 100%;
+  width: 100%;
+}
+.ids-data-grid-cell.is-editable.is-inline.formatter-tree .ids-data-grid-tree-field-container {
+  height: 100%;
+  width: 100%;
+}
+.ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: end;
+  width: 100%;
+}
+.ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  margin-inline-end: -8px;
 }
 .ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
   --ids-trigger-field-button-margin: 0;
@@ -586,9 +633,13 @@ tr.ids-data-grid-row {
   padding-inline-end: 0;
 }
 .ids-data-grid-cell.is-editable .editor-cell-icon {
-  margin-inline-end: 10px;
+  margin-inline-end: 12px;
+  margin-block-start: 2px;
   display: none;
 }
+.ids-data-grid-cell.is-editable ids-trigger-button::part(button) {
+  color: inherit;
+}
 .ids-data-grid-cell.is-editable:not(.is-inline):not(.is-invalid):focus .editor-cell-icon, .ids-data-grid-cell.is-editable:not(.is-inline):not(.is-invalid):hover .editor-cell-icon {
   display: flex;
 }
@@ -639,7 +690,6 @@ tr.ids-data-grid-row {
   text-transform: uppercase;
 }
 .ids-data-grid-cell.frozen {
-  background-color: var(--ids-data-grid-cell-color-background-default);
   position: sticky;
   z-index: 3;
 }
@@ -692,12 +742,26 @@ tr.ids-data-grid-row {
   display: inline-block;
   margin-inline: 2px;
   position: absolute;
-  top: 2px;
+  inset-block-start: 2px;
   z-index: 1;
 }
-.ids-data-grid-cell.is-dirty.is-inline::before {
-  margin-inline: 6px;
-  top: 6px;
+.ids-data-grid-cell.is-dirty.is-inline.formatter-tree::before {
+  display: none;
+  content: none;
+}
+.ids-data-grid-cell.is-dirty.is-inline.formatter-tree .ids-data-grid-tree-field-container {
+  position: relative;
+}
+.ids-data-grid-cell.is-dirty.is-inline.formatter-tree .ids-data-grid-tree-field-container::before {
+  border-color: var(--ids-input-dirty-indicator-color-background-dirty) transparent transparent var(--ids-input-dirty-indicator-color-background-dirty);
+  border-style: solid;
+  border-width: 5px;
+  content: "";
+  display: inline-block;
+  margin-inline: 2px;
+  position: absolute;
+  inset-block-start: 2px;
+  z-index: 1;
 }
 .ids-data-grid-cell.is-invalid {
   background-color: var(--ids-data-grid-cell-color-background-error);
@@ -713,9 +777,6 @@ tr.ids-data-grid-row {
   margin-inline: 3px;
   top: 3px;
 }
-[data-row-height=xxs] .is-editable.is-inline {
-  box-shadow: inset 0 0 0 2px var(--ids-input-color-background-default), inset 0 0 0 3px var(--ids-input-color-border-default);
-}
 [data-row-height=xxs] ids-button {
   --ids-button-icon-padding: 2px;
 }
@@ -741,6 +802,9 @@ tr.ids-data-grid-row {
   padding: 0 1px;
   --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
 }
+[data-row-height=xxs] .ids-data-grid-cell .ids-data-grid-checkbox-container:not(.is-selection-checkbox) {
+  padding-inline: var(--ids-data-grid-padding-xxs);
+}
 
 [data-row-height=xs] .ids-data-grid-cell.is-dirty::before {
   border-width: 4px;
@@ -749,9 +813,6 @@ tr.ids-data-grid-row {
   margin-inline: 3px;
   top: 3px;
 }
-[data-row-height=xs] .is-editable.is-inline {
-  box-shadow: inset 0 0 0 2px var(--ids-input-color-background-default), inset 0 0 0 3px var(--ids-input-color-border-default);
-}
 [data-row-height=xs] ids-button {
   --ids-button-icon-padding: 3px;
 }
@@ -775,14 +836,10 @@ tr.ids-data-grid-row {
 [data-row-height=xs] .ids-data-grid-cell.is-editing.is-dropdown.is-inline ids-dropdown {
   padding: 0 2px;
 }
-
-[data-row-height=sm] .is-editable.is-inline {
-  box-shadow: inset 0 0 0 3px var(--ids-input-color-background-default), inset 0 0 0 4px var(--ids-input-color-border-default);
-}
-[data-row-height=sm] .ids-data-grid-cell.is-dirty.is-inline::before {
-  margin-inline: 5px;
-  top: 5px;
+[data-row-height=xs] .ids-data-grid-cell .ids-data-grid-checkbox-container:not(.is-selection-checkbox) {
+  padding-inline: var(--ids-data-grid-padding-xs);
 }
+
 [data-row-height=sm] ids-button {
   --ids-button-icon-padding: 4px;
 }
@@ -796,6 +853,9 @@ tr.ids-data-grid-row {
   --ids-trigger-field-button-margin: -1px;
   --ids-button-tertiary-color-background-hover: transparent;
 }
+[data-row-height=sm] .ids-data-grid-cell .ids-data-grid-checkbox-container:not(.is-selection-checkbox) {
+  padding-inline: var(--ids-data-grid-padding-sm);
+}
 
 [data-row-height=md] .ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
   margin-inline-end: var(--ids-data-grid-padding-sm);
@@ -804,6 +864,13 @@ tr.ids-data-grid-row {
   --ids-trigger-field-button-margin: -3px;
   --ids-button-tertiary-color-background-hover: transparent;
 }
+[data-row-height=md] .ids-data-grid-cell .ids-data-grid-checkbox-container:not(.is-selection-checkbox) {
+  padding-inline: var(--ids-data-grid-padding-md);
+}
+
+[data-row-height=lg] .ids-data-grid-cell .ids-data-grid-checkbox-container:not(.is-selection-checkbox) {
+  padding-inline: var(--ids-data-grid-padding-lg);
+}
 
 .ids-data-grid.is-list-style .ids-data-grid-cell {
   border-inline-start-width: 0;
@@ -835,6 +902,10 @@ td.ids-data-grid-cell {
   border-color: var(--ids-input-dirty-indicator-color-background-dirty) var(--ids-input-dirty-indicator-color-background-dirty) transparent transparent;
 }
 
+.ids-trigger-field-slot-trigger-end {
+  margin-inline-end: 0;
+}
+
 .hide {
   display: none;
 }
@@ -946,6 +1017,7 @@ td.ids-data-grid-cell {
  */
 :root {
   --ids-data-grid-column-widths: repeat(1, minmax(110px, 1fr));
+  contain: content;
 }
 
 .ids-data-grid {
@@ -954,7 +1026,6 @@ td.ids-data-grid-cell {
   border-radius: var(--ids-border-radius-01);
   border-collapse: collapse;
   box-sizing: border-box;
-  contain: content;
   overflow: auto;
   width: 100%;
   display: inline-grid;
@@ -967,9 +1038,17 @@ td.ids-data-grid-cell {
 .ids-data-grid .ids-data-grid-checkbox-container {
   cursor: var(--ids-cursor-pointer);
   display: flex;
-  justify-content: center;
   width: 100%;
 }
+.ids-data-grid .ids-data-grid-cell.align-left .ids-data-grid-checkbox-container {
+  justify-content: start;
+}
+.ids-data-grid .ids-data-grid-cell.align-center .ids-data-grid-checkbox-container {
+  justify-content: center;
+}
+.ids-data-grid .ids-data-grid-cell.align-right .ids-data-grid-checkbox-container {
+  justify-content: end;
+}
 .ids-data-grid .ids-data-grid-checkbox {
   position: absolute;
   border: var(--ids-checkbox-border);
@@ -1089,85 +1168,763 @@ td.ids-data-grid-cell {
   flex-direction: row;
   align-items: center;
 }
-.ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
-  padding-inline-start: 0;
+.ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .ids-data-grid-tree-field-container .text-ellipsis {
+  margin-inline-start: 0;
 }
 .ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline: 4px;
+  padding-inline-start: 4px;
+  padding-inline-end: 0;
 }
 .ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
   overflow: initial;
-  padding-inline-start: 40px;
 }
 .ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis ids-hyperlink {
   margin-inline-start: 0;
 }
-.ids-data-grid [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
-  padding-inline-start: 64px;
+.ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
-.ids-data-grid [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 55px;
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell.is-dirty:not(.is-inline).formatter-text::before {
+  inset-block-start: 1px;
+  margin-inline-start: 1px;
 }
-.ids-data-grid [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
-  padding-inline-start: 0;
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell.is-dirty.is-inline.formatter-text::before {
+  inset-block-start: 3px;
+  margin-inline-start: 3px;
 }
-.ids-data-grid [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
-  padding-inline-start: 91px;
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree) {
+  position: relative;
 }
-.ids-data-grid [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 82px;
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree)::after {
+  border: 1px solid var(--ids-input-color-border-default);
+  border-radius: var(--ids-border-radius-01);
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  margin: 2px;
+  height: calc(100% - 4px);
+  position: absolute;
+  width: calc(100% - 4px);
 }
-.ids-data-grid [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
-  padding-inline-start: 0;
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis {
+  position: relative;
 }
-.ids-data-grid [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
-  padding-inline-start: 118px;
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  border: 1px solid var(--ids-input-color-border-default);
+  border-radius: var(--ids-border-radius-01);
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  margin: 2px;
+  height: calc(100% - 4px);
+  position: absolute;
+  width: calc(100% - 4px);
 }
-.ids-data-grid [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 109px;
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  margin-inline-end: -4px;
 }
-.ids-data-grid [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-tree-field-container .text-ellipsis {
   padding-inline-start: 0;
 }
-.ids-data-grid [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
-  padding-inline-start: 145px;
+.ids-data-grid[data-row-height=xxs] [aria-level="1"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 30px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="1"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="1"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
 }
-.ids-data-grid [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 136px;
+.ids-data-grid[data-row-height=xxs] [aria-level="1"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 3px;
+  margin-inline-start: 3px;
 }
-.ids-data-grid [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+.ids-data-grid[data-row-height=xxs] [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 54px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="2"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 24px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="2"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="2"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 3px;
+  margin-inline-start: 3px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 66px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="3"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 36px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="3"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="3"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 3px;
+  margin-inline-start: 3px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 78px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="4"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 48px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="4"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="4"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 3px;
+  margin-inline-start: 3px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 90px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="5"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 60px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="5"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="5"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 3px;
+  margin-inline-start: 3px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 102px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="6"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 72px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="6"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="6"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 3px;
+  margin-inline-start: 3px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 114px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="7"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 84px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="7"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="7"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 3px;
+  margin-inline-start: 3px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 126px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="8"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 96px;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="8"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xxs] [aria-level="8"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 3px;
+  margin-inline-start: 3px;
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell.is-dirty:not(.is-inline).formatter-text::before {
+  inset-block-start: 1px;
+  margin-inline-start: 1px;
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell.is-dirty.is-inline.formatter-text::before {
+  inset-block-start: 4px;
+  margin-inline-start: 4px;
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree) {
+  position: relative;
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree)::after {
+  border: 1px solid var(--ids-input-color-border-default);
+  border-radius: var(--ids-border-radius-01);
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  margin: 2px;
+  height: calc(100% - 4px);
+  position: absolute;
+  width: calc(100% - 4px);
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis {
+  position: relative;
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  border: 1px solid var(--ids-input-color-border-default);
+  border-radius: var(--ids-border-radius-01);
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  margin: 2px;
+  height: calc(100% - 4px);
+  position: absolute;
+  width: calc(100% - 4px);
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  margin-inline-end: -2px;
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-tree-field-container .text-ellipsis {
   padding-inline-start: 0;
 }
-.ids-data-grid [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
-  padding-inline-start: 172px;
+.ids-data-grid[data-row-height=xs] [aria-level="1"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 32px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="1"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="1"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="1"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 4px;
+  margin-inline-start: 4px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 55px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="2"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 23px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="2"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="2"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 4px;
+  margin-inline-start: 4px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 68px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="3"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 36px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="3"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="3"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 4px;
+  margin-inline-start: 4px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 81px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="4"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 49px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="4"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="4"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 4px;
+  margin-inline-start: 4px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 94px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="5"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 62px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="5"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="5"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 4px;
+  margin-inline-start: 4px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 107px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="6"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 75px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="6"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="6"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 4px;
+  margin-inline-start: 4px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 120px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="7"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 88px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="7"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="7"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 4px;
+  margin-inline-start: 4px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 133px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="8"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 101px;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="8"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xs] [aria-level="8"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 4px;
+  margin-inline-start: 4px;
 }
-.ids-data-grid [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 163px;
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell.is-dirty:not(.is-inline).formatter-text::before {
+  inset-block-start: 1px;
+  margin-inline-start: 1px;
 }
-.ids-data-grid [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell.is-dirty.is-inline.formatter-text::before {
+  inset-block-start: 5px;
+  margin-inline-start: 5px;
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree) {
+  position: relative;
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree)::after {
+  border: 1px solid var(--ids-input-color-border-default);
+  border-radius: var(--ids-border-radius-01);
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  margin: 3px;
+  height: calc(100% - 6px);
+  position: absolute;
+  width: calc(100% - 6px);
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis {
+  position: relative;
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  border: 1px solid var(--ids-input-color-border-default);
+  border-radius: var(--ids-border-radius-01);
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  margin: 3px;
+  height: calc(100% - 6px);
+  position: absolute;
+  width: calc(100% - 6px);
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  margin-inline-end: -5px;
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-tree-field-container .text-ellipsis {
   padding-inline-start: 0;
 }
-.ids-data-grid [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
-  padding-inline-start: 199px;
+.ids-data-grid[data-row-height=sm] [aria-level="1"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 34px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="1"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="1"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="1"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 5px;
+  margin-inline-start: 5px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 57px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="2"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 23px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="2"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="2"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 5px;
+  margin-inline-start: 5px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 72px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="3"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 38px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="3"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="3"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 5px;
+  margin-inline-start: 5px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 87px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="4"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 53px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="4"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="4"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 5px;
+  margin-inline-start: 5px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 102px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="5"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 68px;
 }
-.ids-data-grid [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 190px;
+.ids-data-grid[data-row-height=sm] [aria-level="5"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="5"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 5px;
+  margin-inline-start: 5px;
 }
-.ids-data-grid [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+.ids-data-grid[data-row-height=sm] [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 117px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="6"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 83px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="6"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="6"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 5px;
+  margin-inline-start: 5px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 132px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="7"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 98px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="7"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="7"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 5px;
+  margin-inline-start: 5px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 147px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="8"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 113px;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="8"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=sm] [aria-level="8"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 5px;
+  margin-inline-start: 5px;
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell.is-dirty:not(.is-inline).formatter-text::before {
+  inset-block-start: 2px;
+  margin-inline-start: 2px;
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell.is-dirty.is-inline.formatter-text::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree) {
+  position: relative;
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree)::after {
+  border: 1px solid var(--ids-input-color-border-default);
+  border-radius: var(--ids-border-radius-01);
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  margin: 4px;
+  height: calc(100% - 8px);
+  position: absolute;
+  width: calc(100% - 8px);
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis {
+  position: relative;
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  border: 1px solid var(--ids-input-color-border-default);
+  border-radius: var(--ids-border-radius-01);
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  margin: 4px;
+  height: calc(100% - 8px);
+  position: absolute;
+  width: calc(100% - 8px);
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  margin-inline-end: -8px;
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-tree-field-container .text-ellipsis {
   padding-inline-start: 0;
 }
-.ids-data-grid [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
-  padding-inline-start: 226px;
+.ids-data-grid[data-row-height=md] [aria-level="1"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 40px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="1"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=md] [aria-level="1"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=md] [aria-level="1"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 60px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="2"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 20px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="2"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
 }
-.ids-data-grid [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 217px;
+.ids-data-grid[data-row-height=md] [aria-level="2"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
 }
-.ids-data-grid [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+.ids-data-grid[data-row-height=md] [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 77px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="3"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 37px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="3"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=md] [aria-level="3"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 94px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="4"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 54px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="4"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=md] [aria-level="4"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 111px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="5"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 71px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="5"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=md] [aria-level="5"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 128px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="6"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 88px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="6"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=md] [aria-level="6"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 145px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="7"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 105px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="7"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=md] [aria-level="7"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 162px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="8"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 122px;
+}
+.ids-data-grid[data-row-height=md] [aria-level="8"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=md] [aria-level="8"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=lg] .ids-data-grid-cell.is-dirty:not(.is-inline).formatter-text::before {
+  inset-block-start: 2px;
+  margin-inline-start: 2px;
+}
+.ids-data-grid[data-row-height=lg] .ids-data-grid-cell.is-dirty.is-inline.formatter-text::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=lg] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree) {
+  position: relative;
+}
+.ids-data-grid[data-row-height=lg] .ids-data-grid-cell.is-editable.is-inline:not(.formatter-tree)::after {
+  border: 1px solid var(--ids-input-color-border-default);
+  border-radius: var(--ids-border-radius-01);
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  margin: 4px;
+  height: calc(100% - 8px);
+  position: absolute;
+  width: calc(100% - 8px);
+}
+.ids-data-grid[data-row-height=lg] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis {
+  position: relative;
+}
+.ids-data-grid[data-row-height=lg] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  border: 1px solid var(--ids-input-color-border-default);
+  border-radius: var(--ids-border-radius-01);
+  box-sizing: border-box;
+  display: block;
+  content: "";
+  margin: 4px;
+  height: calc(100% - 8px);
+  position: absolute;
+  width: calc(100% - 8px);
+}
+.ids-data-grid[data-row-height=lg] .ids-data-grid-cell.is-editable.is-inline.formatter-tree .text-ellipsis::after {
+  margin-inline-end: -12px;
+}
+.ids-data-grid[data-row-height=lg] .ids-data-grid-tree-field-container .text-ellipsis {
   padding-inline-start: 0;
 }
+.ids-data-grid[data-row-height=lg] [aria-level="1"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 40px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="1"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="1"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="1"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 60px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="2"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 20px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="2"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="2"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 77px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="3"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 37px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="3"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="3"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 94px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="4"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 54px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="4"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="4"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 111px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="5"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 71px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="5"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="5"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 128px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="6"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 88px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="6"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="6"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 145px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="7"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 105px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="7"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="7"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-field-container {
+  margin-inline-start: 162px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="8"] .ids-data-grid-cell ids-button {
+  margin-inline-start: 122px;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="8"] .ids-data-grid-cell ids-button + .ids-data-grid-tree-field-container {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=lg] [aria-level="8"] .ids-data-grid-cell.is-dirty.is-inline .ids-data-grid-tree-field-container::before {
+  inset-block-start: 6px;
+  margin-inline-start: 6px;
+}
 .ids-data-grid.is-list-style {
   border-width: 0;
 }
+.ids-data-grid.waiting-load {
+  overflow: hidden;
+}
+.ids-data-grid.waiting-load .ids-data-grid-body {
+  visibility: hidden;
+}
 
 .ids-data-grid-body {
   min-width: fit-content;