ids-enterprise-wc 1.0.0-beta.10 → 1.0.0-beta.11

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

@@ -1,1001 +0,0 @@
-/* Ids Data Grid Component - Filter */
-.ids-data-grid ::slotted([slot^=filter-]) {
-  align-items: center;
-  display: flex;
-}
-.ids-data-grid .ids-data-grid-header-cell-content.vertical-align-center {
-  position: relative;
-  top: calc(50% - var(--ids-spacing-xxl));
-}
-.ids-data-grid .ids-data-grid-header-cell-filter-wrapper {
-  align-items: center;
-  display: flex;
-  position: relative;
-  padding-inline-start: var(--ids-spacing-lg);
-  padding-inline-end: var(--ids-spacing-lg);
-  padding-block-end: var(--ids-spacing-lg);
-}
-.ids-data-grid .ids-data-grid-header-cell-filter-wrapper.hidden {
-  display: none;
-}
-.ids-data-grid .ids-data-grid-header-cell-filter-wrapper ids-dropdown[compact] ids-list-box-option {
-  font-size: unset;
-  min-height: var(--ids-size-xs);
-}
-
-/* Ids Data Grid Component - Header */
-.ids-data-grid-header {
-  position: sticky;
-  top: 0;
-  z-index: 4;
-}
-
-.ids-data-grid-header-text .ids-data-grid-checkbox-container {
-  width: 20px;
-}
-.ids-data-grid-header-text .ids-data-grid-checkbox-container .ids-data-grid-checkbox:not(.checked):not(.indeterminate) {
-  background-color: var(--ids-data-grid-header-checkbox-background-color);
-  border-color: var(--ids-data-grid-header-checkbox-border-color);
-}
-
-.ids-data-grid-column-groups {
-  border-block-end: 1px solid var(--ids-data-grid-header-border-color);
-}
-
-.ids-data-grid-header-cell {
-  border-inline-start: 1px solid var(--ids-data-grid-header-border-color);
-  background-color: var(--ids-data-grid-header-background-color);
-  min-height: 35px;
-  position: relative;
-}
-.ids-data-grid-header-cell:first-child {
-  border-inline-start-width: 0;
-}
-.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;
-}
-.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 {
-  direction: rtl;
-  justify-content: flex-start;
-}
-.ids-data-grid-header-cell .resizer {
-  cursor: var(--ids-cursor-resize);
-  display: inline;
-  height: 100%;
-  position: absolute;
-  margin-inline-start: calc(100% - 4px);
-  top: 0;
-  width: 6px;
-  z-index: 2;
-}
-.ids-data-grid-header-cell:last-child .resizer {
-  margin-inline-start: calc(100% - 6px);
-}
-.ids-data-grid-header-cell .reorderer {
-  cursor: var(--ids-cursor-move);
-  display: inline;
-  height: 34px;
-  opacity: 0;
-  position: absolute;
-  inset-inline-start: var(--ids-spacing-lg);
-  top: 0;
-  width: 4px;
-}
-.ids-data-grid-header-cell .reorderer ids-icon {
-  position: absolute;
-  color: var(--ids-data-grid-header-icon-color);
-  inset-inline-start: calc(-1 * var(--ids-spacing-lg));
-  text-align: center;
-  top: calc(50% - 9px);
-}
-.ids-data-grid-header-cell.align-right .reorderer {
-  inset-inline-end: 8px;
-  inset-inline-start: initial;
-}
-.ids-data-grid-header-cell.dragging {
-  background-color: var(--ids-data-grid-header-background-color) !important;
-  display: block;
-  width: 110px;
-}
-.ids-data-grid-header-cell.dragging .reorderer {
-  opacity: 1;
-}
-.ids-data-grid-header-cell.active-drag-column {
-  background-color: var(--ids-data-grid-header-drag-placeholder-background-color);
-}
-.ids-data-grid-header-cell:hover .reorderer {
-  opacity: 1;
-}
-.ids-data-grid-header-cell.frozen {
-  background-color: var(--ids-data-grid-header-background-color);
-  position: sticky;
-  z-index: 3;
-}
-.ids-data-grid-header-cell.frozen-last {
-  border-inline-end: 1px solid var(--ids-data-grid-header-border-color);
-}
-.ids-data-grid-header-cell.frozen-last + .ids-data-grid-header-cell {
-  border-inline-start-width: 0;
-}
-.ids-data-grid-header-cell.frozen-left {
-  position: sticky;
-  left: 0;
-}
-.ids-data-grid-header-cell.frozen-left:nth-of-type(2) {
-  left: var(--ids-data-grid-frozen-column-left-width-2);
-}
-.ids-data-grid-header-cell.frozen-left:nth-of-type(3) {
-  left: var(--ids-data-grid-frozen-column-left-width-3);
-}
-.ids-data-grid-header-cell.frozen-left:nth-of-type(4) {
-  left: var(--ids-data-grid-frozen-column-left-width-4);
-}
-.ids-data-grid-header-cell.frozen-left:nth-of-type(5) {
-  left: var(--ids-data-grid-frozen-column-left-width-5);
-}
-.ids-data-grid-header-cell.frozen-left:nth-of-type(6) {
-  left: var(--ids-data-grid-frozen-column-left-width-6);
-}
-.ids-data-grid-header-cell.frozen-left:nth-of-type(7) {
-  left: var(--ids-data-grid-frozen-column-left-width-7);
-}
-.ids-data-grid-header-cell.frozen-left:nth-of-type(8) {
-  left: var(--ids-data-grid-frozen-column-left-width-8);
-}
-.ids-data-grid-header-cell.frozen-left:nth-of-type(9) {
-  left: var(--ids-data-grid-frozen-column-left-width-9);
-}
-.ids-data-grid-header-cell.frozen-left:nth-of-type(10) {
-  left: var(--ids-data-grid-frozen-column-left-width-10);
-}
-.ids-data-grid-header-cell.frozen-right {
-  position: sticky;
-  right: 0;
-}
-.ids-data-grid-header-cell.frozen-right .ids-data-grid-header-cell-content {
-  display: inline-flex;
-}
-
-.ids-data-grid-header-cell-content {
-  display: flex;
-}
-
-.ids-data-grid-header-text {
-  display: block;
-  padding-block-start: var(--ids-spacing-lg);
-  padding-block-end: var(--ids-spacing-lg);
-  font-weight: var(--ids-font-weight-semi-bold);
-  font-size: var(--ids-font-size-sm);
-  color: var(--ids-data-grid-header-text-color);
-  padding-inline-start: var(--ids-spacing-xxl);
-  padding-inline-end: var(--ids-spacing-xxl);
-  overflow: hidden;
-  text-align: left;
-  text-overflow: ellipsis;
-  user-select: none;
-  white-space: nowrap;
-}
-
-.ids-data-grid-header-icon {
-  align-self: center;
-  color: var(--ids-data-grid-header-text-color);
-  margin-inline-start: var(--ids-spacing-md);
-  margin-block-start: var(--ids-spacing-md);
-}
-
-.sort-indicator {
-  position: relative;
-  overflow: hidden;
-  height: 32px;
-  margin-inline-start: 2px;
-  width: 18px;
-}
-
-.is-sortable .sort-indicator ids-icon {
-  color: var(--ids-data-grid-header-unsorted-icon-color);
-  opacity: 0;
-  transition: opacity 0.3s var(--ids-transition-ease) 0s;
-}
-.is-sortable .sort-indicator ids-icon:first-child {
-  position: relative;
-  top: 4px;
-  transform: rotate(180deg);
-}
-.is-sortable .sort-indicator ids-icon:last-child {
-  position: relative;
-  top: -9px;
-}
-.is-sortable:hover {
-  cursor: pointer;
-}
-.is-sortable:hover .sort-indicator ids-icon {
-  opacity: 1;
-}
-
-.has-selectioncheckbox .ids-data-grid-header-text {
-  padding-inline-start: 0;
-  padding-inline-end: 0;
-}
-
-.is-sortable .ids-data-grid-header-text,
-.has-headericon .ids-data-grid-header-text {
-  padding-inline-end: 0;
-}
-
-[aria-sort=ascending] .is-sortable .sort-indicator ids-icon:first-child {
-  color: var(--ids-data-grid-header-sorted-icon-color);
-  opacity: 1;
-}
-[aria-sort=ascending] .is-sortable .sort-indicator ids-icon:last-child {
-  opacity: 1;
-}
-
-[aria-sort=descending] .is-sortable .sort-indicator ids-icon:first-child {
-  opacity: 1;
-}
-[aria-sort=descending] .is-sortable .sort-indicator ids-icon:last-child {
-  color: var(--ids-data-grid-header-sorted-icon-color);
-  opacity: 1;
-}
-
-.ids-data-grid-sort-arrows {
-  display: none;
-  height: 34px;
-  position: absolute;
-  left: 25px;
-  z-index: 1;
-}
-.ids-data-grid-sort-arrows::before, .ids-data-grid-sort-arrows::after {
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  content: "";
-  display: inline-block;
-  height: 0;
-  left: -6px;
-  position: absolute;
-  width: 0;
-}
-.ids-data-grid-sort-arrows::before {
-  border-top: 5px solid var(--ids-data-grid-header-background-color);
-  top: -6px;
-}
-.ids-data-grid-sort-arrows::after {
-  border-bottom: 5px solid var(--ids-data-grid-header-background-color);
-  bottom: -9px;
-}
-
-tr.ids-data-grid-header {
-  position: initial;
-}
-
-th.ids-data-grid-header-cell {
-  display: table-cell;
-}
-
-.ids-data-grid.is-list-style .ids-data-grid-header-cell {
-  background-color: var(--ids-data-grid-list-header-background-color);
-  border-color: var(--ids-data-grid-list-header-border-color);
-}
-.ids-data-grid.is-list-style .ids-data-grid-header-text {
-  color: var(--ids-data-grid-list-header-text-color);
-}
-.ids-data-grid.is-list-style .is-sortable ids-icon {
-  color: var(--ids-data-grid-header-unsorted-icon-color);
-}
-.ids-data-grid.is-list-style [aria-sort=descending] .is-sortable ids-icon:last-child,
-.ids-data-grid.is-list-style [aria-sort=ascending] .is-sortable ids-icon:first-child {
-  color: var(--ids-data-grid-list-header-unsorted-icon-color);
-}
-.ids-data-grid.is-list-style .ids-data-grid-header-text .ids-data-grid-checkbox-container .ids-data-grid-checkbox:not(.checked):not(.indeterminate) {
-  border-color: var(--ids-data-grid-list-header-checkbox-background-color);
-}
-
-.ids-data-grid-body {
-  min-width: fit-content;
-}
-
-: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 {
-  direction: ltr;
-}
-:host([dir=rtl]) .ids-data-grid-header-cell:last-child {
-  border-inline-end-width: 0;
-}
-
-/* Ids Data Grid Component - Rows */
-.ids-data-grid-row {
-  display: grid;
-  grid-template-columns: var(--ids-data-grid-column-widths);
-  width: 100%;
-}
-.ids-data-grid-row.selected:not(.mixed) .ids-data-grid-cell, .ids-data-grid-row.activated .ids-data-grid-cell {
-  background-color: var(--ids-data-grid-row-selected-background-color);
-}
-.ids-data-grid-row[hidden] {
-  display: none;
-}
-
-.ids-data-grid[data-row-height=md] .ids-data-grid-cell {
-  height: var(--ids-data-grid-md-row-height);
-}
-.ids-data-grid[data-row-height=md] .ids-data-grid-cell .text-ellipsis,
-.ids-data-grid[data-row-height=md] .ids-data-grid-cell ids-badge {
-  padding-inline-start: var(--ids-data-grid-md-padding);
-  padding-inline-end: var(--ids-data-grid-md-padding);
-}
-.ids-data-grid[data-row-height=md] .ids-data-grid-cell ids-hyperlink {
-  margin: var(--ids-data-grid-md-padding);
-}
-.ids-data-grid[data-row-height=md] .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-md-padding);
-  transition: padding var(--ids-transition-length) var(--ids-transition-ease);
-}
-.ids-data-grid[data-row-height=md] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-md-padding);
-}
-.ids-data-grid[data-row-height=sm] .ids-data-grid-cell {
-  height: var(--ids-data-grid-sm-row-height);
-}
-.ids-data-grid[data-row-height=sm] .ids-data-grid-cell .text-ellipsis,
-.ids-data-grid[data-row-height=sm] .ids-data-grid-cell ids-badge {
-  padding-inline-start: var(--ids-data-grid-sm-padding);
-  padding-inline-end: var(--ids-data-grid-sm-padding);
-}
-.ids-data-grid[data-row-height=sm] .ids-data-grid-cell ids-hyperlink {
-  margin: var(--ids-data-grid-sm-padding);
-}
-.ids-data-grid[data-row-height=sm] .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-sm-padding);
-  transition: padding var(--ids-transition-length) var(--ids-transition-ease);
-}
-.ids-data-grid[data-row-height=sm] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-sm-padding);
-}
-.ids-data-grid[data-row-height=xs] .ids-data-grid-cell {
-  height: var(--ids-data-grid-xs-row-height);
-}
-.ids-data-grid[data-row-height=xs] .ids-data-grid-cell .text-ellipsis,
-.ids-data-grid[data-row-height=xs] .ids-data-grid-cell ids-badge {
-  padding-inline-start: var(--ids-data-grid-xs-padding);
-  padding-inline-end: var(--ids-data-grid-xs-padding);
-}
-.ids-data-grid[data-row-height=xs] .ids-data-grid-cell ids-hyperlink {
-  margin: var(--ids-data-grid-xs-padding);
-}
-.ids-data-grid[data-row-height=xs] .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-xs-padding);
-  transition: padding var(--ids-transition-length) var(--ids-transition-ease);
-}
-.ids-data-grid[data-row-height=xs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-xs-padding);
-}
-.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell {
-  height: var(--ids-data-grid-xxs-row-height);
-}
-.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell .text-ellipsis,
-.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell ids-badge {
-  padding-inline-start: var(--ids-data-grid-xxs-padding);
-  padding-inline-end: var(--ids-data-grid-xxs-padding);
-}
-.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell ids-hyperlink {
-  margin: var(--ids-data-grid-xxs-padding);
-}
-.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-xxs-padding);
-  transition: padding var(--ids-transition-length) var(--ids-transition-ease);
-}
-.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
-  padding-inline-start: var(--ids-data-grid-xxs-padding);
-}
-
-.ids-data-grid.alt-row-shading ids-data-grid-row:nth-child(even) {
-  background-color: var(--ids-data-grid-row-alternate-background-color);
-}
-
-.ids-data-grid-expandable-row {
-  border-bottom: 1px solid var(--ids-data-grid-cell-border-color);
-  grid-column: 1/-1;
-  padding: 8px;
-}
-
-tr.ids-data-grid-row {
-  display: table-row;
-  height: var(--ids-data-grid-lg-row-height);
-}
-
-.ids-data-grid.row-navigation .ids-data-grid-row:focus-within {
-  box-shadow: var(--ids-data-grid-row-focus-box-shadow);
-}
-.ids-data-grid.row-navigation .ids-data-grid-row .ids-data-grid-cell:focus {
-  box-shadow: none;
-  outline: none;
-}
-
-/* Ids Data Grid Component - Cells */
-.ids-data-grid-cell {
-  align-items: center;
-  border-inline-start: 1px solid;
-  border-block-end: 1px solid;
-  border-color: var(--ids-data-grid-cell-border-color);
-  display: inline-flex;
-  color: var(--ids-data-grid-cell-text-color);
-  height: 50px;
-  overflow: hidden;
-  position: relative;
-  white-space: nowrap;
-}
-.ids-data-grid-cell:first-child {
-  border-inline-start-width: 0;
-}
-.ids-data-grid-cell ids-badge::part(badge) {
-  margin-block-end: var(--ids-spacing-none);
-  margin-inline-end: var(--ids-spacing-none);
-}
-.ids-data-grid-cell ids-badge {
-  padding-inline-start: var(--ids-spacing-xxl);
-  padding-inline-end: var(--ids-spacing-xxl);
-}
-.ids-data-grid-cell ids-hyperlink {
-  margin: var(--ids-spacing-xxl);
-}
-.ids-data-grid-cell .text-ellipsis {
-  display: inline-block;
-  vertical-align: middle;
-  padding-inline-start: var(--ids-spacing-xxl);
-  padding-inline-end: var(--ids-spacing-xxl);
-  height: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ids-data-grid-cell.align-center > *:first-child {
-  display: inline-flex;
-  margin: 0 auto;
-}
-.ids-data-grid-cell.align-right > *:first-child {
-  margin-inline-start: auto;
-  margin-inline-end: 0;
-}
-.ids-data-grid-cell.is-readonly {
-  background-color: var(--ids-data-grid-cell-readonly-background-color);
-}
-.ids-data-grid-cell.is-disabled {
-  color: var(--ids-data-grid-cell-disabled-text-color);
-}
-.ids-data-grid-cell:focus, .ids-data-grid-cell.is-editing:not(.is-inline):focus-within {
-  box-shadow: var(--ids-box-shadow-md);
-  outline: 1px solid var(--ids-focus-border-color);
-  outline-offset: -1px;
-}
-.ids-data-grid-cell.is-editable.is-inline {
-  box-shadow: inset 0 0 0 4px var(--ids-input-background-color), inset 0 0 0 5px var(--ids-input-border-color);
-}
-.ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
-  visibility: visible;
-  margin-inline-end: 14px;
-}
-.ids-data-grid-cell.is-editable.is-timepicker, .ids-data-grid-cell.is-editable.is-datepicker {
-  justify-content: space-between;
-}
-.ids-data-grid-cell.is-editable.is-timepicker .text-ellipsis, .ids-data-grid-cell.is-editable.is-datepicker .text-ellipsis {
-  padding-inline-end: 0;
-}
-.ids-data-grid-cell.is-editable .editor-cell-icon {
-  margin-inline-end: 10px;
-  display: none;
-}
-.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;
-}
-.ids-data-grid-cell.is-editable:not(.is-inline):not(.is-invalid):focus ids-alert, .ids-data-grid-cell.is-editable:not(.is-inline):not(.is-invalid):hover ids-alert {
-  margin-inline: calc(100% - 48px);
-}
-.ids-data-grid-cell.is-editable.is-editable.is-invalid {
-  justify-content: space-between;
-}
-.ids-data-grid-cell.is-editable.is-editable.is-invalid ids-alert {
-  margin-inline-end: var(--ids-spacing-lg);
-}
-.ids-data-grid-cell.is-editing ids-checkbox {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  position: relative;
-  left: 6px;
-  top: 4px;
-}
-.ids-data-grid-cell.is-editing.is-dropdown, .ids-data-grid-cell.is-editing.is-timepicker, .ids-data-grid-cell.is-editing.is-datepicker {
-  overflow: visible;
-}
-.ids-data-grid-cell.is-editable.is-dropdown .dropdown-cell-value {
-  width: 100%;
-}
-.ids-data-grid-cell.is-editing.is-dropdown.is-dirty::before {
-  margin-inline: 3px;
-}
-.ids-data-grid-cell.is-editing.is-dropdown:not(.is-inline) {
-  border-left-width: 0;
-}
-.ids-data-grid-cell.is-editing.is-dropdown.is-inline {
-  box-shadow: none;
-}
-.ids-data-grid-cell.is-editing.is-dropdown.is-inline ids-dropdown {
-  padding: 0 4px;
-}
-.ids-data-grid-cell.is-editing.is-dropdown.is-inline.is-dirty::before {
-  margin-inline: 6px;
-}
-.ids-data-grid-cell.frozen {
-  background-color: var(--ids-data-grid-cell-background-color);
-  position: sticky;
-  z-index: 3;
-}
-.ids-data-grid-cell.frozen-last {
-  border-inline-end: 1px solid var(--ids-data-grid-cell-border-color);
-}
-.ids-data-grid-cell.frozen-last + .ids-data-grid-cell {
-  border-inline-start-width: 0;
-}
-.ids-data-grid-cell.frozen-left {
-  position: sticky;
-  left: 0;
-}
-.ids-data-grid-cell.frozen-left:nth-of-type(2) {
-  left: var(--ids-data-grid-frozen-column-left-width-2);
-}
-.ids-data-grid-cell.frozen-left:nth-of-type(3) {
-  left: var(--ids-data-grid-frozen-column-left-width-3);
-}
-.ids-data-grid-cell.frozen-left:nth-of-type(4) {
-  left: var(--ids-data-grid-frozen-column-left-width-4);
-}
-.ids-data-grid-cell.frozen-left:nth-of-type(5) {
-  left: var(--ids-data-grid-frozen-column-left-width-5);
-}
-.ids-data-grid-cell.frozen-left:nth-of-type(6) {
-  left: var(--ids-data-grid-frozen-column-left-width-6);
-}
-.ids-data-grid-cell.frozen-left:nth-of-type(7) {
-  left: var(--ids-data-grid-frozen-column-left-width-7);
-}
-.ids-data-grid-cell.frozen-left:nth-of-type(8) {
-  left: var(--ids-data-grid-frozen-column-left-width-8);
-}
-.ids-data-grid-cell.frozen-left:nth-of-type(9) {
-  left: var(--ids-data-grid-frozen-column-left-width-9);
-}
-.ids-data-grid-cell.frozen-left:nth-of-type(10) {
-  left: var(--ids-data-grid-frozen-column-left-width-10);
-}
-.ids-data-grid-cell.frozen-right {
-  position: sticky;
-  right: 0;
-}
-.ids-data-grid-cell.is-dirty::before {
-  border-color: var(--ids-dirty-indicator-background-color) transparent transparent var(--ids-dirty-indicator-background-color);
-  border-style: solid;
-  border-width: 5px;
-  content: "";
-  display: inline-block;
-  margin-inline: 2px;
-  position: absolute;
-  top: 2px;
-  z-index: 1;
-}
-.ids-data-grid-cell.is-dirty.is-inline::before {
-  margin-inline: 6px;
-  top: 6px;
-}
-.ids-data-grid-cell.is-invalid {
-  background-color: var(--ids-data-grid-cell-invalid-background-color);
-}
-.ids-data-grid-cell ids-alert {
-  margin-top: 3px;
-}
-
-[data-row-height=xs] .ids-data-grid-cell.is-dirty::before {
-  border-width: 4px;
-}
-[data-row-height=xs] .ids-data-grid-cell.is-dirty.is-inline::before {
-  margin-inline: 3px;
-  top: 3px;
-}
-[data-row-height=xs] .is-editable.is-inline {
-  box-shadow: inset 0 0 0 2px var(--ids-input-background-color), inset 0 0 0 3px var(--ids-input-border-color);
-}
-
-[data-row-height=sm] .is-editable.is-inline {
-  box-shadow: inset 0 0 0 3px var(--ids-input-background-color), inset 0 0 0 4px var(--ids-input-border-color);
-}
-[data-row-height=sm] .ids-data-grid-cell.is-dirty.is-inline::before {
-  margin-inline: 5px;
-  top: 5px;
-}
-
-.ids-data-grid.is-list-style .ids-data-grid-cell {
-  border-inline-start-width: 0;
-  border-bottom: 1px solid var(--ids-data-grid-list-cell-border-color);
-}
-.ids-data-grid.is-list-style .ids-data-grid-cell.is-readonly {
-  background-color: var(--ids-data-grid-cell-readonly-background-color);
-}
-.ids-data-grid.is-list-style .ids-data-grid-cell.is-disabled {
-  color: var(--ids-data-grid-cell-disabled-text-color);
-}
-.ids-data-grid.is-list-style .ids-data-grid-body .ids-data-grid-row:first-child .ids-data-grid-cell {
-  border-top: 0;
-}
-
-td.ids-data-grid-cell {
-  display: table-cell;
-  padding-inline-start: var(--ids-spacing-xxl);
-  padding-inline-end: var(--ids-spacing-xxl);
-}
-
-:host([dir=rtl]) .ids-data-grid.is-list-style .ids-data-grid-cell {
-  border-inline-end-width: 0;
-}
-:host([dir=rtl]) .ids-data-grid-cell:last-child {
-  border-inline-end-width: 0;
-}
-:host([dir=rtl]) .ids-data-grid-cell.is-dirty::before {
-  border-color: var(--ids-dirty-indicator-background-color) var(--ids-dirty-indicator-background-color) transparent transparent;
-}
-
-.hide {
-  display: none;
-}
-
-@media all and (max-width: 1440px) {
-  .hide-xxl-down {
-    display: none;
-  }
-}
-@media all and (min-width: 1440px) {
-  .hide-xxl-up {
-    display: none;
-  }
-}
-@media all and (max-width: 1280px) {
-  .hide-xl-down {
-    display: none;
-  }
-}
-@media all and (min-width: 1280px) {
-  .hide-xl-up {
-    display: none;
-  }
-}
-@media all and (max-width: 1024px) {
-  .hide-lg-down {
-    display: none;
-  }
-}
-@media all and (min-width: 1024px) {
-  .hide-lg-up {
-    display: none;
-  }
-}
-@media all and (max-width: 840px) {
-  .hide-md-down {
-    display: none;
-  }
-}
-@media all and (min-width: 840px) {
-  .hide-md-up {
-    display: none;
-  }
-}
-@media all and (max-width: 600px) {
-  .hide-sm-down {
-    display: none;
-  }
-}
-@media all and (min-width: 600px) {
-  .hide-sm-up {
-    display: none;
-  }
-}
-@media all and (max-width: 360px) {
-  .hide-xs-down {
-    display: none;
-  }
-}
-@media all and (min-width: 360px) {
-  .hide-xs-up {
-    display: none;
-  }
-}
-@media all and (max-width: 600px) {
-  :host(.hide-sm-down) {
-    display: none;
-  }
-}
-
-.ids-popup-menu:not([hidden]) {
-  display: block;
-  z-index: var(--ids-z-index-popup);
-}
-
-/**
- * Checkbox Mixins.
- */
-@keyframes check {
-  0% {
-    height: 0;
-    left: 0;
-    top: 8px;
-    width: 0;
-  }
-  50% {
-    height: 0;
-    left: 0;
-    top: 8px;
-    width: 4px;
-  }
-  100% {
-    height: 10px;
-    left: 4px;
-    top: 0;
-    width: 4px;
-  }
-}
-@keyframes checkindeterminate {
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 10px;
-  }
-}
-/**
- * Radio Mixins.
- */
-:root {
-  --ids-data-grid-column-widths: repeat(1, minmax(110px, 1fr));
-}
-
-.ids-data-grid {
-  background-color: var(--ids-data-grid-background-color);
-  border: 1px solid var(--ids-data-grid-cell-border-color);
-  border-radius: var(--ids-border-radius-xs);
-  border-collapse: collapse;
-  contain: content;
-  overflow: auto;
-  width: 100%;
-  display: inline-grid;
-  align-content: flex-start;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-family: var(--ids-font-family);
-  font-size: var(--ids-font-size-md);
-}
-.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-checkbox {
-  position: absolute;
-  border: var(--ids-checkbox-unchecked-border);
-  border-radius: var(--ids-checkbox-unchecked-border-radius);
-  height: 14px;
-  width: 14px;
-  left: 0;
-  top: 2px;
-  border-color: var(--ids-data-grid-cell-checkbox-border-color);
-  position: relative;
-  left: 0;
-  top: 0;
-}
-.ids-data-grid .ids-data-grid-checkbox.editable {
-  cursor: var(--ids-cursor-pointer);
-}
-.ids-data-grid .ids-data-grid-checkbox.disabled {
-  background-color: var(--ids-checkbox-disabled-unchecked-background-color);
-  border-color: var(--ids-checkbox-disabled-unchecked-border-color);
-  cursor: var(--ids-cursor-default);
-}
-.ids-data-grid .ids-data-grid-checkbox.checked {
-  background-color: var(--ids-checkbox-checked-background-color);
-  border-color: var(--ids-checkbox-checked-border-color);
-}
-.ids-data-grid .ids-data-grid-checkbox.checked::after {
-  position: absolute;
-  display: block;
-  border: var(--ids-font-size-xs) solid var(--ids-checkbox-checked-after-border-color);
-  border-width: var(--ids-checkbox-checked-after-border-width);
-  animation: check 0.15s;
-  transform: rotate(45deg);
-  content: "";
-  height: 10px;
-  left: 4px;
-  top: 0;
-  width: 4px;
-  animation: none;
-}
-.ids-data-grid .ids-data-grid-checkbox.checked.disabled {
-  background-color: var(--ids-checkbox-disabled-checked-background-color);
-  border-color: var(--ids-checkbox-disabled-checked-border-color);
-}
-.ids-data-grid .ids-data-grid-checkbox.indeterminate {
-  background-color: var(--ids-checkbox-indeterminate-background-color);
-  border-color: var(--ids-checkbox-indeterminate-border-color);
-}
-.ids-data-grid .ids-data-grid-checkbox.indeterminate::after {
-  position: absolute;
-  animation: checkindeterminate 0.15s;
-  display: block;
-  border: 1px solid var(--ids-checkbox-indeterminate-after-border-color);
-  border-width: var(--ids-checkbox-indeterminate-after-border-width);
-  content: "";
-  height: 6px;
-  left: 2px;
-  top: 0;
-  transform: none;
-  width: 10px;
-  animation: none;
-}
-.ids-data-grid .ids-data-grid-radio-container {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-.ids-data-grid .ids-data-grid-radio {
-  position: absolute;
-  border: 1px solid var(--ids-radio-unchecked-border-color);
-  border-radius: var(--ids-radio-border-radius);
-  height: 14px;
-  left: 0;
-  top: 3px;
-  transition: border-color var(--ids-transition-length) var(--ids-transition-ease);
-  width: 14px;
-  cursor: var(--ids-cursor-pointer);
-  position: relative;
-  left: 0;
-  top: 0;
-}
-.ids-data-grid .ids-data-grid-radio::after {
-  position: absolute;
-  background-color: var(--ids-radio-unchecked-background-color);
-  border: 1px solid var(--ids-radio-unchecked-background-color);
-  border-radius: var(--ids-radio-border-radius);
-  content: "";
-  height: 0;
-  left: 6px;
-  top: 6px;
-  transition: all var(--ids-transition-length) var(--ids-transition-ease);
-  width: 0;
-}
-.ids-data-grid .ids-data-grid-radio.disabled {
-  border-color: var(--ids-radio-unchecked-disabled-border-color);
-  cursor: var(--ids-cursor-default);
-  box-shadow: none;
-}
-.ids-data-grid .ids-data-grid-radio.checked {
-  background-color: var(--ids-radio-checked-background-color);
-  border-color: var(--ids-radio-checked-border-color);
-}
-.ids-data-grid .ids-data-grid-radio.checked::after {
-  background-color: var(--ids-radio-checked-inner-background-color);
-  border-color: var(--ids-radio-checked-inner-background-color);
-  border-width: 2px;
-  height: 4px;
-  left: 3px;
-  top: 3px;
-  width: 4px;
-}
-.ids-data-grid .ids-data-grid-radio.checked.disabled {
-  background-color: var(--ids-radio-checked-disabled-background-color);
-  border-color: var(--ids-radio-checked-disabled-border-color);
-}
-.ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container {
-  display: flex;
-  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 {
-  padding-inline: 4px;
-}
-.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 [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 55px;
-}
-.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 [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
-  padding-inline-start: 91px;
-}
-.ids-data-grid [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 82px;
-}
-.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 [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
-  padding-inline-start: 118px;
-}
-.ids-data-grid [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 109px;
-}
-.ids-data-grid [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .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 [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 136px;
-}
-.ids-data-grid [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .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 [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 163px;
-}
-.ids-data-grid [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .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 [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 190px;
-}
-.ids-data-grid [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .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 [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
-  padding-inline-start: 217px;
-}
-.ids-data-grid [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
-  padding-inline-start: 0;
-}
-.ids-data-grid.is-list-style {
-  border-width: 0;
-}
-
-.ids-data-grid-body {
-  min-width: fit-content;
-}
-
-table.ids-data-grid {
-  display: table;
-  outline: 1px solid var(--ids-data-grid-cell-border-color);
-  outline-offset: -1px;
-}
-
-.ids-data-grid-wrapper.has-empty-message {
-  position: relative;
-  display: grid;
-}
-.ids-data-grid-wrapper.has-empty-message ids-empty-message:not([hidden]),
-.ids-data-grid-wrapper.has-empty-message ::slotted(ids-empty-message:not([hidden])) {
-  position: absolute;
-  display: flex;
-  align-self: center;
-  justify-self: center;
-  top: 80px;
-  bottom: 20px;
-}
-.ids-data-grid-wrapper.has-empty-message .ids-data-grid {
-  min-height: var(--ids-data-grid-min-height);
-}