// Datagrid
//================================================== //

// NOTE: see `src/core/_controls-new.scss` at the top for other datagrid dependencies
// Dependencies:
// badges/badges';
// button/button
// drag/drag
// dropdown/dropdown
// hyperlinks/hyperlinks
// input/input
// listview/listview
// modal/modal
// popupmenu/popupmenu
// searchfield/searchfield
// tag/tag
// toolbar/toolbar
// tooltip/tooltip

$datagrid-expandable-padding: 30px;

@mixin row-height-padding($adjustment) {
  .datagrid-expandable-row {
    .datagrid-row-detail-padding {
      padding: $datagrid-expandable-padding - $adjustment
    }
  }
}

@mixin rowstatus($color) {
  td {
    border-bottom: 1px solid $color !important;
    box-shadow: 0 -2px 1px -1px $color;

    &.rowstatus-cell {
      position: relative;

      &::before {
        background-color: $color;
        content: '';
        display: block;
        height: 32px;
        left: -11px;
        position: absolute;
        top: -14px;
        transform: rotate(45deg);
        width: 26px;
      }

      .icon-rowstatus {
        color: $ids-color-palette-white;
        height: 10px;
        left: 1px;
        position: absolute;
        top: 2px;
        visibility: visible !important;
        width: 10px;
      }
    }
  }
}

@mixin rowstatusEndBorders($color) {
  &:first-child {
    border-left: 1px solid $color;
  }

  &:last-child {
    border-right: 1px solid $color;
  }
}

@mixin trigger-icon-background($color: $datagrid-cell-bg-color) {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

$datagrid-header-height: 34px;
$datagrid-filterable-header-height: 61px;

$datagrid-row-height: 43px;
$datagrid-medium-header-height: 33px;
$datagrid-medium-row-height: 33px;
$datagrid-extra-small-header-height: 29px;
$datagrid-extra-small-row-height: 29px;
$datagrid-small-header-height: 33px;
$datagrid-small-row-height: 33px;

// Main Datagrid Container
.datagrid-container {
  background-color: transparent;
  border: 1px solid $datagrid-cell-border-color;
  display: flex;
  height: inherit;
  min-width: 100%;
  overflow: hidden;
  position: relative;

  td {
    &.is-editing {
      .btn-icon {
        > .icon {
          position: relative;
        }
      }
    }
  }

  &.has-empty-message.is-empty {
    .datagrid-wrapper {
      min-height: 300px;
    }

    &.empty-message-height-small {
      height: 130px;

      &.medium-rowheight {
        height: 123px;

        .empty-message {
          top: calc(50% + 30px) !important;
        }
      }

      &.small-rowheight {
        height: 116px;

        .empty-message {
          top: calc(50% + 27px) !important;
        }
      }

      &.extra-small-rowheight {
        height: 110px;

        .empty-message {
          top: calc(50% + 25px) !important;
        }
      }

      .datagrid-wrapper {
        min-height: auto;
      }

      .empty-message {
        min-height: auto;
        padding-bottom: 0;

        .empty-title {
          font-size: $ids-size-font-px-16;
          -webkit-font-smoothing: antialiased;
          font-weight: 400;
          padding-bottom: 0;
        }
      }
    }
  }

  &.has-empty-message.is-empty {
    &.has-horizontal-scroll {
      .datagrid-wrapper.left,
      .datagrid-wrapper.right {
        overflow-x: auto;
      }
    }

    .empty-message {
      div:only-child:is(.empty-title) {
        padding: unset;
        margin-top: 20px;
      }
    }
  }

  &.has-horizontal-scroll {
    .datagrid-wrapper.left,
    .datagrid-wrapper.right {
      // Make bottom visible to prevent space different at the bottom.
      overflow-x: scroll;
    }
  }

  // Add back hidden first borders
  .datagrid-wrapper.left + .datagrid-wrapper.center {
    th:first-child {
      border-left: 1px solid $datagrid-header-border-color;
    }

    td:first-child {
      border-left: 1px solid $datagrid-cell-border-color;

      &.is-invisible {
        border-left-color: transparent;
      }
    }
  }

  &.has-vertical-scroll {
    .datagrid-wrapper.right {
      overflow-x: scroll;
      overflow-y: scroll;
    }
  }

  // Scrolling headers for grouped headers
  &.has-group-headers {
    tr.datagrid-header-groups th {
      border-bottom: 1px solid $datagrid-header-border-color;
      top: 0;
    }

    tr:not(.datagrid-header-groups) th {
      top: $datagrid-header-height - 3;
    }

    &.small-rowheight tr:not(.datagrid-header-groups) th,
    &.extra-small-rowheight tr:not(.datagrid-header-groups) th {
      top: 26px;
    }

    &.medium-rowheight tr:not(.datagrid-header-groups) th {
      top: 31px;
    }
  }

  // Empty Area Scrolling
  &.is-empty .datagrid {
    border-bottom: 1px solid transparent;
    height: auto;
  }

  .datagrid-wrapper {
    .datagrid-cell-wrapper > .icon {
      vertical-align: middle;
    }

    &:first-of-type {
      tr.rowstatus-row-error td:first-child {
        @include rowstatusEndBorders($ids-color-status-danger);
      }

      tr.rowstatus-row-dirty td:first-child {
        @include rowstatusEndBorders($dirty-icon-fill);
      }

      tr.rowstatus-row-alert td:first-child {
        @include rowstatusEndBorders($alert-color);
      }

      tr.rowstatus-row-info td:first-child {
        @include rowstatusEndBorders($ids-color-brand-primary-base);
      }

      tr.rowstatus-row-in-progress td:first-child {
        @include rowstatusEndBorders($trigger-icon-fill-color);
      }

      tr.rowstatus-row-success td:first-child {
        @include rowstatusEndBorders($ids-color-status-success);
      }

      tr.rowstatus-row-new td:first-child {
        @include rowstatusEndBorders($trigger-icon-fill-color);
      }
    }

    &:last-of-type {
      tr.rowstatus-row-error td:last-child {
        @include rowstatusEndBorders($ids-color-status-danger);
      }

      tr.rowstatus-row-dirty td:last-child {
        @include rowstatusEndBorders($dirty-icon-fill);
      }

      tr.rowstatus-row-alert td:last-child {
        @include rowstatusEndBorders($alert-color);
      }

      tr.rowstatus-row-info td:last-child {
        @include rowstatusEndBorders($ids-color-brand-primary-base);
      }

      tr.rowstatus-row-in-progress td:last-child {
        @include rowstatusEndBorders($trigger-icon-fill-color);
      }

      tr.rowstatus-row-success td:last-child {
        @include rowstatusEndBorders($ids-color-status-success);
      }

      tr.rowstatus-row-new td:last-child {
        @include rowstatusEndBorders($trigger-icon-fill-color);
      }
    }

    &.paginated {
      background-color: $datagrid-empty-bg-color;
    }

    td:first-child,
    td.is-hidden:first-child + td {
      border-inline-start: 0;
    }

    &.left {
      .datagrid-expandable-row.is-expanded.is-expanded-frozen > td {
        border-right-color: transparent;
      }
    }

    &.right {
      td {
        border-left: 1px solid $datagrid-cell-border-color;
      }

      .datagrid-expandable-row.is-expanded.is-expanded-frozen > td {
        border-left-color: transparent;
      }
    }

    &.center {
      .datagrid-expandable-row.is-expanded.is-expanded-frozen > td {
        .datagrid-row-detail {
          .datagrid-row-detail-padding {
            left: 0;
            position: absolute;
            transition: opacity 0.3s ease-out;

            .datagrid-cell-layout:last-of-type {
              padding-right: 0;

              .datagrid-wrapped-text {
                max-width: 100%;
              }
            }
          }
        }
      }
    }
  }

  &.show-space td {
    white-space: pre-wrap;
  }

  // Hide last bottom border
  tr:last-child td {
    border-bottom: 0;
  }

  &.has-visible-last-row tr:last-child td {
    border-bottom: 1px solid $datagrid-cell-border-color;
  }

  &.has-filterable-columns {
    .datagrid-filter-wrapper {
      height: 24px;
      margin: 2px 0;
      text-align: left;
    }

    .datagrid-header th .datagrid-checkbox-wrapper {
      .datagrid-checkbox {
        top: 14px;
      }

      + .datagrid-filter-wrapper.is-empty {
        left: -60px;
        z-index: -1;
      }
    }
  }

  &.has-filterable-columns {
    // Align filter column headings
    > .datagrid-header .datagrid-filter-wrapper {
      height: 22px;
    }

    > .datagrid-header .datagrid-column-wrapper {
      position: relative;
      top: -4px;

      &.l-right-text {
        top: -15px;
      }
    }
  }

  &.has-toolbar.has-two-line-header {
    .datagrid-header {
      .datagrid-column-wrapper {
        padding: 5px 20px 10px;

        .sort-indicator {
          vertical-align: baseline;
        }
      }
    }
  }

  //State Change
  &.is-readonly {
    border: 0;
  }

  //Hidden Headers
  colgroup {
    col.is-hidden {
      display: none;
    }
  }

  .resize-handle {
    border: 0;
    cursor: col-resize;
    height: $datagrid-header-height;
    left: -999px;
    top: auto;
    width: 11px;
    z-index: 3;

    &:focus {
      outline-color: $datagrid-list-filter-focus-color;
      box-shadow: $datagrid-cell-focus-box-shadow;
    }
  }

  &:not(.is-gridlist) {
    &.is-hover-row:not(.error):not(.is-rowdisabled):not(.datagrid-virtual-row-bottom):not(.is-selected):not(.is-rowactivated):not(.datagrid-expandable-row) td:not(.is-editing):not(.is-readonly):not(.error) {
      .icon:not(.icon-rowstatus) {
        @include trigger-icon-background($datagrid-row-hover-color);
      }
    }
  }

  // States - List Style Datagrid
  &.is-gridlist {
    background-color: transparent !important;
    border: 0;

    &.datagrid-alternate-bg-color {
      background-color: $panel-bg-color;
    }

    .datagrid-header-container {
      background-color: transparent;
    }

    .datagrid {
      tbody {
        tr {
          &.is-rowactivated:hover td:not(.is-editing) {
            background-color: $datagrid-list-row-group-hover-color;
          }
        }
      }
    }

    tr.is-hover-row:not(.error):not(.is-rowdisabled):not(.datagrid-virtual-row-bottom):not(.is-selected):not(.is-rowactivated):not(.datagrid-expandable-row) td:not(.is-editing):not(.is-readonly):not(.error) {
      background-color: $datagrid-list-row-hover-color;

      .is-readonly {
        background-color: transparent;
      }
    }

    .is-hover-row .datagrid-trigger-cell .icon {
      background-color: transparent;
      box-shadow: none;
    }

    th {
      background-color: $datagrid-list-header-bg-color;
      border-left: 0 !important;
      border-right: 0 !important;

      .datagrid-header-text {
        color: $datagrid-list-header-color;
      }

      &.is-sortable:hover {
        background-color: $datagrid-list-header-hover-color;
        cursor: pointer;
      }

      .sort-indicator .icon {
        color: $datagrid-list-sort-icon-color;
      }

      &:focus {
        background-color: $datagrid-list-header-bg-color;
        box-shadow: $datagrid-list-header-box-shadow;
        outline: 1px solid $datagrid-list-header-focus-border-color !important;
      }

      &.is-active {
        background-color: $datagrid-list-header-active-color;
      }

      &.is-sorted-asc .sort-asc .icon,
      &.is-sorted-desc .sort-desc .icon {
        color: $datagrid-list-sort-icon-hover-color;
      }

      .datagrid-checkbox {
        &::before {
          border: 1px solid $datagrid-list-header-checkbox-border-color;
        }
      }

      &.is-active.is-sorted-asc {
        .sort-indicator {
          .sort-desc {
            .icon {
              color: $datagrid-list-alt-sorted-icon-color;
            }
          }
        }
      }

      &.is-active.is-sorted-desc {
        .sort-indicator {
          .sort-asc {
            .icon {
              color: $datagrid-list-alt-sorted-icon-color;
            }
          }
        }
      }
    }

    td {
      background-color: transparent;
      border-top: 0;
      box-shadow: none;

      .is-readonly {
        background-color: transparent;
      }
    }

    tr td {
      border-left: 0 !important;
      border-right: 0 !important;
      border-right-color: transparent !important;
    }

    //Filter Row
    .datagrid-header {
      background-color: $datagrid-list-header-bg-color;

      .is-filterable .datagrid-filter-wrapper {
        input,
        div.dropdown {
          border-color: $datagrid-list-filter-border-color !important;
          color: $datagrid-list-filter-color;

          &:disabled,
          &.is-disabled {
            border-color: $datagrid-list-filter-disabled-color !important;

            + .icon {
              color: $datagrid-list-filter-disabled-color !important;
            }
          }

          &:focus {
            border-color: $datagrid-list-filter-focus-color !important;
          }

          &:hover:not(:disabled):not(:focus) {
            border-color: $datagrid-list-filter-hover-border-color !important;
          }
        }

        .btn-filter {
          .icon,
          .icon-dropdown {
            color: $datagrid-list-filter-icon-color !important;
          }

          &:hover:not(.is-open):not(:disabled) .icon,
          &:hover:not(.is-open):not(:disabled) .icon-dropdown {
            color: $datagrid-list-filter-hover-color !important;
          }

          &:disabled .icon {
            color: $datagrid-list-filter-disabled-color !important;
          }

          &.is-open .icon {
            color: $datagrid-list-filter-active-color !important;
          }
        }

        .datepicker,
        .dropdown {
          + .icon {
            color: $datagrid-list-filter-icon-color !important;
          }

          &:hover:not(:disabled) + .icon {
            color: $datagrid-list-filter-hover-color !important;
          }
        }
      }

      .datagrid-header-groups th {
        background-color: $datagrid-list-group-header-bg-color;
        border-right: 1px solid $datagrid-list-group-header-border-color;
      }

      .handle {
        &:hover {
          color: $datagrid-list-header-color;
        }
      }
    }
  }

  &.has-draggable-columns {
    th.is-active.is-sorted-asc {
      .sort-indicator {
        .sort-desc {
          .icon {
            color: $datagrid-list-draggable-sorted-icon-color;
          }
        }
      }
    }

    th.is-active.is-sorted-desc {
      .sort-indicator {
        .sort-asc {
          .icon {
            color: $datagrid-list-draggable-sorted-icon-color;
          }
        }
      }
    }
  }

  &.has-inline-editor {
    td {
      &:focus,
      &.is-focused {
        box-shadow: none;
      }
    }
  }

  &.large-rowheight .datagrid-header th.text-ellipsis {
    &:not(.is-filterable) .datagrid-column-wrapper {
      height: 32px;
    }
  }

  //Short and Medium Row height
  &.small-rowheight,
  &.extra-small-rowheight {
    .datagrid-cell-wrapper {
      min-height: $datagrid-small-row-height;
      line-height: 30px;
    }

    &.has-filterable-columns {
      .is-filterable th,
      .is-filterable .datagrid-column-wrapper {
        height: $datagrid-small-header-height;
      }
    }

    //Resize Drag Arrows
    .drag-target-arrows {
      font-size: 1.5em;
      height: $datagrid-small-header-height - 2;
      padding: 1px 0 0 5px;
      width: 14px;
    }

    //Resize the headers too
    .datagrid-column-wrapper,
    th {
      height: $datagrid-small-header-height;

      .handle,
      .is-draggable-target {
        height: $datagrid-extra-small-header-height;

        .icon {
          height: 16px !important;
          left: -4px !important;
          top: 3px !important;
          width: 16px !important;
        }
      }

      &.text-ellipsis {
        .datagrid-column-wrapper {
          padding: 0 8px;
        }
      }
    }

    td {
      &.is-editing {
        .btn-icon {
          > .icon {
            margin-right: 0;
            top: -1px;
          }
        }
      }

      &.datagrid-trigger-cell .colorpicker-container span.trigger {
        inset-inline-start: 16px;
        top: -5px;
      }
    }

    .datagrid-column-wrapper {
      padding: 0 4px;
      top: 0;

      &.l-right-text {
        padding: 0 4px;

        .sort-indicator {
          margin: 3px -1px 0 0;
        }
      }

      .datagrid-checkbox {
        top: -13px;
      }

      &.l-center-text .sort-indicator {
        margin: -1px -23px 0 4px;
      }
    }

    .sort-indicator {
      margin-inline-start: 1px;
      margin-inline-end: 0;
      margin-block-start: 2px;

      .icon {
        height: 16px;
        width: 16px;
      }

      .sort-desc {
        margin-top: -1px;
      }
    }

    .arrange-placeholder {
      height: $datagrid-small-row-height + 7;
    }

    &.has-filterable-columns {
      // Align filter column headings
      > .datagrid-header .datagrid-filter-wrapper {
        height: 20px;
      }

      > .datagrid-header .datagrid-column-wrapper {
        margin-bottom: 4px;
        position: relative;
        top: -2px;

        &.l-right-text {
          top: -13px;
        }
      }

      .is-filterable {
        .datagrid-column-wrapper {
          top: -1px;

          &.l-right-text {
            top: -2px;
          }
        }

        .datagrid-filter-wrapper {
          max-width: calc(100% - 8px);
          top: -3px;
          width: calc(100% - 8px);

          .btn-filter {
            left: 4px;
            padding-top: 4px;
          }

          input {
            left: 0;
          }

          .lookup-wrapper .trigger {
            margin-left: -22px;
            inset-inline-end: 0;
            margin-top: 3px;
          }

          .has-close-icon-button .icon {
            right: 19px;
            top: 5px;
          }

          .dropdown-wrapper {
            left: 8px;
          }

          .dropdown {
            width: calc(100% - 8px);
          }

          .btn-filter.btn-filter-checkbox {
            left: calc(50% - 10px) !important;
          }
        }
      }
    }
  }

  &.extra-small-rowheight th {
    height: $datagrid-extra-small-header-height;

    .datagrid-column-wrapper {
      height: $datagrid-extra-small-header-height;
    }
  }

  &.extra-small-rowheight {
    .datagrid-header .datagrid-filter-wrapper {
      max-width: calc(100% - 10px);
      min-width: 60px;
      top: -4px;
      width: calc(100% - 10px);

      input {
        font-size: $input-size-compact-font-size;
        height: 22px;
        left: 3px !important;
      }

      .dropdown {
        font-size: $input-size-compact-font-size;
        height: 22px;
        line-height: 20px;

        + .icon {
          top: -3px !important;
        }
      }

      .datepicker + .trigger,
      .timepicker + .trigger {
        right: 2px;
        top: -1px;
      }

      .dropdown-wrapper {
        left: 8px;
      }

      .lookup-wrapper .trigger {
        margin-left: -18px;
        margin-top: 1px;
      }
    }

    &.has-filterable-columns {
      .datagrid-header-text {
        position: relative;
        top: 0;
      }

      .datagrid-filter-wrapper {
        height: 20px;
      }

      .datagrid-column-wrapper {
        &.l-right-text {
          top: -1px;
        }
      }

      .is-filterable .datagrid-filter-wrapper {
        height: 24px;
        margin: 0;
        top: -3px;

        .btn-filter {
          left: 4px;
          padding-top: 1px;

          &.btn-filter-checkbox {
            left: calc(50% - 10px) !important;
          }
        }

        .has-close-icon-button .icon {
          right: 18px;
          top: 4px;
        }
      }

      .datagrid-header th .datagrid-checkbox-wrapper .datagrid-checkbox {
        top: 12px;
      }
    }

    td {
      &.is-editing {
        .datepicker + .trigger {
          margin-left: 3px;
          margin-top: 1px;

          > .icon {
            height: 15px;
            top: -1px;
          }
        }

        .timepicker + .trigger {
          margin-left: 1px;
          margin-top: 1px;

          > .icon {
            position: relative;
            top: -1px;
          }
        }
      }

      &.datagrid-trigger-cell {
        .colorpicker-container {
          .trigger {
            top: 4px;
          }
        }
      }
    }

    tbody tr td.datagrid-trigger-cell .icon.icon-clock {
      left: -7px;
      top: 3px;
    }

    tbody tr td.is-editing {
      .timepicker {
        margin-top: 2px;
        padding: 0 6px;
      }

      .timepicker + .icon {
        margin-left: 2px !important;
        top: -4px !important;
      }
    }

    .datagrid-header th.text-ellipsis {
      .datagrid-column-wrapper {
        .datagrid-header-text {
          margin-block: 7px 0;
          margin-inline: -4px 0;
        }

        .datagrid-header-icon {
          top: 1px;
          transform: translateY(0);
        }
      }
    }
  }

  &.small-rowheight {
    .datagrid-header .datagrid-filter-wrapper {
      .datepicker + .trigger,
      .timepicker + .trigger {
        right: 6px;
        top: 0;
      }
    }

    td {
      &.is-editing {
        .datepicker + .trigger {
          margin-left: 4px;
          margin-top: 3px;

          > .icon {
            height: 15px;
            top: -1px;
          }
        }

        .timepicker + .trigger {
          margin-left: 0;
          margin-top: 3px;

          > .icon {
            height: 16px;
            position: relative;
            top: -1px;
          }
        }
      }
    }

    .datagrid-header {
      .datagrid-column-wrapper {
        .datagrid-header-icon {
          top: -2px;
          transform: translateY(0);
        }
      }
    }
  }

  &.medium-rowheight {
    .drag-target-arrows {
      font-size: 1.6em;
      height: $datagrid-medium-header-height;
      padding: 2px 0 0 7px;
      width: 16px;
    }

    .datagrid-column-wrapper,
    th {
      height: $datagrid-medium-header-height;

      .handle,
      .is-draggable-target {
        height: $datagrid-medium-header-height;
      }

      &.text-ellipsis {
        .datagrid-header-text {
          margin-block-start: 9px !important;
        }
      }
    }

    .datagrid-column-wrapper {
      .sort-indicator {
        margin-block-start: 3px;
        margin-inline-start: 2px;
      }

      &.l-right-text {
        .sort-indicator {
          margin: 3px 0 0;
        }
      }

      &.l-center-text {
        .sort-indicator {
          margin: -4px -21px 0 4px;
        }
      }
    }

    .arrange-placeholder {
      height: $datagrid-medium-row-height + 10;
    }

    &.has-filterable-columns {
      // Align filter column headings
      > .datagrid-header .datagrid-filter-wrapper {
        height: 24px;
      }

      > .datagrid-header .datagrid-column-wrapper {
        position: relative;
        top: -4px;

        &.l-right-text {
          top: -15px;
        }
      }

      .is-filterable .datagrid-column-wrapper {
       top: -2px;

        &.l-right-text {
          top: -2px;
        }
      }

      .datagrid-column-wrapper {
        top: -1px;
      }
    }

    td {
      &.is-editing {
        .btn-icon {
          > .icon {
            left: 0;
          }
        }

        .datepicker + .trigger {
          margin-left: -4px;
          margin-top: 8px;
        }

        .timepicker + .trigger {
          margin-left: -1px;
          margin-top: 9px;
        }
      }

      &.datagrid-trigger-cell .colorpicker-container span.trigger {
        top: 6px;
        inset-inline-start: 15px;
      }
    }
  }

  &.show-editor-icons {
    .datagrid-trigger-cell .icon:not(.datagrid-alert-icon) {
      visibility: visible;
    }
  }
}

.full-height .datagrid-container {
  height: calc(100% - 50px);
}

// Datagrid Scroll Wrapper
.datagrid-wrapper {
  height: 100%;
  overflow: hidden;

  &.center {
    width: 100%;
  }

  &.scrollable-x {
    overflow-x: auto;
  }

  &.scrollable-y {
    overflow-y: auto;
  }

  table {
    empty-cells: show;
  }

  .empty-message {
    display: none;
  }

  &.left {
    overflow-y: hidden;
  }

  &.left,
  &.right {
    flex-shrink: 0;
    overflow-x: auto;

    + .datagrid-wrapper.center {
      td.is-hidden:first-child + td {
        border-left: 1px solid $datagrid-cell-border-color;
      }

      th.is-hidden:first-child + th {
        border-left: 1px solid $datagrid-header-border-color;
      }
    }
  }

  .datagrid-row.is-selected.is-hover-row {
    .datagrid-trigger-cell {
      .icon-calendar {
        z-index: 2;
      }
    }
  }
}

.scrollable-flex-header {
  .datagrid-container {
    .datagrid {
      th {
        z-index: 1;
      }
    }
  }
}

// Grid Styling
.datagrid {
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 0;
  font-size: $ids-size-font-base;

  //This lets us resize to lower than content width but it causes layout issues with default col sizes
  table-layout: fixed;
  width: 100%;

  // Row Height Feature
  &.medium-rowheight {
    tbody tr {
      line-height: $datagrid-medium-row-height;

      td {
        // Expandable Cells
        &.is-active {
          .datagrid-cell-wrapper {
            padding: 4px 14px;
          }
        }

        .datagrid-cell-wrapper {
          .colorpicker-container {
            &.dropdown-trigger {
              margin-top: -1px;
            }

            height: 20.5px;
            margin-top: -1px;
            margin-left: -1px;

            .swatch {
              height: 28px;
              width: 28px;
            }

            .colorpicker {
              padding: 3px 10px 0;
            }
          }

          .dropdown-trigger {
            margin-left: -1px;
            margin-top: 2px;

            + .icon {
              left: 3.5px;
              top: 0;
            }
          }
        }

        .datagrid-row-heading {
          margin-top: 25px;
        }

        .btn-actions {
          top: 1px;
        }

        .process-indicator {
          top: 7px;
        }

        a.row-btn {
          top: 0;
        }

        .row-btn {
          height: 31px;
          top: 1px;
        }

        .hyperlink {
          margin-top: 0;
          vertical-align: middle;
        }

        .datagrid-drilldown {
          height: 25px;
          min-height: 25px;
          min-width: auto;
          top: 1px;
          width: auto;
        }

        //Editing
        &.is-editing {
          &.has-singlecolumn {
            min-height: $datagrid-medium-row-height + 8;
          }

          &.datagrid-trigger-cell {
            input.timepicker.is-active.is-open {
              margin-top: -6px;
            }

            input.datepicker {
              margin-top: -5px;
            }
          }

          .btn-icon.trigger:hover:not(:disabled) {
            background-color: transparent;
          }

          &:not(.datagrid-trigger-cell) .datepicker {
            padding: 0 5px 0 15px;
          }

          .datepicker {
            margin-top: 3px;

            ~ .icon {
              margin-left: -5px;
              top: calc(50% - 17px);
            }
          }

          .lookup-wrapper {
            padding-left: 0;
            padding-top: 6px;
          }

          input {
            vertical-align: top;
            margin-top: -1px;
            margin-left: -1px;

            &.datepicker {
              margin-left: 0;
            }

            &.lookup {
              height: inherit;
              padding: 2px 16px 0 0;
              width: 100%;

              + .trigger {
                margin-left: -13px;
                margin-top: 0;

                > .icon {
                  top: 0;
                }
              }

              &.align-text-right {
                width: calc(100% - 28px);
              }
            }

            &.timepicker {
              width: calc(100% - 10px);
              margin-left: -1px;

              ~ .icon {
                left: auto;
                margin-left: 0;
                top: calc(50% - 17px);
              }
            }
          }

          .spinbox-wrapper {
            margin-left: -16px;
            margin-top: -5px;
            width: 100%;

            input {
              padding: 12px 0 0;
              width: calc(100% - 38px);
            }

            .spinbox-control {
              border: 0;
              border-right: 1px solid $input-color-focus-border;
              padding: 10px;
              width: 35px;
              inset-block-start: 3px;

              &.down{
                inset-inline-end: 3px;
              }

              &.up {
                border-left: 1px solid $input-color-focus-border;
                inset-inline-end: 3px;
              }
            }
          }

          .dropdown-wrapper {
            margin-top: 0;
          }

          .dropdown {
            height: inherit;
            padding: 0 22px 0 0 !important;
            margin-inline-start: -1px;
          }

          div.dropdown + .icon,
          div.multiselect + .icon {
            left: auto;
            top: 0;
            right: -8px;
          }

          &.datagrid-trigger-cell .icon.icon-close {
            margin-left: 8px;
            left: -2px;
          }

          .datagrid-cell-wrapper {
            .colorpicker-container {
              input {
                vertical-align: unset;
              }
            }
          }
        }

        &.is-revealabletext {
          .datagrid-cell-wrapper .datagrid-revealable-text {
              line-height: 38px;
          }

          &.is-editing {
            div.datagrid-cell-wrapper {
              svg.icon {
                transform: translate(calc(-100% - 8px), 8px);
              }
            }
          }
        }

        //validation
        &.error {
          &.datagrid-trigger-cell .icon-error {
            margin-top: auto;
          }

          .datagrid-cell-wrapper .icon-error {
            top: 10px;
          }
        }

        &.alert {
          &.datagrid-trigger-cell .icon-alert {
            margin-top: auto;
          }

          .datagrid-cell-wrapper .icon-alert {
            top: 10px;
          }
        }

        &.success {
          &.datagrid-trigger-cell .icon-success {
            margin-top: auto;
          }

          .datagrid-cell-wrapper .icon-success {
            top: 10px;
          }
        }

        &.info {
          &.datagrid-trigger-cell .icon-info {
            margin-top: auto;
          }

          .datagrid-cell-wrapper .icon-info {
            top: 10px;
          }
        }
      }
    }

    .datagrid-cell-wrapper {
      min-height: 40px;
      line-height: 35px;

      .icon-calendar,
      .icon-fileupload {
        left: 6px;
      }
    }

    .lookup-wrapper {
      .align-text-right {
        + .trigger {
          margin-left: 0 !important;
          margin-top: -4px !important;
        }
      }
    }

    .datagrid-drilldown {
      top: -1px;
    }

    .datagrid-trigger-cell {
      &.is-editing .trigger + .icon-close + .icon:not(.datagrid-alert-icon).icon-fileupload {
        left: 5px;
      }

      .icon:not(.datagrid-alert-icon) {
        left: 3px;
        top: 5px;

        &.icon-rowstatus {
          left: 1px;
          top: 2px;
        }

        &.icon-search-list {
          left: 0;
          top: 0;
        }

        &.icon-calendar {
          left: 2px;
          top: 0;
        }

        &.icon-close {
          margin-top: 0;
          top: 1px;
          left: -1px;
        }

        &.icon-fileupload {
          top: 1px;
        }

        &.icon-clock {
          left: 3px;
          top: -1px;
        }
      }

      .colorpicker-container {
        .icon {
          top: 0;
        }
      }

      .align-text-right {
        &.trigger {
          width: calc(100% - 16px);
        }

        + .icon.icon-search-list {
          left: 3px;
        }
      }
    }

    .chart-completion-target {
      inset-block-start: -2px;

      .chart-targeted-text {
        margin-top: -35px;
      }
    }

    .datagrid-expand-btn {
      margin-top: 0;
    }
  }

  &.small-rowheight,
  &.extra-small-rowheight {
    tbody tr {
      line-height: $datagrid-small-row-height;

      &.datagrid-rowgroup-header {
        line-height: $datagrid-small-row-height + 4;

        .datagrid-expand-btn {
          left: -10px;
          top: 0;

          .icon.plus-minus {
            inset-inline-start: unset;
            left: -6px !important;
            top: -6px !important;
          }

          + span {
            margin-left: -15px;
          }
        }
      }

      td {
        // Expandable Cells
        &.is-active {
          .datagrid-cell-wrapper {
            padding: 3px 9px;
          }
        }

        .code-block span {
          line-height: normal;
        }

        .btn {
          top: -3px !important;
        }

         &.is-revealabletext {
          &:hover {
            .datagrid-cell-wrapper .datagrid-revealable-text {
              .btn-reveal {
                min-height: 30px;
                top: 0 !important;
              }
            }
          }
        }

        .datagrid-expand-btn {
          height: 22px;
          left: -3px;
          line-height: 22px;
          margin-right: 9px;
          margin-top: -2px;
          min-height: 22px;
          min-width: 22px;
          vertical-align: middle;
          width: 22px;

          + span {
            top: 1px;
          }

          .datagrid-cell-wrapper .datagrid-tree-node {
            top: 1px;
          }

          svg.icon {
            left: 0;
            position: relative;
            top: -2px;
          }

          .icon {
            left: -10px;
            position: relative;
            top: -7px;
          }
        }

        .datagrid-drilldown {
          height: 22px;
          min-height: 20px;
          min-width: auto;
          top: 0;
          width: auto;
        }

        .hyperlink {
          line-height: 1.4rem;
          vertical-align: middle;
        }

        .row-btn {
          height: 24px;
          line-height: 18px;
          min-width: 80px;
          vertical-align: middle;

          span {
            line-height: 18px;
          }

          &.btn-icon {
            height: 21px;
            min-width: 20px;
            line-height: 19px;
            min-height: 21px;
          }

          &.btn-primary {
            top: -1px;
          }

          .icon {
            margin-top: -3px;
          }
        }

        .btn-secondary.row-btn {
          min-height: 24px;
          top: -1px;
        }

        &.datagrid-trigger-cell {
          &:hover,
          &:focus {
            .icon-search-list {
              ~ .icon-error {
                margin-left: -48px !important;
              }
            }
          }

          .icon.datagrid-alert-icon {
            height: 15px;
            width: 16px;
          }

          .icon:not(.datagrid-alert-icon) {
            height: 16px;
            top: 4px;

            &.icon-rowstatus {
              top: -3px;
            }

            &.icon-calendar {
              height: 15px;
              left: -4px;
              top: -1px;
            }

            &.icon-fileupload {
              height: 15px;
              left: -2px;
              top: -1px;
            }

            &.icon-clock {
              left: -5px;
              top: 0;
            }

            &.icon-close {
              margin-left: -25px !important;
              margin-top: -9px;
              left: -3px;
            }

            &.icon-error:not(.datagrid-alert-icon) {
              margin-left: -26px;
            }
          }

          .dropdown-trigger {
            margin-left: 3px;

            + .icon {
              left: -3px;
              top: -1px;
            }
          }

          .trigger {
            &.align-text-right {
              width: calc(100% - 21px);
            }
          }
        }

        .colorpicker-container {
          height: 24px;

          &.dropdown-trigger {
            margin-top: -2px;
          }
        }

        //Editing
        &.is-editing {
          &.has-singlecolumn {
            min-height: $datagrid-small-row-height + 8;
          }

          &.is-fileupload {
            .trigger,
            .trigger-close {
              .icon {
                height: 15px;
                width: 15px;
              }
            }

            .trigger .icon {
              top: 4px;
            }
          }

          &.datagrid-trigger-cell {
            .colorpicker-container .icon {
              top: 4px;
              left: 6px;
            }
          }

          .colorpicker-container {
            padding: 1px 3px 0;

            input.colorpicker {
              margin-inline-start: -3px;
              margin-top: -2px;
              top: -2px;
            }
          }

          .datepicker {
            height: 3rem;
            margin-top: -1px;
            margin-left: 0;
            padding: 0 0 0 10px;

            + .icon {
              height: 15px;
              margin-left: -1px;
              top: -2px;
            }
          }

          .timepicker {
            margin-top: 1px;
            padding-left: 8px;

            + .icon {
              margin-left: 1px;
              top: -2px;
            }
          }

          input {
            height: 29px;
            margin-left: 0.5px;
            margin-top: -3px;
          }

          .dropdown-wrapper {
            margin-top: 0;
          }

          .dropdown {
            height: inherit;
            margin: 0;
            padding: 0 24px 0 0 !important;

            + .icon {
              right: -3px;
              top: 7px;
            }
          }

          .lookup-wrapper {
            padding-top: 0;
          }

          .spinbox-wrapper {
            margin-left: -16px;
            margin-top: -5px;
            width: 100%;

            input {
              padding: 0;
              width: calc(100% - 34px);
            }

            .spinbox-control {
              border: 0;
              border-right: 1px solid $input-color-focus-border;
              padding: 3px 15px;
              width: 30px;

              &.up {
                border-left: 1px solid $input-color-focus-border;
              }
            }
          }
        }

        //validation
        &.error {
          &.datagrid-trigger-cell .icon-error {
            margin-top: auto;
          }

          .datagrid-cell-wrapper .icon-error {
            height: 16px;
            top: 6px;
          }
        }

        &.alert {
          &.datagrid-trigger-cell .icon-alert {
            margin-top: auto;
          }

          .datagrid-cell-wrapper .icon-alert {
            height: 16px;
            top: 6px;
          }
        }

        &.success {
          &.datagrid-trigger-cell .icon-success {
            margin-top: auto;
          }

          .datagrid-cell-wrapper .icon-success {
            height: 16px;
            top: 6px;
          }
        }

        &.info {
          &.datagrid-trigger-cell .icon-info {
            margin-top: auto;
          }

          .datagrid-cell-wrapper .icon-info {
            height: 16px;
            top: 6px;
          }
        }
      }

      &.rowstatus-row-error,
      &.rowstatus-row-alert,
      &.rowstatus-row-info,
      &.rowstatus-row-in-progress,
      &.rowstatus-row-success,
      &.rowstatus-row-dirty,
      &.rowstatus-row-new {
        .rowstatus-cell {
          &::before {
            left: -16px;
            top: -15px;
          }

          .icon-rowstatus {
            background-color: transparent;
            box-shadow: unset;
            left: -1px;
            top: 0;
          }
        }
      }
    }

    .datagrid-cell-wrapper {
      padding: 0 8px;

      .process-indicator {
        top: 4px;
      }

      .btn-actions {
        top: -2px;
        height: 24px;
        min-height: 24px;
        min-width: 24px;
        width: 24px;
      }

      .colorpicker-container {
        .swatch {
          height: 18px;
          top: -4px;
          width: 18px;
        }

        .colorpicker:not(.is-open) {
          top: -2px;
          padding: 2px 7px;
        }

        .trigger {
          height: 20px;
        }
      }
    }

    .align-text-right {
      + .icon-search-list {
        left: 0 !important;
      }
    }

    .chart-completion-target {
      height: 20px;

      .chart-targeted-text {
        margin-top: -30px;
      }
    }

    .chart-targeted-achievement {
      .target {
        margin-top: 0;
      }

      .bar {
        height: 20px !important;

        &.completed {
          margin-top: -20px;
        }
      }
    }
  }

  &.small-rowheight{
    tbody tr td.is-editing {
      .spinbox-control {
        &.up{
          padding: 4px 10px !important;
          inset-inline-end: 6px;
        }
      }
    }
  }

  &.extra-small-rowheight{
    tbody tr td.is-editing {
      .spinbox-control{
        &.up {
          border-left: 1px solid $input-color-focus-border;
          padding: 6px 9px;
          inset-inline-end: 10px;
        }

        &.down{
          padding: 5px 15px;
          inset-inline-start: 7px;
        }
      }
    }

    tbody tr td .datagrid-cell-wrapper {
      .datagrid-tree-node,
      .datagrid-expand-btn + span {
        top: 0;
      }
    }
  }

  &.small-rowheight {
    tbody tr td {
      &.datagrid-trigger-cell {
        &.has-editor {
          .icon.icon-search-list {
            inset-block-start: 0 !important;
            inset-inline-start: 0 !important;
          }
        }

        .icon.icon-search-list {
          left: -5px;
          top: 3px;
        }
      }

      &.is-editing {
        input.lookup {
          + .trigger {
            margin-left: -17px;
            margin-top: 2px;

            > .icon {
              top: -1px;
              transform: none;
            }
          }
        }
      }

      &.reorder-group-child-col .datagrid-reorder-icon {
        padding-left: 39px;
      }
    }

    .datagrid-header th.text-ellipsis {
      .datagrid-column-wrapper .datagrid-header-text {
        margin-block-start: 7px;
        margin-block-end: -1px;
      }
    }

    tbody tr {
      .datagrid-reorder-icon .icon {
        inset-block-start: -1px;
      }
    }
  }

  &.extra-small-rowheight {
    font-size: $input-size-compact-font-size;

    tbody tr {
      .row-btn {
        top: -2px;
      }

      .datagrid-reorder-icon .icon {
        height: 18px;
        width: 21px;
      }

      td .datagrid-drilldown {
        top: -2px;
      }
    }

    .is-editing .datagrid-cell-wrapper {
      padding: 0 4px !important;
      text-overflow: initial;
    }

    .datagrid-cell-wrapper {
      min-height: $datagrid-extra-small-row-height;
      height: auto;
      padding: 0 4px;

      .dropdown-trigger {
        margin-top: -2px;
      }

      .process-indicator {
        top: 2px;
      }

      .btn-actions {
        top: -3px;
        height: 24px;
        min-height: 24px;
        min-width: 24px;
        width: 24px;
      }
    }

    tbody tr td {
      span {
        &.tag {
          height: $datagrid-extra-small-row-height - 53;
          line-height: $datagrid-extra-small-row-height - 5;
        }
      }

      &.reorder-group-child-col .datagrid-reorder-icon {
        padding-left: 42px;
      }

      .hyperlink {
        font-size: 1.4rem;
        margin-top: -6px;
        top: -1px;
      }

      .datagrid-checkbox-wrapper {
        margin-top: -12px;
      }

      &.datagrid-trigger-cell {
        .dropdown-trigger:not(.colorpicker-container) + .icon {
          left: -6px !important;
        }

        &.has-editor .icon.icon-search-list {
          top: 0;
        }

        .icon.icon-search-list {
          left: -8px;
          top: 3px;
        }

        .icon.icon-calendar {
          height: 14px;
          left: -2px;
          top: 0;
        }
      }

      &.is-editing {
        input {
          font-size: $input-size-compact-font-size;
          height: $datagrid-extra-small-row-height - 1;
          padding: 0;
        }

        input.lookup {
          height: 30px;
          padding-bottom: 2px;
          margin-left: -1px;
          padding-right: 20px;
          padding-top: 0;

          + .trigger {
            margin-left: -20px;
            margin-top: 2px;

            > .icon {
              top: -1px;
            }
          }
        }

        .lookup-wrapper .trigger {
          height: 16px;
          margin-left: -22px;
          margin-top: 4px;
        }

        .datepicker {
          height: $datagrid-extra-small-row-height;
          padding: 0 5px;
        }

        .dropdown {
          font-size: $input-size-compact-font-size;
          height: $datagrid-extra-small-row-height + 2px;
          padding: 7px 22px 0 6px;
        }

        .datepicker + .icon {
          height: 14px;
          margin-left: -1px;
          top: -3px;
        }

        &.datagrid-trigger-cell .datagrid-cell-wrapper {
          span.trigger.is-clearable {
            width: calc(100% - 32px);
          }

          .icon-close {
            left: -5px;
            top: 3px;
            margin-left: -23px !important;
          }

          .icon-fileupload {
            left: -1px;
          }
        }
      }

      .btn-tertiary.row-btn,
      .btn-secondary.row-btn,
      .btn-primary.row-btn {
        font-size: $input-size-compact-font-size;
        top: -2px;
        height: 21px;
        line-height: 19px;
        min-height: 21px;
      }
    }

    .datagrid-trigger-cell.has-editor:not(.is-readonly):hover,
    .datagrid-trigger-cell.has-editor:not(.is-readonly):focus {
      .icon:not(.datagrid-alert-icon) {
        &.icon-error {
          margin-left: -45px !important;
        }
      }
    }
  }

  &.small-rowheight,
  &.extra-small-rowheight {
    > tbody > tr {
      .datagrid-alert-icon {
        height: 15px;
        width: 16px;
        top: -1px;
      }
      
      button + span .datagrid-alert-icon {
        inset-inline-start: -4px;
      }

      .datagrid-alert-text {
        top: 0;
      }
    }

    td.is-dirty-cell:not(.rowstatus-cell) {
      &::before {
        left: 0;
        top: -2px;
      }
    }
  }

  &.extra-small-rowheight {
    > tbody > tr {
      .datagrid-cell-wrapper:has(.datagrid-text-content) {
        .datagrid-text-content {
          font-size: 1.4rem;

          &.password-container {
            top: 2.5px;
          }
        }
      }

      .datagrid-alert-icon {
        top: -1px;
        inset-inline-start: 0;
      }

      button + span .datagrid-alert-icon {
        inset-inline-start: -4px;
      }
    }
  }

  // Table Rows
  > tbody > tr {
    line-height: $datagrid-row-height;

    &.is-dragging-clone {
      min-width: 100px !important;
      position: fixed;
      z-index: 3;

      &.groupable {
        -webkit-box-shadow: 0 0 10px 0 $datagrid-cell-border-color;
        box-shadow: 0 0 10px 0 $datagrid-cell-border-color;
        display: flex;

        > td {
          border-bottom: 1px solid $datagrid-cell-border-color;
          border-top: 1px solid $datagrid-cell-border-color;
        }
      }

      .handle {
        top: 2px;
      }
    }

    &.is-active-row {
      outline: 1px solid $ids-color-brand-primary-base;
      outline-offset: -1px;
    }

    .is-editor {
      ul,
      ol {
        list-style: inherit;
        margin: 5px auto 5px 15px;
      }

      ol {
        list-style: decimal;
      }
    }

    // Datagrid Reorder
    .datagrid-reorder-icon {
      cursor: move;
      white-space: nowrap;

      .icon {
        background-color: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        color: $button-color-tertiary-initial-font;
        vertical-align: middle;

        &:hover {
          color: $button-color-tertiary-hover-text;
        }

        &:active {
          color: $button-color-tertiary-active-font;
        }
      }
    }

    .reorder-group-child-col .datagrid-reorder-icon {
      padding-left: 36px;
    }

    &.arrange-dragging {
      td {
        background-color: $datagrid-cell-bg-color !important;
        border-bottom: 1px solid $datagrid-cell-border-color;
        border-top: 1px solid $datagrid-cell-border-color;

        &:first-child {
          border-left: 1px solid $datagrid-cell-border-color;
        }

        .is-readonly {
          background-color: transparent !important;
        }

        .icon {
          background-color: $datagrid-cell-bg-color !important;
          box-shadow: none !important;
        }
      }
    }

    &.arrange-placeholder {
      height: $datagrid-row-height + 7;

      td {
        background-color: $body-color-primary-background;
      }
    }

    //Tree - Collapsed rows
    &.is-hidden {
      display: none;
    }

    // Hover States
    &.is-hover-row:not(.error):not(.is-rowdisabled):not(.datagrid-virtual-row-bottom):not(.is-selected):not(.is-rowactivated):not(.datagrid-expandable-row) td:not(.is-editing):not(.error) {
      background-color: $datagrid-row-hover-color;

      .is-readonly:not(span) {
        background-color: $datagrid-row-hover-color;
      }

      .datagrid-expand-btn .icon {
        background-color: transparent;
        box-shadow: none;
      }
    }

    &.is-selected:not(.hide-selected-color) td:not(.is-editing),
    &.is-selected:not(.hide-selected-color) td:not(.is-editing) .datagrid-cell-wrapper {
      background-color: $datagrid-row-selected-color;

      .icon:not(.icon-rowstatus):not(.plus-minus):not(.caret-right) {
        @include trigger-icon-background($datagrid-row-selected-color);
      }
    }

    &.is-rowactivated td:not(.is-editing),
    &.is-rowactivated td:not(.is-editing) .datagrid-cell-wrapper {
      background-color: $datagrid-row-selected-color !important;

      button.datagrid-expand-btn .icon {
        background-color: transparent;
        box-shadow: none;
      }

      .btn.row-btn {
        background-color: $button-color-primary-initial-background;
        border: 1px solid $button-color-primary-initial-background;
        color: $button-color-primary-initial-font;

        &:hover {
          background-color: $button-color-primary-hover-background;
        }

        &:active {
          background-color: $button-color-primary-active-background;
        }
      }
    }

    &.is-hover-row {
      background-color: $datagrid-row-hover-color;
    }

    &.is-rowdisabled {
      pointer-events: none;

      td {
        color: $disabled-color;

        .trigger,
        .trigger .colorpicker {
          color: $disabled-color;
        }

        &:hover {
          .datagrid-checkbox {
            cursor: default;
          }
        }

        &.has-editor:hover {
          .icon {
            visibility: hidden;
          }
        }

        .hyperlink {
          color: $hyperlink-disabled-color;
        }

        .datagrid-checkbox {
          cursor: default;

          &::before {
            @include checkbox-unchecked-disabled-before-style;
          }

          &.is-checked {
            &::before {
              @include checkbox-checked-disabled-before-style;
            }

            &::after {
              @include checkbox-checked-disabled-after-style;
            }
          }
        }
      }
    }

    &.is-tooltips-enabled {
      pointer-events: unset;
      cursor: default;
    }

    &.is-selected:not(.hide-selected-color) .is-readonly:not(.is-editing) .datagrid-cell-wrapper {
      background-color: $datagrid-row-selected-color-dark;
    }

    &.is-clickable,
    &.is-active-row {
      td:focus {
        box-shadow: none;
        outline: none;
        transform: none;
      }
    }

    &.is-clickable {
      cursor: pointer;
    }

    .icon.plus-minus::before,
    .icon.plus-minus::after {
      background-color: $button-color-tertiary-initial-font;
    }

    td {
      &.is-revealabletext {
        .datagrid-cell-wrapper{
          .input-hide-text::-webkit-credentials-auto-fill-button {
            visibility: hidden;
            display: none !important;
          }

          .input-show-text::-webkit-credentials-auto-fill-button {
            visibility: hidden;
            display: none !important;
          }

         .datagrid-revealable-text {
          display: flex;
          align-items: center;
          margin: unset;
          justify-content: space-between;

          .reveal-icon,
          .btn-reveal {
            display: none;

            &:not(:has(.text)) {
              min-width: auto;
            }
          }
        }


        }

        &.is-editing {
          div.datagrid-cell-wrapper {
            svg.icon {
              transform: translate(calc(-100% - 8px), 12px);
            }
          }
        }


        &:hover {
          .datagrid-cell-wrapper .datagrid-revealable-text {
            .btn-reveal {
              display: block;
            }

            .reveal-icon {
              display: unset;
            }
          }
        }
      }

      &.is-editing {
        background-color: $datagrid-cell-editing-bg-color;

        div.datagrid-cell-wrapper {
          svg.icon {
            @include trigger-icon-background($datagrid-cell-editing-bg-color);
          }

          svg.icon-search-list {
            top: 2px;
          }

          button.btn-icon {
            svg.icon {
              @include trigger-icon-background($datagrid-cell-editing-bg-color);
            }
          }
        }
      }

      &.is-spinbox .datagrid-cell-wrapper{
        white-space: nowrap;
      }
    }

    &.alt-shading {
      td {
        background-color: $datagrid-alternate-bg-color;

        &.is-editing {
          background-color: $datagrid-cell-editing-bg-color;

          div.datagrid-cell-wrapper {
            svg.icon {
              @include trigger-icon-background($datagrid-cell-editing-bg-color);
            }
          }
        }

        div.datagrid-cell-wrapper {
          svg.icon {
            @include trigger-icon-background($datagrid-alternate-bg-color);
          }
        }
      }

      &.is-hover-row {
        td {
          background-color: $datagrid-row-hover-color;

          &.is-editing {
            background-color: $datagrid-cell-editing-bg-color;

            div.datagrid-cell-wrapper {
              svg.icon {
                @include trigger-icon-background($datagrid-cell-editing-bg-color);
              }
            }
          }

          div.datagrid-cell-wrapper {
            svg.icon {
              @include trigger-icon-background($datagrid-row-hover-color);
            }
          }
        }
      }
    }

    .btn-icon span {
      color: transparent;
    }

    .datagrid-alert-text {
      line-height: 25px;
      margin-right: -8px;
      padding-left: 8px;
      top: 3px;
      position: relative;
      text-align: left;
      width: inherit;
    }

    .l-right-text .datagrid-alert-text {
      margin-right: auto;
    }

    .datagrid-alert-icon {
      display: inline-block;
      height: 20px;
      top: 0;
      inset-inline-start: -5px;
      vertical-align: middle;
      width: 19px;

      + span {
        position: relative;
        top: 2px;
      }

      &.icon-dirty {
        height: 16px;
        top: 0;
        width: 16px;
      }
    }

    .badge {
      color: $font-color-extrahighcontrast;
      position: relative;
      top: -2px;
      vertical-align: middle;

      &[class*='azure'],
      &[class*='error'],
      &[class*='good'] {
        color: $inverse-color;
      }

      &.info .audible {
        background-color: $ids-color-palette-slate-50;
      }
    }

    .tag {
      position: relative;
      top: -2px;
      vertical-align: middle;

      &[class*='azure'] {
        color: $datagrid-badges-azure-font-color;
      }
    }

    .row-btn {
      line-height: normal;
      position: relative;
      top: 2px;

      .icon {
        visibility: visible;
      }
    }

    a.row-btn {
      height: 34px;
      min-height: 34px;
      min-width: 34px;
      padding: 0;
      vertical-align: middle;
      width: 34px;
      top: 0;

      .icon {
        margin: 7px 0 0;
      }
    }

    td.is-drilldown {
      .datagrid-cell-wrapper {
        padding: 0; // Removing padding to align drilldown icon properly
      }
    }

    .datagrid-cell-wrapper {
      border: 1px solid transparent;
      display: block;
      min-height: 49px;
      overflow: hidden;
      padding: 0 12px;
      white-space: nowrap;

      &:has(.datagrid-text-content){
        display: flex;

        .datagrid-text-content {
          align-self: center;
          line-height: inherit;

          &.password-container {
            position: relative;
            top: 3.5px;
          }
        }
      }

      .datagrid-tree-node {
        position: relative;
        top: 2px;
      }

      &.is-dropdown-wrapper {
        .dropdown-wrapper {
          margin-top: 2px;

          .dropdown {
            padding: 2px 8px 6px 4px;
          }

          .icon {
            top: 3px;
            right: -7px;
          }
        }
      }

      .colorpicker-container {
        background-color: transparent;
        border: 0;
        display: block;
        overflow: visible;
        width: 100%;
        box-shadow: none;

        &.is-disabled {
          opacity: 0.4;
        }

        &.is-focused {
          box-shadow: none;
        }

        .swatch {
          top: 4px;
        }

        .colorpicker {
          background-color: transparent;
          padding: 15px 10px 8px;
          position: relative;
          width: 79px;
          border: 1px solid transparent;

          &:hover {
            cursor: pointer;
          }

          + .icon {
            left: -10px;
            top: 3px;
          }
        }
      }
    }

    .process-indicator {
      inset-inline-start: 5px;
      margin-bottom: 0;
      position: relative;
      top: 13px;

      .display {
        margin-bottom: 0;
      }
    }

    .icon-favorite {
      position: relative;
      top: 3px;

      .icon {
        background-color: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
      }
    }

    .datagrid-img {
      display: block;
      height: 60px;
      margin-top: -7px;
      width: 60px;
    }

    &.rowstatus-row-error {
      @include rowstatus($ids-color-status-danger);
    }

    &.rowstatus-row-dirty {
      @include rowstatus($dirty-icon-fill);
    }

    &.rowstatus-row-alert {
      @include rowstatus($alert-color);
    }

    &.rowstatus-row-info {
      @include rowstatus($ids-color-brand-primary-base);
    }

    &.rowstatus-row-in-progress {
      @include rowstatus($trigger-icon-fill-color);
    }

    &.rowstatus-row-success {
      @include rowstatus($ids-color-status-success);
    }

    &.rowstatus-row-new {
      @include rowstatus($trigger-icon-fill-color);
    }
  }

  &.medium-rowheight {
    td.is-editing {
      .timepicker {
        padding: unset;
        margin-top: 0;

        + .btn-icon.trigger {
          margin-top: 5px;
          margin-left: -5px;
        }
      }

      &:not(.datagrid-trigger-cell) .datepicker {
        margin-top: unset !important;
        padding: unset !important;

        + .btn-icon.trigger {
          margin-top: 4px;
          margin-left: 12px;
        }
      }
    }
  }

  &.small-rowheight {
    td.is-editing {
      .timepicker {
        margin-left: -8px !important;

        + .btn-icon.trigger {
          margin-top: 4px;
          margin-left: 2px;
        }
      }

      .datepicker {
        margin-top: unset !important;
        padding: unset !important;

        + .btn-icon.trigger {
          margin-top: 2px;
          margin-left: 7px;
        }
      }

      &.is-spinbox .datagrid-cell-wrapper {
        height: $datagrid-small-row-height;
      }
    }
  }

  &.extra-small-rowheight {
    .colorpicker-container {
      height: 18px;

      input.colorpicker {
        font-size: $input-size-compact-font-size;
      }
    }

    .is-spinbox .datagrid-cell-wrapper {
      height: $datagrid-extra-small-row-height;
    }

    td.is-editing {
      .timepicker {
        padding: unset !important;
        width: calc(100% - 26px);

        + .btn-icon.trigger {
          margin-top: 1px;
          margin-left: 4px;
        }
      }

      .datepicker {
        padding: unset !important;

        + .btn-icon.trigger {
          margin-top: 1px;
          margin-left: 5px;
        }
      }
    }
  }

  //Table Body
  td {
    background-color: $datagrid-cell-bg-color;
    border-bottom: 1px solid $datagrid-cell-border-color;
    border-left: 1px solid $datagrid-cell-border-color;
    color: $datagrid-data-color;
    -webkit-font-smoothing: antialiased;
    height: inherit;
    line-height: inherit;
    min-height: inherit;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-size-adjust: none; //Prevent huge text on IOS
    white-space: nowrap;

    &:focus,
    &.is-focused {
      box-shadow: $datagrid-cell-focus-box-shadow;
      outline: 1px solid $datagrid-cell-focus-border-color;
      outline-offset: -1px;
      transform: scale(1);

      &.datagrid-trigger-cell .datagrid-cell-wrapper {
        span.trigger {
          &:not(.colorpicker-container) {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    // Make all content fit in singleline
    .is-singleline {
      * {
        display: inline;
      }

      br {
        display: none;
      }
    }

    // For column spanning
    &.is-spanned-hidden {
      display: none;
    }

    &.is-spanned-last {
      border-right-color: transparent;
    }

    &.is-spanned-invisible {
      .datagrid-cell-wrapper {
        visibility: hidden;
      }
    }

    .word-wrap {
      word-wrap: break-word;

      .hyperlink {
        display: inline;
        white-space: pre-line;

        &:hover {
          display: inline;
        }

        &:focus {
          border-bottom: 1px solid $hyperlink-hover-color !important;

          &::after {
            border-color: transparent;
          }
        }
      }

      .micro-text {
        display: block;
        margin-bottom: 6px;
        margin-top: 5px;
      }
    }

    .chart-completion-target {
      height: 26px;
      border-radius: 2px;
      position: relative;
      vertical-align: middle;
      white-space: nowrap;
      top: 3px;

      .chart-targeted-text {
        color: $ids-color-palette-white;
      }
    }

    .spinbox-wrapper {
      margin-bottom: 0;
      margin-top: 5px;
      vertical-align: top;
    }

    // Validation Cell Styles
    .datagrid-cell-wrapper {
      input + .icon-error {
        margin-inline-start: -25px;
        margin-inline-end: 7px;
        top: auto;
      }
    }

    &.error {
      background-color: $alert-bg-error;

      &.has-inline-editor {
        .datagrid-cell-wrapper {
          .icon-error {
            left: unset;
          }
        }
      }

      .datagrid-cell-wrapper {
        position: relative;

        .icon {
          @include trigger-icon-background(transparent);
        }

        .icon-error {
          background-color: transparent;
          box-shadow: none;
          left: 100%;
          margin-left: -30px;
          position: absolute;
          top: 15px;
          visibility: visible;
        }

        .trigger {
          + .icon-search-list + .icon-error {
            left: 94%;
          }

          + .icon-calendar + .icon-error {
            left: 98%;
            margin-top: 0;
          }

          + .icon-clock + .icon-error {
            margin-top: 1px;
            left: 95%;
          }
        }
      }

      &:focus .datagrid-cell-wrapper {
        border-color: $ids-color-status-danger;
      }

      &.l-right-text {
        .datagrid-cell-wrapper .icon-error {
          left: 0;
          margin-left: 10px;
          margin-right: -15px;
        }
      }
    }

    &.alert {
      background-color: $alert-bg-alert;

      .datagrid-cell-wrapper {
        position: relative;

        .icon {
          @include trigger-icon-background(transparent);
        }

        .icon-alert {
          left: 100%;
          margin-left: -30px;
          position: absolute;
          top: 15px;
          visibility: visible;
        }
      }

      &:focus .datagrid-cell-wrapper {
        border-color: $ids-color-status-warning;
      }

      &.l-right-text {
        .datagrid-cell-wrapper .icon-alert {
          left: 0;
          margin-left: 0;
          margin-right: -15px;
        }
      }
    }

    &.success {
      background-color: $alert-bg-success;

      .datagrid-cell-wrapper {
        position: relative;

        .icon {
          @include trigger-icon-background(transparent);
        }

        .icon-success {
          left: 100%;
          margin-left: -30px;
          position: absolute;
          top: 15px;
          visibility: visible;
        }
      }

      &:focus .datagrid-cell-wrapper {
        border-color: $ids-color-status-success;
      }

      &.l-right-text {
        .datagrid-cell-wrapper .icon-success {
          left: 0;
          margin-left: 0;
          margin-right: -15px;
        }
      }
    }

    &.info {
      background-color: $alert-bg-info;

      .datagrid-cell-wrapper {
        position: relative;

        .icon {
          @include trigger-icon-background(transparent);
        }

        .icon-info {
          left: 100%;
          margin-left: -30px;
          position: absolute;
          top: 15px;
          visibility: visible;
        }
      }

      &:focus .datagrid-cell-wrapper {
        border-color: $ids-color-status-base;
      }

      &.l-right-text {
        .datagrid-cell-wrapper .icon-info {
          left: 0;
          margin-left: 0;
          margin-right: -15px;
        }
      }
    }

    &.is-hidden {
      display: none;
    }

    .hyperlink {
      color: $hyperlink-color !important;
      display: inline-block;
      font-size: $ids-size-font-base;
      top: 2px;

      &:hover {
        color: $hyperlink-hover-color;
      }

      &:focus {
        outline: none;
      }

      &.micro-text {
        font-size: $ids-size-font-sm;
      }

      &[disabled] {
        color: $hyperlink-disabled-color;
        pointer-events: none;
      }
    }

    //Keyword Search Results
    .search-mode {
      i {
        font-style: normal;
        font-weight: $ids-number-font-weight-bold;
      }
    }

    //Readonly
    &.is-readonly {
      background-color: $datagrid-cell-readonly-bg-color;

      .datagrid-checkbox {
        cursor: default;

        &::before {
          @include checkbox-unchecked-disabled-before-style;
        }

        &.is-checked {
          &::before {
            @include checkbox-checked-disabled-before-style;
          }

          &::after {
            @include checkbox-checked-disabled-after-style;
          }
        }
      }

      .datagrid-cell-wrapper:has(span.is-readonly) {
        display: flex;
        align-items: center;
      }
    }

    //Cell Contents but not outer cell is readonly
    &.is-cell-readonly {
      .hyperlink {
        color: $hyperlink-disabled-color;

        &:hover,
        &:focus {
          border-bottom: 0;
          outline: none;
        }
      }
    }

    // Cell Editing
    &.is-editing {
      background-color: $datagrid-cell-editing-bg-color;
      position: relative;
      box-shadow: $datagrid-cell-focus-box-shadow;
      outline: 1px solid $datagrid-cell-focus-border-color;
      outline-offset: -1px;

      &.has-singlecolumn {
        display: block;
        min-height: $datagrid-row-height + 7;
      }

      .lookup-wrapper {
        margin-bottom: 0;
        padding-left: 0;
        padding-top: 8px;
        vertical-align: top;
        width: 100%;

        .lookup.is-not-editable {
          + .trigger {
            margin-left: -5px;
          }

          &:focus {
            box-shadow: none;
          }
        }
      }

      .checkbox-label::before {
        left: 50%;
        margin-left: -8px;
        margin-top: 4px;
        top: 50%;
      }

      .checkbox-label::after {
        left: 9px;
      }

      &.has-singlecolumn {
        .checkbox-label::after {
          left: 7px;
          top: 20px;
        }
      }

      &.is-fileupload {
        label {
          margin-bottom: 0;
        }
      }

      // Normal Input
      input {
        border: 1px solid transparent;
        outline: none;
        padding: 0;
        vertical-align: middle;
        width: 100%;

        &.spinbox{
          border: none;
        }

        &.lookup {
          margin-left: -1px;
          padding-bottom: 8px;
          padding-right: 20px;

          + .trigger {
            margin-left: -15px;
            margin-top: 9px;

            > .icon {
              top: 0;
            }

            &:hover > .icon {
              background-color: transparent;
              box-shadow: none;
            }
          }

          &.align-text-right {
            width: 100%;
          }

          &.is-not-editable {
            border-color: transparent;
          }
        }

        &.timepicker {
          width: calc(100% - 15px);

          + .btn-icon.trigger {
            margin-left: -2px;
            margin-top: 9px;
          }

          + .trigger {
            margin-left: -5px;
            margin-top: 13px;

            .icon {
              top: -1px;
            }
          }

          ~ .icon {
            left: auto;
            margin-left: -4px;
            top: calc(50% - 17px);
          }
        }

        &.fileupload-background-transparent {
          background-color: transparent;
        }

        &.fileupload {
          ~ .trigger,
          ~ .trigger-close {
            cursor: pointer;
            display: inline-block;
            margin-left: -36px;
            outline: 0;
            text-align: center;
            width: 36px;

            &.trigger-close {
              display: none;
              margin-left: -50px;
            }

            .icon {
              height: 16px;
              left: 1px;
              top: 7px;
              vertical-align: baseline;
              width: 16px;
            }
          }
        }

        &.fileupload[type='file'] {
          left: -10000px;
          position: fixed;
        }

        &.fileupload[type='text'] {
          padding-right: 56px;
          text-overflow: ellipsis;
        }

        &:focus {
          box-shadow: none !important;
          outline: none;

          &.is-not-editable {
            border-color: transparent;
          }
        }
      }

      // Drop Down
      .dropdown {
        border: medium none;
        height: inherit;
        line-height: normal;
        padding: 4px 30px 5px 16px;
        width: 100%;

        &:focus {
          box-shadow: none;
        }

        + .icon {
          top: 5px;
        }
      }

      .dropdown-wrapper {
        margin-top: 4px;
      }

      // Text Area
      textarea {
        border: 0;
        height: inherit;
        margin-bottom: -17px;
        width: 100%;

        &:focus {
          box-shadow: none;
          outline: none;
        }
      }

      .datagrid-textarea-cell-wrapper {
        padding: 0;
        position: inherit;
      }

      .icon {
        left: auto;
        top: 5px;
        visibility: visible;

        &.icon-fileupload {
          left: 5px;
          top: -0.5px;
        }

        &.icon-close {
          top: 4px;
          margin-right: -3px;
          margin-left: 10px;
        }

        &.icon-clock {
          left: 2px;
        }
      }

      .colorpicker-container .icon {
        left: 3px;
      }

      // Date Picker
      .datepicker {
        border: 0;
        width: calc(100% - 27px);

        + .trigger {
          margin-left: -1px;
          margin-top: 13px;

          .icon {
            top: 1px;
          }
        }

        + .btn-icon.trigger {
          margin-left: 13px;
          margin-top: 9px;
        }

        &:disabled .icon {
          color: $ids-color-palette-slate-50;
        }
      }

      .spinbox-wrapper {
        margin-left: -21px;
        margin-top: -6px;
        width: 100%;

        &.is-focused {
          box-shadow: none;
        }

        input {
          padding: 13px 0 8px;
          width: calc(100% - 38px);
        }

        .spinbox-control {
          border: 0;
          border-right: 1px solid $input-color-focus-border;
          padding: 19px 10px 36px;
          width: 36px;

          &.up {
            border-left: 1px solid $input-color-focus-border;
          }
        }
      }
    }

    .datagrid-cell-wrapper {
      .is-placeholder {
        color: $input-placeholder-color;
      }
    }

    //Editing Inline - Dropdown
    .is-inline {
      &.dropdown-wrapper {
        margin-bottom: 0;

        .dropdown {
          margin-top: -2px;
          max-height: 36px;
        }

        span {
          padding-top: 1px;
          vertical-align: top;
        }

        .icon {
          left: calc(100% - 22px);
          top: 6px;
        }
      }
    }

    &.l-right-text {
      .datagrid-cell-wrapper {
        text-align: right;
        justify-content: flex-end;

        &:has(.icon):has(.trigger) {
          display: flex;
          align-items: center;

          .icon-info {
            position: relative;
            inset-block-start: 1px;
            inset-inline-start: -2px;
          }
        }

        &:has(.datagrid-alert-icon) {
          display: flex;
          align-items: center;
 
          .datagrid-alert-text {
            width: 100%;
            margin: 0;
          }
        }

        .lookup-wrapper {
          padding-right: 30px;
        }
      }
    }

    &.l-center-text {
      .datagrid-cell-wrapper {
        text-align: center;
        justify-content: center;

        &:has(.icon):has(.trigger) {
          display: flex;
          align-items: center;

          .icon-info {
            position: relative;
            inset-block-start: 1px;
            inset-inline-start: -2px;
          }
        }

        span.trigger {
           text-align: center;
        } 
      }

      .dropdown-trigger {
        text-align: center;
        justify-content: center;
      }
    }

    &.l-right-text {
      .datagrid-cell-wrapper {
        text-align: right;
        justify-content: right;

        span.trigger {
           text-align: right;
        } 
      }

      .dropdown-trigger {
        text-align: right;
        justify-content: right;
      }
    }

    &.l-image-text {
      .datagrid-cell-wrapper {
        padding: 0 0 0 15px;
        text-align: center;
      }
    }

    &.text-ellipsis:not(.is-editing) {
      .datagrid-cell-wrapper {
        .datagrid-text-content {
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .hyperlink {
          display: inline;
        }
      }

      .datagrid-cell-wrapper:has(.datagrid-expand-btn),
      .datagrid-cell-wrapper:has(.datagrid-tree-node) {
        display: flex;
        align-items: center;

        .datagrid-expand-btn + span,
        .datagrid-tree-node {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      &.is-tag .datagrid-cell-wrapper {
        text-overflow: initial;
        left: -2px;
      }

      &:not(.has-editor) {
        .trigger + .icon {
          display: none;
        }

        .trigger + .icon-ellipsis{
          visibility: visible;
          display: inline-block;
          top: 0;
        }

        &.datagrid-trigger-cell .trigger {
          width: auto;

          &.text-ellipsis:has(+ .icon-ellipsis) {
            padding-inline-end: 3px;
          }
        }

        .trigger:not(.icon-ellipsis) {
          width: calc(100% - 13px);
          padding-inline-end: 20px;
        }
      }

      &.l-center-text:not(.has-editor) .trigger:not(.icon-ellipsis) {
        width: 100%;
        padding-inline-end: 0;
      }

      &.l-right-text:not(.has-editor) .trigger:not(.icon-ellipsis) {
        width: 100%;
        padding-inline-end: 0;
      }

      // Expandable Cells
      &.is-active {
        cursor: default;
        line-height: 22px;
        white-space: normal;

        .datagrid-cell-wrapper {
          padding: 16px 17px;
          white-space: pre-wrap;
        }
      }
    }

    span {
      &.exclamation {
        line-height: 44px;
      }
    }

    &.is-dirty-cell:not(.rowstatus-cell) {
      position: relative;

      &::before {
        @include css3(border-radius, 2px 0 0);

        border-color: $dirty-icon-fill transparent transparent $dirty-icon-fill;
        border-style: solid;
        border-width: 4px;
        content: '';
        display: inline-block;
        height: 0;
        left: 2px;
        margin: 3px 0 0 1px;
        position: absolute;
        z-index: 1;
        top: 0;
        width: 0;
      }
    }

    &.is-dirty-cell,
    &.has-editor.error {
      .icon-rowstatus {
        display: none;
      }
    }
  }

  // Nested Grids
  .datagrid {
    .datagrid-header th {
      background-color: $datagrid-nested-header-bg-color;
      border-left: 1px solid $datagrid-nested-header-border-color;
      z-index: 1;
    }
  }

  .datagrid-container:not(.has-filterable-columns) .datagrid-filter-wrapper {
    height: 0;
    margin: 0;
  }

  &.small-rowheight {
    td .datagrid-checkbox-wrapper {
      margin-top: -14px;
    }
  }
}

html[class*='theme-classic-'] .datagrid{
  &.medium-rowheight{
    tbody tr td.is-editing{
      .spinbox-control{
        height: 40px;
      }
    }
  }

  &.small-rowheight{
    tbody tr td.is-editing {
      .spinbox-control {
        &.up{
          padding: 10px !important;
          inset-inline-end: 7px;
        }

        &.down{
          padding: 9px;
          inset-inline-start: 5px;
        }
      }
    }
  }

  &.extra-small-rowheight{
    tbody tr td.is-editing{
      .spinbox-control{
        &.up{
          padding: 11px 9px;
          inset-inline-end: 12px;
        }

        &.down{
          padding: 10px;
          inset-inline-start: 10px;
        }
      }
    }
  }
}

html[class*='theme-classic-'] .datagrid {
  tbody tr td.text-ellipsis .row-btn {
    top: 0;
  }
}

html[class*='theme-classic-'] .datagrid-container {
  &.small-rowheight .datagrid-header .datagrid-column-wrapper:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 5px;
  }

  &.medium-rowheight .datagrid-header .datagrid-column-wrapper.formatter-dropdown:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 1px;
  }

  &.small-rowheight .datagrid-header .datagrid-column-wrapper.formatter-dropdown:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 8px;
  }

  &.extra-small-rowheight .datagrid-header .datagrid-column-wrapper.formatter-dropdown:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 4px;
  }
}


// Small Drilldown
.datagrid.small-rowheight tbody tr td {
  .datagrid-drilldown {
    top: -2px;
  }

  .hyperlink {
    top: -3px;
  }

  .chart-completion-target {
    top: 5px;
  }
}

// Grid Headers
.datagrid-header {
  background-color: $datagrid-header-bg-color;
  overflow: hidden;

  &.left {
    flex-shrink: 0;
  }

  &.right {
    flex-shrink: 0;

    th {
      border-left: 1px solid $datagrid-header-border-color;
    }
  }

  &.center,
  &.left {
    th:first-child,
    th.is-hidden:first-child + th {
      border-inline-start: 0;
    }
  }

  table {
    border-collapse: separate;
    border-spacing: 0;
    empty-cells: show;
    table-layout: fixed;
    width: 100%;
  }

  // Table Headers
  th {
    background-clip: padding-box;
    background-color: $datagrid-header-bg-color;
    border-left: 1px solid $datagrid-header-border-color;
    border-bottom: 1px solid $datagrid-border-color;
    height: $datagrid-header-height;
    overflow: hidden;
    position: sticky;
    text-align: left;
    top: 0;
    z-index: 2;

    &.text-ellipsis {
      .datagrid-column-wrapper {
        display: flex;
        float: none;
        padding: 0 0 0 16px;

        .datagrid-header-text {
          display: inline-block;
          margin: 7px 0 0 1px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &.l-center-text,
        &.l-right-text {
          padding: 0 16px;

          .datagrid-header-text {
            margin-top: 8px;
          }
        }
      }
    }

    &.l-center-text {
      .datagrid-header-text {
        text-align: center;
        justify-content: center;
        width: 100%;
      }

      .datagrid-filter-wrapper .btn-filter.btn-filter-checkbox {
        left: calc(50% - 5px) !important;
        text-align: center;

        @media (max-width: $breakpoint-slim) {
          left: calc(50% - 13px) !important;
        }
      }
    }

    &.is-hidden {
      display: none;
    }

    .datagrid-header-text {
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
      user-select: text;
      color: $datagrid-header-color;
      direction: ltr;
      display: table-cell;
      font-size: $ids-size-font-sm;
      font-weight: $ids-number-font-weight-bold;
      text-align: left;
      vertical-align: middle;
      white-space: nowrap;

      &.required::after {
        @include required-indicator();

        padding-inline-start: 3px;
        position: static;
        color: $datagrid-required-icon-color;
      }
    }

    .icon.datagrid-header-icon {
      color: $datagrid-header-color;
      margin-left: 3px;
      min-width: 18px;
      top: -2px;
      transform: translateY(50%);
    }

    // Checkboxes
    .datagrid-checkbox {
      &::before {
        border: 1px solid $datagrid-header-checkbox-border-color;
      }

      &.is-checked::before {
        border: 1px solid $checkbox-color-unchecked-initial-border;
      }
    }

    .datagrid-checkbox-wrapper {
      align-items: center;
      display: flex;
      flex-direction: column;
      height: inherit;
      justify-content: center;
      margin-top: auto;
      top: auto;

      .datagrid-checkbox {
        height: 16px;
      }
    }

    &.is-active {
      background-color: $datagrid-header-active-color;
    }

    // Editing and Focus State
    &:focus {
      color: $datagrid-header-color;
      outline: 1px solid $datagrid-cell-focus-border-color;
      box-shadow: $datagrid-cell-focus-box-shadow;
      outline-offset: -2px;

      .icon {
        color: $datagrid-sort-icon-color;
        opacity: 1;
      }

      &.is-sorted-asc .sort-asc .icon,
      &.is-sorted-desc .sort-desc .icon {
        color: $datagrid-sort-icon-sorted-color;
      }
    }

    &.is-sortable {
      cursor: pointer;

      &:hover {
        background-color: $datagrid-header-hover-color;

        .icon {
          opacity: 1;
        }
      }
    }
  }

  // Grouped Headers
  thead tr + tr th {
    border-top: 1px solid $datagrid-header-border-color;
  }

  .datagrid-header-groups {
    th {
      background-color: $datagrid-header-bg-color;

      &.l-left-text {
        .datagrid-column-wrapper {
          width: 100%;
        }

        .datagrid-header-text {
          text-align: left;
        }
      }

      &.l-center-text {
        .datagrid-column-wrapper {
          width: 100%;
        }

        .datagrid-header-text {
          text-align: center;
          justify-content: center;
        }
      }

      &.l-right-text {
        .datagrid-column-wrapper {
          width: 100%;
        }

        .datagrid-header-text {
          text-align: right;
        }
      }
    }
  }

  // Column Resize
  .datagrid-column-wrapper {
    display: table;
    height: 33px;
    padding: 0 12px;
    position: relative;
    vertical-align: top;

    &.l-right-text {
      direction: rtl;
      float: right;
      padding: 0 12px;
      position: relative;

      .sort-indicator {
        padding-right: 0;
      }
    }
  }

  // Datagrid filterrow
  .is-filterable {
    .datagrid-column-wrapper {
      &.l-right-text {
        + .datagrid-filter-wrapper {
          clear: both;

          input,
          .btn-filter {
            top: 2px;
          }
        }
      }
    }
  }

  .datagrid-filter-wrapper {
    display: block;
    height: 0;
    line-height: 30px;
    margin-bottom: 0;
    max-width: calc(100% - 20px);
    min-width: 70px;
    position: relative;
    top: -5px;
    width: calc(100% - 20px);

    &.is-empty {
      &.l-right-text {
        direction: rtl;
        float: right;
      }
    }

    input {
      background-color: transparent;
      border-color: $datagrid-filter-border-color;
      color: $datagrid-filter-color;
      height: 24px;
      left: 9px;
      padding: 5px;
      position: relative;
      vertical-align: top;
      width: calc(100% - 45px);

      &.lookup.is-number-mask {
        text-align: left;
      }

      &.timepicker,
      &.datepicker {
        padding: 1px 24px 2px 5px;
      }

      &.lookup.is-not-editable {
        color: $datagrid-filter-color;
      }

      &.error {
        color: $datagrid-filter-color !important;
      }

      &:focus {
        border-color: $datagrid-filter-focus-color;
      }

      &:hover:not(:disabled):not(:focus) {
        border-color: $datagrid-filter-hover-border-color;
      }

      &:disabled {
        border-color: $datagrid-filter-disabled-color !important;
      }
    }

    [data-mask-mode='number'] {
      padding: 3px 7px 2px 3px;
    }

    .dropdown {
      background-color: transparent;
      color: $datagrid-filter-color;
      height: 24px;
      line-height: 21px;
      padding: 3px 0 0 5px;
      vertical-align: top;
      width: calc(100% - 13px);

      &:hover {
        border-color: $datagrid-filter-hover-border-color !important;

        + .icon {
          color: $datagrid-filter-hover-color !important;
        }
      }

      &div:hover:not(:disabled) {
        border-color: $datagrid-filter-hover-border-color !important;
      }

      &.is-disabled {
        border-color: $datagrid-filter-disabled-color !important;

        + .icon {
          background-color: transparent;
          color: $datagrid-filter-disabled-color;
        }
      }

      > span {
        color: inherit;
        width: calc(100% - 16px);
        padding: unset;
        line-height: normal;
      }
    }

    .dropdown-wrapper {
      background-color: transparent;
      display: inline;
      left: 16px;
      margin-bottom: 0;

      .icon {
        height: 16px;
        vertical-align: top;
        width: 16px;

        + .icon { // Dup icon?
          display: none;
        }
      }

      div.dropdown:not(.is-disabled) {
        border: 1px solid $datagrid-filter-border-color;

        &:hover {
          border: 1px solid $datagrid-filter-hover-border-color;
        }
      }
    }

    .dropdown {
      + .icon {
        color: $datagrid-filter-icon-color;
        height: 13px;
        right: 4px;
        top: -0.6px;
        width: 13px;
      }

      &:not(:disabled) + .icon:hover,
      &:hover:not(:disabled) + .icon {
        color: $datagrid-filter-hover-color !important;
      }

      &:disabled + .icon {
        color: $datagrid-list-filter-disabled-color !important;
        opacity: 0.6;
      }
    }

    .timepicker,
    .datepicker {
      + .trigger {
        inset-block-start: 0;
        height: 20px;
        margin-left: -13px;
        margin-top: 3px;
        min-height: 20px;
        min-width: 20px;
        width: 20px;

        .icon {
          color: $datagrid-filter-icon-color;
          height: 16px;
          position: absolute;
          right: 2px;
          top: 2px;
          width: 16px;
        }
      }

      &:not(:disabled) + .trigger:hover,
      &:hover:not(:disabled) + .trigger {
        .icon {
          color: $datagrid-filter-hover-color !important;
        }
      }

      &:disabled + .trigger {
        background-color: transparent !important;
        color: $timepicker-disabled-icon-color;
        cursor: default;

        .icon {
          color: $datagrid-list-filter-disabled-color !important;
          opacity: 0.6;
        }
      }
    }

    .timepicker + .trigger {
      margin-top: 4px;
    }

    .datepicker + .trigger .icon {
      height: 14px;
      width: 15px;
    }

    .lookup-wrapper {
      background-color: transparent;
      display: inline-block;
      left: 0;
      vertical-align: top;
      width: calc(100% - 44px);

      input.lookup {
        background-color: transparent;
        left: 10px;
        padding-right: 20px;
        width: 100%;

        &:not(:disabled) + .trigger > .icon:hover,
        &:hover:not(:disabled) + .trigger > .icon {
          color: $datagrid-filter-hover-color;
        }

        &:disabled + .trigger > .icon {
          color: $datagrid-list-filter-disabled-color;
          opacity: 0.6;
        }
      }

      .searchfield-wrapper.has-close-icon-button {
        box-shadow: none;
        display: inline;
        width: inherit;

        .icon {
          color: $datagrid-filter-icon-color;
          right: 11px;
          margin-top: -3px;
          top: 5px;
          
          &.close {
            top: 10px;
          }

          &:hover {
            color: $datagrid-filter-hover-color;
          }
        }
      }

      .trigger {
        height: 18px;
        margin-top: 3px;
        min-height: 18px;
        min-width: 18px;
        line-height: 1;
        inset-inline-end: -8px;
        width: 18px;

        &:hover {
          background-color: transparent !important;
        }

        &:hover .icon {
          color: $datagrid-filter-hover-color;
        }

        .icon {
          color: $datagrid-filter-icon-color;
          height: 16px;
          position: relative;
          right: 1px;
          top: -1px;
          width: 16px;
        }
      }
    }

    .btn-filter {
      border-radius: 4px;
      height: 24px;
      left: 12px;
      min-height: 0;
      min-width: 34px;
      padding-top: 5px;
      top: 0;
      vertical-align: top;
      width: 36px;

      &:disabled {
        &:not(.single) {
          opacity: $datagrid-filter-disabled-opacity;
        }

        .icon {
          color: $datagrid-filter-disabled-color;
        }
      }

      &:hover {
        background-color: transparent !important;
      }

      .icon-dropdown {
        color: $datagrid-filter-icon-color !important;
        height: 18px;
        left: -7px;
        margin-top: -5px;
        position: relative;
        top: 2px;
        vertical-align: top;
        width: 18px;

        + .icon-dropdown {
          left: -8px;
          width: 16px;
        }
      }

      &.is-open .icon {
        color: $datagrid-filter-active-color !important;
      }

      &:hover:not(.is-open):not(:disabled) {
        .icon {
          color: $datagrid-filter-hover-color !important;
        }
      }

      &:focus:not(.hide-focus) {
        border: 1px solid $datagrid-filter-focus-color;
        box-shadow: 0 0 0 2px transparent,
          0 0 0 0 $datagrid-filter-focus-color,
          0 0 4px 3px rgba(54, 138, 192, 0.1);

        .icon {
          color: $datagrid-filter-focus-color !important;
        }
      }

      &.single {
        .icon-dropdown + .icon-dropdown {
          display: none;
        }
      }
    }
  }
}

// Grouped Headers
.datagrid-rowgroup-header {
  // Animating while closing
  &.is-animating {
    opacity: 0.2;
  }

  td {
    background-color: $datagrid-rowgroup-header;
    border: 1px solid transparent;
    border-bottom: 1px solid $datagrid-group-row-border-color;
    border-right: 1px solid $datagrid-cell-border-color;
    padding: 0 17px;
    -webkit-text-size-adjust: none; //Prevent huge text on IOS

    &:focus,
    &.is-focused {
      border: 1px solid $ids-color-brand-primary-base;
      box-shadow: $focus-box-shadow;
    }

    span {
      color: $datagrid-rowgroup-color;
      font-weight: $ids-number-font-weight-bold;
      vertical-align: middle;
    }

    .icon {
      color: $datagrid-rowgroup-color;
    }

    .datagrid-reorder-icon {
      display: inline-block;
      margin-right: 15px;
    }
  }

  .datagrid-expand-btn {
    left: -8px;
    margin-right: 8px;
    margin-top: 0;

    .icon.plus-minus {
      inset-inline-start: -6.15px;
    }

    .icon.plus-minus::before,
    .icon.plus-minus::after {
      left: 8px;
    }
  }
}

// Sorting
.sort-indicator {
  display: inline-block;
  margin-inline-start: 3px;
  margin-inline-end: 3px;
  margin-block-start: 3px;
  vertical-align: top;

  .icon {
    @include transition(all 250ms ease);

    color: $datagrid-list-sort-icon-hover-color;
    height: 18px;
    opacity: 0;
    width: 18px;
  }

  .sort-asc > .icon {
    @include css3(transform, rotate(180deg));
  }

  span {
    display: block;
    height: 9px;
  }
}

// Centered Columns
.datagrid-column-wrapper.l-center-text {
  width: 100%;

  .sort-indicator {
    margin: -3px -23px 0 4px;
  }
}

// Sort indicators
.is-sorted-asc {
  .sort-indicator .icon {
    opacity: 1;
  }

  .sort-asc .icon {
    color: $datagrid-sort-icon-color;
  }
}

.is-sorted-desc {
  .sort-indicator .icon {
    opacity: 1;
  }

  .sort-desc .icon {
    color: $datagrid-sort-icon-color;
  }
}

.theme-classic-contrast,
.theme-classic-dark {
  .sort-indicator .icon {
    color: $datagrid-sort-icon-color;
  }

  .is-sorted-asc .sort-asc .icon {
    color: $datagrid-sort-icon-sorted-color;
  }

  .is-sorted-desc .sort-desc .icon {
    color: $datagrid-sort-icon-sorted-color;
  }
}

// Cell Template Styling
.datagrid-row-heading {
  @include font-size(16);
  @include ellipsis();

  color: $datagrid-cell-color;
  line-height: 22px;
  padding-top: 6px;
}

.datagrid-row-subheading {
  color: $datagrid-cell-color;
  font-size: $ids-size-font-base;
  line-height: 22px;
  margin-top: -4px;
}

.datagrid-row-micro {
  color: $datagrid-cell-color;
  font-size: $ids-size-font-sm;
  line-height: 2rem;
}

.datagrid-drilldown {
  background-color: transparent;
  border-radius: 50%;
  margin: 0 auto;
  top: 1px;

  .icon {
    color: $font-color-highcontrast;
  }
}

td .btn-actions {
  background-color: transparent;
  top: 1px;
}

.datagrid-multiline-text {
  display: block;
  height: inherit;
  line-height: 22px;
  margin: 0 -20px;
  min-height: $datagrid-row-height - 1;
  overflow: auto;
  padding: 10px 20px;
  white-space: pre-line;
  word-wrap: break-word;
}

.medium-rowheight {
  .datagrid-multiline-text {
    min-height: $datagrid-medium-row-height;
    padding: 5px 20px;
  }

  &.has-filterable-columns .datagrid-header th .datagrid-checkbox-wrapper .datagrid-checkbox {
    top: 14px;
  }

  .datagrid-trigger-cell span.trigger.is-clearable:not(.colorpicker-container) {
    margin-top: 0;
  }
}

.small-rowheight,
.extra-small-rowheight {
  .datagrid-multiline-text {
    min-height: $datagrid-small-row-height;
    padding: 2px 20px;
  }

  &.has-filterable-columns .datagrid-header th .datagrid-checkbox-wrapper .datagrid-checkbox {
    top: 14px;
  }
}

.datagrid-radio {
  cursor: pointer;
  display: inline-block;
  font-size: $ids-size-font-sm;
  left: -9px;
  position: relative;

  &::before {
    @include radio-unchecked-before-style;

    margin-top: 1px;
    margin-left: unset;
  }

  &.is-checked::before {
    @include radio-checked-before-style;
  }

  &.is-checked::after {
    @include radio-checked-after-style;

    top: 1px;
    left: 0;
  }
}

// Grid Checkboxes
.datagrid-checkbox-wrapper {
  margin-top: -10px;
  top: -50%;

  .datagrid-checkbox::before {
    top: 0;
  }
}

.datagrid-checkbox {
  cursor: pointer;
  display: inline-block;
  font-size: $ids-size-font-sm;
  left: -9px;
  position: relative;

  &::before {
    @include checkbox-unchecked-before-style;

    margin-left: 0;
    top: -4px;
  }

  &.is-checked::before {
    @include checkbox-checked-before-style;
  }

  &:focus::before {
    border: solid 1px $ids-color-palette-azure-40 !important;
    box-shadow: 0 0 4px 3px rgba(105, 181, 221, 0.3);
  }

  &.is-checked::after {
    @include checkbox-checked-after-style;
    @include css3(transform-origin, -11px top 0);
    @include checkbox-animation;

    left: 5px;
    margin-top: 0;
    top: 1px;
  }

  &.is-checked.no-animate::after {
    animation: none;
  }

  &.is-partial {
    @include no-animation();
  }

  &.is-partial::after {
    @include checkbox-partial-after-style;
    @include no-animation();

    margin-left: -2px;
    margin-top: -4px;
  }

  .datagrid-checkbox {
    cursor: pointer;
    display: inline-block;
    font-size: 1.6rem;
    left: -7px;
    position: relative;
    top: -14px;
  }

  &.datagrid-selection-checkbox.disabled {
    cursor: default;

    &::before {
      background-color: $checkbox-color-unchecked-disabled-background;
      border-color: $checkbox-color-unchecked-disabled-border;
    }
  }
}

.datagrid > tbody > tr.datagrid-row {
  &.is-selected.is-hover-row:not(.hide-selected-color) {
    td:not(.is-editing),
    td:not(.is-editing) .datagrid-cell-wrapper {
      background-image: linear-gradient($datagrid-row-hover-color, $datagrid-row-hover-color);
    }

    td .datagrid-cell-wrapper {
      .btn-icon:hover {
        background-color: $datagrid-button-icon-hover-bg-color !important;

        svg {
          background: unset !important;
          box-shadow: none !important;
        }
      }
    }
  }
}

[aria-readonly='true'] {
  .datagrid-checkbox {
    cursor: default;
  }
}

// Datagrid Dropdown Formatter
.datagrid-trigger-cell {
  &:not(.is-readonly) {
    cursor: pointer;
  }

  &:focus {
    .datagrid-cell-wrapper span {
      vertical-align: middle;
    }
  }

  &.text-ellipsis {
    .datagrid-cell-wrapper {
      overflow: visible;
    }

    &.datagrid-no-default-formatter .datagrid-cell-wrapper {
      overflow: hidden;
    }

    &.has-editor {
      &.is-editing span.trigger {
        padding: 8px 0 0 5px;
      }

      span.trigger {
        padding-bottom: 5px;
      }

      .icon-search-list {
        top: -1px;
      }
    }

    span.trigger {
      line-height: normal;
      overflow: hidden;
      padding-right: 4px;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
  }

  .align-text-right {
    + .icon.icon-search-list {
      left: 0;
    }
  }

  .icon:not(.datagrid-alert-icon) {
    color: $trigger-icon-fill-color;
    left: 3px;
    top: 4px;
    visibility: hidden;

    &:not(.icon-rowstatus) {
        @include trigger-icon-background($datagrid-cell-bg-color);
    }

    &.datagrid-alert-icon {
      visibility: visible;
    }

    &.icon-search-list {
      inset-inline-start: 0;
      inset-block-start: 0;
    }

    &.icon-clock {
      top: -2px;
      left: 1px;
    }

    &.icon-fileupload {
      left: 5px;
      top: -0.5px;
    }
  }

  .icon-close {
    height: 12px !important;
    margin-top: -8px;
    margin-left: -25px;
  }

  .icon-clock {
    left: -1px;
  }

  .dropdown-trigger {
    + .icon:not(.icon-calendar) {
      top: -2px;
      left: -1.5px;
    }
  }

  .icon.icon-calendar {
    height: 18px;
    left: 2px;
    top: -1px;
    width: 18px;
  }

  .icon-fileupload {
    height: 16px;
    left: 5px;
    top: -0.5px;
    width: 16px;
  }

  .colorpicker-container span.trigger {
    width: 20px;
    left: 10%;

    .icon {
      top: -1px;
      visibility: hidden;
    }
  }

  span.trigger {
    color: $datagrid-cell-color;
    display: inline-block;
    text-align: left;
    width: calc(100% - 13px);

    &.is-clearable,
    &.dropdown-trigger {
      &:not(.colorpicker-container) {
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        margin-left: 4px;
        margin-top: 0;
      }
    }

    &.is-clearable {
      margin-right: 22px;
      width: calc(100% - 32px);
    }
  }

  &.has-editor:not(.is-readonly) {
    .icon-error,
    .icon-info,
    .icon-alert {
      @include css3(transition, margin-left 300ms ease);
    }

    &:hover,
    &:focus {
      .icon {
        visibility: visible;
        top: 2px;
        background-color: transparent;
        box-shadow: none;
      }

      .icon-error,
      .icon-info,
      .icon-alert {
        &:not(.datagrid-alert-icon) {
          margin-left: -48px !important;
        }
      }

      &.is-fileupload .datagrid-cell-wrapper .icon.icon-error:not(.datagrid-alert-icon) {
        left: 98%;
        margin-top: 3px;
      }
    }
  }

  // Datagrid Dropdown Editor
  &.is-editing {
    padding: 0;

    .dropdown-wrapper {
      height: inherit;
      margin-bottom: 0;
      width: 100%;
    }

    .trigger.is-clearable {
      width: calc(100% - 64px);
    }
  }
}

// Change BG color of hovered Datagrid row cell icons
.is-hover-row:not(.hide-selected-color):not(.is-rowactivated) {
  .datagrid-trigger-cell {
    .icon:not(.icon-rowstatus):not(.icon-search-list):not(.icon-error) {
      @include trigger-icon-background($datagrid-row-hover-color);
    }

    &.is-editing {
      .icon {
        @include trigger-icon-background($datagrid-cell-bg-color);
      }
    }

    .datagrid-cell-wrapper .trigger {
      + .icon-calendar,
      + .icon-calendar + .icon-error {
        background-color: transparent;
        box-shadow: none;
      }
    }

    .datagrid-cell-wrapper .colorpicker-container.is-open .trigger .icon {
      background-color: transparent;
      box-shadow: none;
    }
  }
}

.datagrid-container.show-editor-icons {
  .is-hover-row:not(.hide-selected-color):not(.is-rowactivated) {
    .datagrid-trigger-cell {
      .icon:not(.icon-rowstatus):not(.icon-search-list):not(.icon-error) {
        background-color: transparent;
        box-shadow: unset;
      }
    }
  }
}

.datagrid-row {
  .datagrid-expand-btn {
    margin-top: 0;
  }
}

// Grid Expand Button
.datagrid-expand-btn {
  background-color: transparent;
  height: 28px;
  left: -8px;
  margin-top: -3px;
  min-height: 28px;
  min-width: 28px;
  vertical-align: middle;
  width: 28px;

  span:not(.icon) {
    color: transparent;
  }

  &[disabled] {
    .icon.plus-minus::before,
    .icon.plus-minus::after {
      background-color: $button-color-tertiary-initial-font;
    }
  }

  .plus-minus {
    left: -10px;
    position: relative;
    top: -6px;
  }

  + span {
    color: $datagrid-cell-color;
    margin-left: -10px;
    position: relative;
    top: 2px;
  }

  .icon.plus-minus::before,
  .icon.plus-minus::after {
    left: 12px;
    top: 14px;
    width: 14px;
  }

  &:hover:not([disabled]) {
    background-color: transparent !important;

    .icon.plus-minus::before,
    .icon.plus-minus::after {
      background-color: $button-color-tertiary-hover-text;
    }

    span {
      color: transparent;
    }
  }
}

.normal-rowheight {
  @include row-height-padding(0);
}

.medium-rowheight {
  @include row-height-padding(5px);
}

.small-rowheight {
  @include row-height-padding(10px);
}

.extra-small-rowheight {
  @include row-height-padding(15px);
}

.small-rowheight .datagrid-column-wrapper.formatter-hyperlink:not(.l-right-text) .datagrid-header-text {
  inset-inline-start: 4px;
  position: relative;
}

.extra-small-rowheight .datagrid-column-wrapper.formatter-hyperlink:not(.l-right-text) .datagrid-header-text {
  inset-inline-start: 1px;
  position: relative;
}

.datagrid-column-wrapper.formatter-defaultformatter:not(.l-right-text) .datagrid-header-text {
  inset-inline-start: 1px;
  position: relative;
}

.medium-rowheight .datagrid-column-wrapper.formatter-defaultformatter:not(.l-right-text) .datagrid-header-text {
  inset-inline-start: 1px;
  position: relative;
}

.small-rowheight .datagrid-column-wrapper.formatter-defaultformatter:not(.l-right-text) .datagrid-header-text {
  inset-inline-start: 5px;
  position: relative;
}

.extra-small-rowheight .datagrid-column-wrapper.formatter-defaultformatter:not(.l-right-text) .datagrid-header-text {
  inset-inline-start: 0;
  position: relative;
}

.medium-rowheight .datagrid-header .datagrid-column-wrapper.formatter-hyperlink .icon.datagrid-header-icon {
  top: 0;
}

.small-rowheight .datagrid-header .datagrid-column-wrapper.formatter-hyperlink .icon.datagrid-header-icon {
  top: 9px;
  left: 4px;
}

.extra-small-rowheight .datagrid-header th.text-ellipsis .datagrid-column-wrapper.formatter-hyperlink .icon.datagrid-header-icon {
  top: 6px;
}

//Grid Expandable Area
.datagrid-expandable-row {
  > td {
    border-bottom: 0;
    height: auto;
    line-height: normal;
  }

  &:not(.is-expanded) {
    display: none;
  }

  .datagrid-wrapped-text {
    display: table;
    line-height: 1.4em;
    margin-bottom: 10px;
    max-width: calc(100% - 30px);
    white-space: normal;
  }

  .datagrid-row-detail {
    border-bottom: 1px solid $datagrid-cell-border-color;
    height: 0;
    margin: -1px -20px 0;
    padding: 0 20px;
  }

  .datagrid-row-detail-padding {
    overflow: hidden;
    padding: 30px;
  }

  .datagrid-row-micro-text {
    color: $font-color-lowcontrast;
    font-size: $ids-size-font-sm;
  }

  .datagrid-cell-layout {
    display: table-cell;
    padding: 0 30px 0 0;
    vertical-align: top;
  }
}

.datagrid-result-count,
.datagrid-group-count {
  display: inline-block;
  font-size: $ids-size-font-base;
  position: relative;
  top: 0;
}

.ie-edge {
  .datagrid-rowgroup-header {
    .datagrid-expand-btn {
      .plus-minus {
        top: -7px;
        left: -5.75px;
      }
    }
  }
}

.is-firefox {
  .is-inline.dropdown-wrapper {
    .icon {
      top: 5px !important;
    }
  }

  .datagrid {
    &.medium-rowheight {
      .datagrid-trigger-cell .icon.icon-clock {
        top: 0;
      }
    }

    &.extra-small-rowheight,
    &.small-rowheight {
      .datagrid-expand-btn {
        .icon {
          top: -6px;
        }
      }
    }

    .datagrid-trigger-cell .icon.icon-clock {
      top: 0;
    }

    .datagrid-drilldown {
      top: 1px;
    }
  }

  .datagrid-expand-btn {
    line-height: 19px !important;
  }

  .datagrid-filter-wrapper .dropdown {
    padding: 1px 0 2px 5px !important;
  }

  .extra-small-rowheight {
    .datagrid-trigger-cell.text-ellipsis.has-editor span.trigger {
      padding-top: 2px;
    }
  }

  .datagrid.extra-small-rowheight tbody tr td.is-editing .lookup-wrapper {
    padding-top: 1px;
  }

  .small-rowheight,
  .extra-small-rowheight {
    .datagrid tbody tr.arrange-dragging td {
      height: $datagrid-small-header-height;
    }
  }

  .medium-rowheight {
    .datagrid tbody tr.arrange-dragging td {
      height: $datagrid-small-header-height;
    }
  }

  .datagrid {
    td.is-editing {
      .datepicker {
        ~ .icon {
          top: calc(50% - 16px);
        }
      }

      .timepicker {
        ~ .icon {
          top: calc(50% - 16px);
        }
      }
    }

    &.medium-rowheight {
      td.is-editing {
        .lookup-wrapper {
          margin-top: 0;
          padding-top: 5px;

          .lookup + .trigger {
            top: 2px;
          }

          .lookup ~ .trigger .icon {
            top: calc(50% - 9px);
          }
        }

        .datepicker {
          margin-top: 4px;

          ~ .icon {
            top: calc(50% - 15px);
          }
        }

        .timepicker {
          ~ .icon {
            top: calc(50% - 16px);
          }
        }
      }
    }

    &.small-rowheight {
      td.is-editing {
        .lookup-wrapper {
          .lookup ~ .trigger .icon {
            top: calc(50% - 10px);
          }

          .lookup + .trigger {
            margin-top: -2px;
          }
        }

        .timepicker {
          ~ .icon {
            top: calc(50% - 15px);
          }
        }
      }
    }

    &.small-rowheight {
      td.is-editing {
        .lookup-wrapper {
          .lookup+.trigger {
            margin-top: -1px;
            margin-inline-start: -20px;
          }
        }
      }
    }

    tbody tr.arrange-dragging td {
      font-size: $ids-size-font-base;
      height: $datagrid-row-height;
    }
  }

  .datagrid {
    &.small-rowheight {
      tbody tr td.is-editing {
        .datepicker {
          height: 2rem;

          + .btn-icon.trigger {
            margin-top: 0;
          }
        }

        .lookup {
          padding-top: 5px;
        }
      }
    }
  }

  .datagrid td.is-editing {
    .lookup-wrapper {
      padding-top: 6px;
    }

    .lookup {
      + .trigger {
        margin-top: 10px;
      }
    }
  }

  .modal table {
    min-width: -moz-available;
  }
}

.datagrid-row-count {
  line-height: 43px;
}

// Inline Editing - Dropdown
.datagrid-dropdown-list {
  border-radius: 0 0 3px 3px;
  margin-top: -1px;

  &.multiple {
    ul[role='listbox'] .dropdown-option {
      a {
        bottom: 1px;
        left: 12px;
        position: relative;
      }
    }

    &.medium-rowheight {
      ul[role='listbox'] .dropdown-option a {
        left: 17px;
      }
    }

    &.small-rowheight {
      ul[role='listbox'] .dropdown-option a {
        left: 22px;
      }
    }

    &.extra-small-rowheight {
      ul[role='listbox'] .dropdown-option a {
        left: 22px;
      }
    }
  }

  &.is-editing {
    margin-top: 2.5px;

    ul {
      text-indent: 20px;
    }

    &.medium-rowheight ul {
      text-indent: 15px;
    }

    &.small-rowheight ul,
    &.extra-small-rowheight ul {
      text-indent: 10px;
    }

    .is-ontop.dropdown-search {
      margin-top: 11px;

      .trigger {
        margin-top: 12px;
      }
    }
  }

  input {
    height: 49px;
    padding-top: 8px;
    text-indent: 9px;
    width: 100% !important;
    margin-inline-start: -1px;
  }

  &.small-rowheight,
  &.extra-small-rowheight {
    input {
      padding-top: 10px;
      height: 30px;
      text-indent: 0;
      width: 100% !important;
    }

    .trigger .icon {
      height: 16px;
      left: 2px !important;
      margin-top: -1px;
      top: 9px;
    }
  }

  &.extra-small-rowheight {
    input {
      font-size: $input-size-compact-font-size;
      padding: 11px 28px 11px 8px;
    }

    ul {
      font-size: $input-size-compact-font-size;
      text-indent: 6px;
    }

    .trigger .icon {
      left: 4.5px !important;
      margin-top: -2px;

      &.search {
        height: 13px;
        left: 4px !important;
        top: 1px;
      }
    }
  }

  &.medium-rowheight {
    input {
      height: 40px;
      padding-top: 8px;
      text-indent: 4px;
      width: 100% !important;
    }

    .trigger .icon {
      left: 1px;
      margin-top: 3px;
      top: 8px;
    }

    &.dropdown-list .trigger .icon {
      margin-top: 0;
    }
  }

  > .trigger .icon,
  .icon {
    color: $ids-color-font-base;
    left: 0;
    margin-top: 5px;

    &.search {
      margin-top: 7px;
    }
  }

  .trigger .icon {
    top: 11px;
    inset-inline-end: -4px;
    left: unset;
  }
}

// Inline Editing Date Picker
.is-focused .trigger + .icon {
  visibility: visible;
}

// RTL Styles
html[dir='rtl'] {
  .datagrid-container .datagrid-wrapper td:first-child {
    border-left: 1px solid $datagrid-cell-border-color;
  }

  .datagrid-dropdown-list {
    .dropdown-search {
      padding: 5px 8px 6px 32px;
    }

    &.medium-rowheight {
      .dropdown-search {
        padding: 5px 13px 6px 32px;
      }
    }

    &.small-rowheight {
      .dropdown-search {
        padding: 5px 9px 6px 32px;
      }
    }

    &.extra-small-rowheight {
      .dropdown-search {
        padding: 4px 5px 6px 32px;
      }
    }
  }

  .datagrid-drilldown {
    transform: scaleX(-1);
  }

  &[class*='theme-classic-'] .datagrid {
  // RTL Header text positioning for classic theme
    &.extra-small-rowheight .datagrid-header .datagrid-column-wrapper:not(.l-right-text) .datagrid-header-text {
      inset-inline-start: 6px;
    }

    &.small-rowheight .datagrid-header .datagrid-column-wrapper:not(.l-right-text) .datagrid-header-text {
      inset-inline-start: -2px;
    }

    .datagrid-header .datagrid-column-wrapper:not(.l-right-text) .datagrid-header-text {
      inset-inline-start: 2px;
      position: relative;
    }

    .datagrid-trigger-cell.has-editor {
      &:not(.is-readonly) {
        .datagrid-cell-wrapper {
          .trigger + .icon.icon-calendar + .icon:not(.datagrid-alert-icon).icon-error {
            left: 0;
          }
        }
      }
    }

    &.extra-small-rowheight {
      .datagrid-trigger-cell.is-editing .colorpicker-container .icon {
        inset-inline-start: 5px !important;
      }
    }
  }

  .datagrid.medium-rowheight tbody tr td .process-indicator {
    top: 8px;
  }

  .datagrid.small-rowheight tbody tr td .process-indicator {
    top: 5px;
  }

  .datagrid-radio {
    cursor: pointer;
    display: inline-block;
    font-size: $ids-size-font-sm;
    right: -9px;
    position: relative;

    &::before {
      @include radio-unchecked-before-style;
    }

    &.is-checked::before {
      @include radio-checked-before-style;
    }

    &.is-checked::after {
      @include radio-checked-after-style;

      right: 0;
    }
  }

  .datagrid-trigger-cell.has-editor {
    &:not(.is-readonly) {
      &:hover,
      &:focus {
        svg.icon + .icon-error,
        svg.icon + .icon-info,
        svg.icon + .icon-alert {
          &:not(.datagrid-alert-icon) {
            margin-left: 30px !important;
          }
        }
      }
    }
  }

  .datagrid.small-rowheight {
    .datagrid-trigger-cell {
      &.has-editor {
        &:not(.is-readonly) {
          &:hover,
          &:focus {
            svg.icon + .icon-error,
            svg.icon + .icon-info,
            svg.icon + .icon-alert {
              &:not(.datagrid-alert-icon) {
                margin-left: 26px !important;
              }
            }
          }
        }
      }

      .dropdown-trigger:not(.colorpicker-container) + .icon {
        left: 5px;
      }
    }
  }

  .datagrid {
    .is-editing .datepicker {
      + .trigger {
        &.btn-icon:hover {
          background-color: transparent;
        }

        svg {
          width: 18px;
          height: 18px;
        }
      }
    }
  }

  .datagrid.normal-rowheight {
    .is-editing .datepicker {
      + .trigger {
        left: -6px;
        top: 6px;
      }
    }
  }

  .datagrid.medium-rowheight {
    .is-editing .datepicker {
      ~ .trigger {
        left: 0;
        margin-right: 0;
      }
    }

    .is-editing.has-editor {
      .datepicker ~ .trigger {
        left: -15px;
        top: -1px;
      }
    }

    div.dropdown + .icon {
      left: -10px;
    }
  }

  .datagrid.small-rowheight {
    .datagrid-trigger-cell.has-editor {
      .icon-error {
        left: 0 !important;
      }

      &.is-editing {
        .trigger {
          padding: auto;
        }

        .colorpicker-container .icon {
          right: 10px;
        }

        .datagrid-cell-wrapper {
          padding: 1px 5px 0 !important
        }

        .dropdown {
          padding: 1px 3px 0 0 !important;
        }
      }
    }
  }

  .datagrid.extra-small-rowheight {
    .datagrid-trigger-cell {
      &.has-editor {
        .icon-error {
          left: 0 !important;
        }

        &.is-editing {
          .trigger {
            padding: auto;
          }

          .colorpicker-container .icon {
            right: 10px;
          }

          .datagrid-cell-wrapper {
            padding: 0 1px !important
          }

          .dropdown {
            padding: 0 3px !important;
          }

          .dropdown-wrapper{
            span {
              top: -4px
            }

           .icon {
            left: 3px !important;
            top: 6px !important;
          }
          }
        }
      }

      .dropdown-trigger:not(.colorpicker-container) + .icon {
        left: 7px !important;
      }
    }
  }

  .datagrid {
    th:first-child {
      border-left: 1px solid $datagrid-header-border-color;
    }

    .datagrid-rowgroup-header {
      .datagrid-expand-btn {
        left: auto;
        right: -14px;

        .icon.plus-minus::before,
        .icon.plus-minus::after {
          left: auto;
          right: 8px;
        }
      }
    }

    td {
      &.l-right-text .datagrid-cell-wrapper {
        text-align: left;
      }

      &.error {
        .datagrid-cell-wrapper {
          .icon-error {
            left: 0;
            margin-left: 5px;
          }
        }
      }

      .dropdown {
        padding: 1px 0 6px 4px !important;
      }

      &.is-editing {
        .datepicker {
          padding: 0;

          + .trigger {
            margin-left: 0;
            margin-right: 3px;


            .icon {
              margin-right: 3px;
              top: -2px;
            }
          }
        }

        .dropdown-wrapper .icon {
          left: -10px !important;
          top: 3px !important;
        }

        .lookup-wrapper {
          padding-left: 0 !important;
        }

        input.lookup {
          padding: 0;
          width: calc(100% - 15px);

          + .trigger {
            margin-inline-start: 3px;
            margin-right: -1px;
            margin-top: 5px;

            > .icon {
              inset-inline-start: 0;
              transform: none;
            }
          }
        }

        input.timepicker {
          padding: 0 14px 0 0;

          + .trigger {
            left: 0;
            margin-left: 5px;
            margin-right: auto;
            margin-top: 14px;

            > .icon {
              margin-right: 2px;
              top: -1px;
            }
          }
        }
      }

      &.is-dirty-cell:not(.rowstatus-cell)::before {
        right: 2px;
        left: unset;
        border-color: $dirty-icon-fill $dirty-icon-fill transparent transparent;
      }

      .datagrid-expand-btn {
        left: 2px;
      }
    }

    .datagrid-dropdown-list input {
      padding: 8px 10px 8px 32px;
    }

    &.small-rowheight,
    &.extra-small-rowheight {
      tbody {
        .datagrid-rowgroup-header {
          .datagrid-expand-btn {
            left: auto;
            right: -10px;

            .icon.plus-minus::before,
            .icon.plus-minus::after {
              left: auto;
              right: -4px;
            }
          }
        }

        td {
          &.datagrid-trigger-cell {
            .icon-error {
              margin-left: 6px;
            }

            .icon-search-list {
              inset-inline-end: 7px !important;
              inset-block-start: -1px !important;
              right: -4px;
            }

            &:hover,
            &:focus {
              .icon-search-list {
                ~ .icon-error {
                  margin-left: 26px !important;
                }
              }
            }
          }

          &.is-editing {
            .datepicker {
              padding: 0 10px 0 0;
            }
          }
        }
      }
    }

    &.extra-small-rowheight {
      .datagrid-trigger-cell {
        &.has-editor:not(.is-readonly):hover {
          .icon.icon-error {
            margin-left: 23px !important;
          }
        }
      }

      tbody {
        tr {
          td.datagrid-trigger-cell {
            .icon.icon-calendar {
              left: auto;
              right: -4px;
            }

            .icon-clock {
              left: 8px;
              top: 3px;
            }
          }
        }
      }

      td {
        &.is-editing {
          .datepicker {
            ~ .trigger {
              margin-right: 2px;
            }
          }

          input.lookup {
            + .trigger {
              margin-left: 0;
              margin-top: -1px;

              > .icon {
                left: 0;
              }
            }
          }

          input.timepicker {
            + .trigger {
              margin-left: 3px;
              margin-top: 2px;
            }
          }
        }
      }
    }

    &.small-rowheight {
      tbody {
        tr {
          td.datagrid-trigger-cell {
            .icon.icon-calendar {
              left: auto;
              right: -1px;
            }

            .icon-clock {
              left: 5px;
              top: 3px;
            }

            .icon-error {
              top: 7px;
            }
          }
        }
      }

      td {
        &.is-editing {
          .datepicker {
            ~ .trigger {
              margin-right: 2px;
            }
          }

          input.lookup {
            + .trigger {
              margin-left: 3px;
              margin-top: 4px;

              > .icon {
                left: 0;
              }
            }
          }

          input.timepicker {
            + .trigger {
              margin-left: 3px;
              margin-top: 4px;
            }
          }

          .dropdown-wrapper .icon {
            left: 3px !important;
            top: 9px !important;
          }
        }

        .dropdown {
            padding: 0 4px 0 0 !important;

            + .icon {
              right: -3px;
              top: 7px;
            }
          }
      }
    }

    &.medium-rowheight {
      td {
        &.datagrid-trigger-cell {
          .icon.icon-calendar {
            top: 2px;
          }

          .icon-search-list {
            left: 2px;
          }

          .icon-clock {
            left: -1px;
          }
        }

        &.is-editing {
          .dropdown-wrapper .icon {
            left: -8px !important;
            top: 1px !important;
          }

          .datepicker {
            ~ .trigger {
              margin-right: -3px;
            }
          }

          input.lookup {
            padding: 2px 10px 0 0;

            + .trigger {
              margin-left: 7px;
              margin-top: -1px;

              > .icon {
                left: 0;
              }
            }
          }

          input.timepicker {
            + .trigger {
              margin-top: 8px;
            }
          }

          .dropdown {
            padding: 0 1px !important;
          }
        }
      }
    }
  }

  // Datagrid header with ellipsis
  .datagrid-header {
    th.text-ellipsis .datagrid-column-wrapper {
      padding: 0 16px 0 0;

      .datagrid-header-text {
        margin-top: 8px;
      }
    }

    th.text-ellipsis .datagrid-column-wrapper.l-right-text {
      .datagrid-header-text {
        margin-top: 0;
      }
    }
  }

  // Datagrid Dropdown Formatter
  .datagrid-trigger-cell {
    .icon-calendar,
    .icon-fileupload {
      left: auto;
      right: 3px;
    }

.datagrid-cell-wrapper {
      span.trigger {
        text-align: right;
        left: 0%;
      }
    }

    &.l-center-text {
      .datagrid-cell-wrapper {
        span.trigger {
          text-align: center;
        }
      }
    }

    &.l-right-text {
      .datagrid-cell-wrapper {
        span.trigger {
          text-align: left;
        }
      }
    }
  }

  .datagrid-dropdown-list {
    &.normal-rowheight {
      .icon {
        right: 1px;
        top: 9px !important;
      }
    }

    &.medium-rowheight {
      .icon {
        right: -3px;
        top: 9px !important;
      }
    }

    &.small-rowheight {
      .icon {
        right: -3px;
        top: 9px !important;
      }
    }

    &.extra-small-rowheight {
      .icon {
        right: 2px;
        top: 6px !important;
      }
    }
  }

  // Grid Checkboxes
  .datagrid-checkbox {
    left: auto;
    right: -8px;

    &::before {
      margin-left: inherit;
      margin-right: 0;
    }

    &.is-checked::after {
      left: auto;
      right: 5px;
    }

    &.is-partial::after {
      margin-left: inherit;
      margin-right: -3px;
      right: 6px;
    }
  }

  // Filter Row
  .datagrid-filter-wrapper {
    .btn-filter {
      left: -4px;

      .icon-dropdown {
        margin-left: -3px;
        padding-right: 0;
        right: -7px;
      }
    }

    input {
      right: 5px;
    }

    .dropdown {
      padding: 3px 5px 0 0;

      + .icon {
        top: 0;
        left: 5px;
      }
    }

    .dropdown-wrapper {
      left: 0;
    }

    .lookup-wrapper .trigger {
      margin-right: -17px;
      inset-inline-end: 0;

      .icon {
        right: -1px;
      }
    }

    input.timepicker,
    input.datepicker {
      padding: 3px 5px 2px 24px;
    }

    .datepicker + .trigger,
    .timepicker + .trigger {
      margin-right: -18px;
      right: initial;
    }

    .datagrid-filter-wrapper input.datepicker {
      padding: 2px 10px 2px 23px;
    }
  }

  th.l-center-text .btn-filter {
    left: 0;
    right: 9px;

    &.btn-filter-checkbox {
      right: -2px;
    }
  }

  // Right aligned header
  th .datagrid-column-wrapper {
    .datagrid-header-text {
      direction: rtl;
    }

    &.l-right-text {
      float: left;

      .datagrid-header-text {
        float: left;
        position: relative;
        top: 9px;
        margin-top: 0 !important;
      }
    }
  }

  .small-rowheight .datagrid-column-wrapper.formatter-hyperlink:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 4px;
    position: relative;
  }

  .extra-small-rowheight .datagrid-column-wrapper.formatter-hyperlink:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 1px;
    position: relative;
  }

  .datagrid-column-wrapper.formatter-defaultformatter:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 1px;
    position: relative;
  }

  .medium-rowheight .datagrid-column-wrapper.formatter-defaultformatter:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 1px;
    position: relative;
  }

  .small-rowheight .datagrid-column-wrapper.formatter-defaultformatter:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 5px;
    position: relative;
  }

  .extra-small-rowheight .datagrid-column-wrapper.formatter-defaultformatter:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 0;
    position: relative;
  }

  .medium-rowheight .datagrid-header .datagrid-column-wrapper.formatter-hyperlink .icon.datagrid-header-icon {
    top: 3px;
  }

  .small-rowheight .datagrid-header .datagrid-column-wrapper.formatter-hyperlink .icon.datagrid-header-icon {
    top: -2px;
  }

  .extra-small-rowheight .datagrid-header th.text-ellipsis .datagrid-column-wrapper.formatter-hyperlink .icon.datagrid-header-icon {
    top: 1px;
  }

  th.is-dragging-clone {
    .handle {
      color: $ids-color-palette-white;
      top: -1px;
    }

    .datagrid-header-text {
      top: 13px;
    }

    .l-right-text .datagrid-header-text {
      top: 7px;
    }
  }

  // Drag handles
  .has-draggable-columns th .handle,
  .has-draggable-columns th .is-draggable-target {
    right: -1px;

    .icon {
      left: 4px;
    }
  }

  .has-filterable-columns {
    th.is-dragging-clone {
      .handle .icon {
        top: 7px;
      }

      .datagrid-header-text {
        padding-top: 0;
      }
    }
  }

  .has-draggable-columns.small-rowheight,
  .has-draggable-columns.extra-small-rowheight {
    th .handle .icon {
      left: 4px !important;
      top: 4px !important;
    }
  }

  .has-draggable-columns.medium-rowheight {
    th .handle .icon {
      left: 3.5px !important;
    }
  }

  tr .datagrid-alert-text {
    padding-left: 0;
    padding-right: 16px;
  }

  .small-rowheight,
  .extra-small-rowheight {
    &.has-filterable-columns {
      .is-filterable .datagrid-filter-wrapper {
        .lookup-wrapper .trigger {
          margin-right: -25px;
        }

        .btn-filter {
          left: 2px;
        }
      }

      .datagrid-filter-wrapper {
        input {
          right: 0;
        }

        .dropdown-wrapper {
          left: 0 !important;
        }

        .datepicker + .trigger,
        .timepicker + .trigger {
          margin-right: -22px;
          right: inherit !important;
        }
      }
    }
  }

  .datagrid-header {
    //Push sort indicator over
    .datagrid-column-wrapper {
      &.l-center-text {
        .sort-indicator {
          left: 0;
          position: absolute;
        }
      }
    }

    .datagrid-header-groups {
      th {
        &.l-left-text {
          .datagrid-column-wrapper {
            width: 100%;
          }

          .datagrid-header-text {
            text-align: right;
          }
        }

        &.l-cener-text {
          .datagrid-column-wrapper {
            width: 100%;
          }

          .datagrid-header-text {
            text-align: center;
          }
        }

        &.l-right-text {
          .datagrid-column-wrapper {
            width: 100%;
          }

          .datagrid-header-text {
            text-align: left;
          }
        }
      }
    }

    .required::after {
      content: '';
    }

    .required::after {
      @include required-indicator();

      position: static;
      color: $datagrid-required-icon-color;
      left: -2px;
      top: 0;
    }

    th .datagrid-header-text.required::after {
      font-size: 1.8rem;
    }

    &.left {
      th:last-child {
        border-right: 0;
      }
    }

    &.center {
      th:last-child {
        border-left-color: transparent;
      }
    }
  }

  // Contextual toolbar
  .datagrid-contextual-toolbar.contextual-toolbar {
    &.toolbar {
      padding: 0 20px 0 5px;
    }

    .title {
      left: auto;
      right: -8px;
    }

    &.do-resize {
      .title {
        left: auto;
        right: 13px;
      }
    }
  }

  .datagrid-container {
    .datagrid-wrapper td:first-child {
      border-left-color: $datagrid-cell-border-color;
    }

    .datagrid-wrapper.right {
      td:first-child {
        border-right: 1px solid $datagrid-cell-border-color;
      }

      th:first-child {
        border-right: 1px solid $datagrid-header-border-color;
      }
    }

    .datagrid-wrapper:not(.left) td:last-child {
      border-left-color: transparent;
    }

    .datagrid-wrapper:not(.left):not(.right) td:first-child {
      border-left: 1px solid $datagrid-cell-border-color;
    }
  }

  .dropdown-list.datagrid-filter-dropdown > .trigger .icon {
    margin-right: -14px;
  }

  &.is-mac.is-firefox {
    .datagrid .datagrid-header .datagrid-filter-wrapper .lookup-wrapper .trigger {
      margin-top: 3px;
    }
  }

  &.is-safari {
    .datagrid .datagrid-header .datagrid-filter-wrapper .lookup-wrapper {
      padding-left: 8px;
    }
  }

  .dropdown-list {
    .trigger .icon {
      margin-right: -22px;
      top: 8px;
    }
  }

  .dropdown-search {
    padding: 10px 8px 2px 32px;
  }
}

// Reorder Column styles
.has-draggable-columns {
  .drag-target-arrows {
    display: none;
    font-size: 2.8em;
    height: $datagrid-header-height;
    margin: 0;
    padding: 4px 0 0 7px;
    position: fixed;
    top: 0;
    z-index: 10;

    &.is-over {
      display: inline-block;
    }

    &::before,
    &::after {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      content: '';
      display: inline-block;
      height: 0;
      left: -6px;
      position: absolute;
      width: 0;
    }

    &::before {
      border-top: 5px solid $datagrid-header-drag-arrow-color;
      top: -9px;
    }

    &::after {
      border-bottom: 5px solid $datagrid-header-drag-arrow-color;
      bottom: -10px;
    }
  }

  th {
    .handle,
    .is-draggable-target {
      display: none;
      height: $datagrid-header-height;
      margin-top: 0;
      position: absolute;

      &[hidden] {
        display: none !important;
      }

      &.is-draggable-target {
        &.last {
          left: auto;
          right: -1px;
        }

        &.is-over {
          display: inline-block;
        }
      }

      &.handle {
        cursor: move;
        width: 18px;
        z-index: 1;

        .icon {
          color: $datagrid-sort-icon-sorted-color;
          height: 20px;
          left: -3px;
          top: 7px;
          width: 21px;
        }
      }
    }

    &.is-dragging {
      background-color: $datagrid-header-dragging-bg-color;
    }

    &.is-dragging-clone {
      max-width: 125px;
      min-width: 100px !important;
      position: fixed;
      z-index: 3;

      .datagrid-header-text {
        @include ellipsis();
        @include no-select();
      }

      .sort-indicator {
        opacity: 0;
      }

      .handle {
        top: 2px;
      }

      .datagrid-header-text {
        padding-top: 5px;
      }
    }

    &:hover,
    &.is-dragging,
    &.is-dragging-clone {
      .handle {
        display: inline-block;
      }
    }
  }

  &.small-rowheight,
  &.extra-small-rowheight {
    th {
      &:hover,
      &.is-dragging,
      &.is-dragging-clone {
        .handle {
          display: none;
        }
      }
    }
  }

  &.has-filterable-columns {
    .is-draggable-target,
    .drag-target-arrows {
      height: $datagrid-filterable-header-height;
    }

    &.has-group-headers {
      .drag-target-arrows {
        &::before {
          top: -6px;
        }

        &::after {
          bottom: -8px;
        }
      }
    }

    &.has-draggable-columns th {
      .handle .icon,
      .is-draggable-target.handle .icon {
        top: 6px;
      }
    }

    th.is-dragging-clone {
      .datagrid-header-text {
        padding-top: 0;
      }

      .handle .icon {
        top: 4px;
      }
    }
  }

  &.small-rowheight,
  &.extra-small-rowheight {
    th.is-dragging-clone {
      .datagrid-header-text {
        padding-top: 0;
      }

      .handle {
        top: 0;
      }
    }
  }

  &.medium-rowheight {
    th.is-dragging-clone {
      .datagrid-header-text {
        padding-top: 1px;
      }

      .handle {
        top: 0;
      }
    }
  }
}

// Firefox on Mac only
.is-mac.is-firefox {
  .has-draggable-columns {
    &.small-rowheight,
    &.extra-small-rowheight {
      th {
        .handle {
          padding: 0 0 0 2px;
        }
      }
    }

    &.medium-rowheight {
      th {
        .handle {
          padding: 0 0 0 3px;
        }
      }
    }
  }

  .datagrid {
    tr .tag {
      line-height: 24px;
    }
  }
}

//Contextual toolbar
.datagrid-contextual-toolbar.contextual-toolbar {
  &.toolbar {
    padding: 0 7px 0 20px;
  }

  .title {
    left: -8px;
  }

  &.do-resize {
    .title {
      left: 13px;
    }
  }

  &.flex-toolbar {
    .toolbar-section {
      &.title {
        padding-top: 5px;
      }

      &.buttonset {
        [class^='btn'] {
          &:hover {
            color: $contextual-toolbar-button-hover-color;
            background-color: rgba(0, 0, 0, .3) !important;

            .icon {
              color: $contextual-toolbar-button-hover-color !important;
            }
          }
        }
      }
    }
  }
}

// Columns Personalization
.datagrid-columns-dialog {
  .label-text {
    font-size: $ids-size-font-base;
  }

  label.inline {
    line-height: 30px;
  }

  .label {
    margin: 0;
  }

  li {
    height: 45px;
    padding: 9px 15px;
  }

  .searchfield-wrapper {
    border-radius: 0;
    margin: 0 3px 0 -2px;

    input {
      border-radius: 0;
    }

    &.is-hovered:not(.has-focus) input:not([disabled='true']) {
      border-color: $listview-full-width-border-color;
    }
  }
}

// Filter Dropdown Style
.datagrid-filter-dropdown {
  .dropdown-search {
    height: 28px;
    padding: 4px 32px 1px 7px;
  }

  .trigger .icon {
    height: 13px;
    left: 10px;
    top: 4px;
    width: 13px;
  }

  .dropdown-list {
    li {
      min-height: 28px;
    }

    ul {
      line-height: 28px;
      text-indent: 7px;
    }

    .icon.search {
      height: 14px;
      margin-top: 6px;
      width: 16px;
    }
  }
}

// Summary totals
.datagrid-summary-row {
  td {
    background-color: $datagrid-cell-bg-color !important;
    border-top: 1px solid $datagrid-cell-border-color;
    bottom: 0;
    position: sticky;

    .datagrid-checkbox-wrapper {
      display: none;
    }
  }

  .datagrid-summary-totals {
    margin-left: -10px;
    padding-right: 10px;
  }
}

.datagrid-container.has-summary-row {
  tr:last-child td {
    border-bottom: 0;
  }

  tr:nth-last-child(2) td {
    border-bottom: 0;
  }
}

.card,
.widget {
  .datagrid-container.small-rowheight.paginated,
  .datagrid-container.extra-small-rowheight.paginated {
    height: 100%;
  }

  &.has-datagrid {
    .datagrid-container.paginated {
      height: 100%;
    }

    .widget-content,
    .card-content {
      height: 319px;
      min-height: 319px;
    }

    .widget-footer {
      padding: 3px;
    }

    .card-footer {
      border-top: 0;
      padding-left: 0;
      padding-right: 0;
    }

    .pager-prev,
    .pager-next {
      position: static;
    }
  }
}

:not(.card-content) {
  > .datagrid-container {
    // Heights for scrollbars
    &.paginated {
      height: calc(100% - 78px);
    }
  }
}

// Modal
.modal {
  &.datagrid-columns-dialog {
    min-width: 400px;

    .listview-search.alternate-bg .searchfield-wrapper {
      background-color: $listview-bg-color;
    }

    .listview {
      &.alternate-bg {
        background-color: $listview-bg-color;
      }
    }

    .listview-search {
      .icon.close {
        height: 18px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }

  // Modal Lists
  table {
    width: 300px;
    width: -webkit-fill-available;
    width: stretch;
  }

  .paginated table {
    width: 466px;
    width: -webkit-fill-available;
    width: stretch;
  }
}

.is-firefox {
  .modal {
    .paginated table {
      width: 471px;
      width: -webkit-fill-available;
      width: stretch;
    }
  }
}

// Popup Adjustments
.editor-popup {
  border-radius: 2px;
  max-width: inherit;
  padding: 0;
  z-index: 1020;

  .arrow {
    display: none;
  }

  .tooltip-content {
    padding: 0;

    .editor-toolbar {
      border-width: 0 0 1px;
      margin: 0;
    }

    .editor {
      border: 0;
      height: inherit;
      margin: 0;
      min-height: inherit;

      ul,
      ol {
        margin: 5px auto 5px 15px;
      }

      li {
        list-style: inherit;
      }

      p {
        text-align: inherit;
      }
    }
  }
}

.content-tooltip {
  &.popover.alternate {
    background-color: $datagrid-cell-bg-color;
    font-size: $ids-size-font-sm;
    padding-bottom: inherit;

    &.top .arrow::after {
      border-top-color: $datagrid-cell-bg-color;
    }

    &.bottom .arrow::after {
      border-bottom-color: $datagrid-cell-bg-color;
    }

    &.right .arrow::after {
      border-right-color: $datagrid-cell-bg-color;
    }

    &.left .arrow::after {
      border-left-color: $datagrid-cell-bg-color;
    }

    .tooltip-content {
      padding: 15px;
    }
  }
}

// Under tabs
.tab-container {
  .datagrid-container {
    .datagrid-header th {
      .datagrid-checkbox-wrapper {
        font-size: 0;
      }

      .datagrid-checkbox {
        top: -8px;
      }
    }
  }
}

.android.is-firefox {
  .mobile {
    &.dropdown-list {
      .trigger {
        position: absolute;

        .icon.close {
          top: 6px;
        }
      }
    }
  }

  .datagrid-header .datagrid-filter-wrapper {
    .dropdown + .icon:not(.close) {
      top: -1px;
    }
  }
}

.table-errors {
  display: inline-block;
  height: 35px;
  margin-left: 4px;
  position: relative;
  top: -9px;
}

// Sticky Headers
.is-sticky.datagrid-container,
.is-sticky .datagrid-wrapper {
  overflow: visible !important;
}

.is-sticky.datagrid-container th {
  position: sticky;
  top: 0;
}

.is-sticky.toolbar + .is-sticky.datagrid-container th {
  top: 40px;
}

.sticky-container {
  // overflow: auto;
  width: 100%;
}

.is-sticky.toolbar {
  background-color: $body-color-primary-background;
  position: sticky;
  top: 0;
  z-index: 1;
}

// Ios Hacks
.ios {
  .datagrid-header .datagrid-filter-wrapper .dropdown.is-disabled {
    opacity: 0.4;
  }

  // Fix for iOS Safari column width compression in BrowserStack
  &.is-safari {
    .datagrid-container {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;

      // For tables with fixed column widths
      &[data-has-fixed-widths="true"] .datagrid,
      &.has-fixed-columns .datagrid {
        width: max-content;
      }
    }
  }
}

// Safari Hacks
.is-safari {
  a.btn-icon.row-btn {
    top: -4px;
  }

  .datagrid-header .datagrid-filter-wrapper {
    .lookup-wrapper .searchfield-wrapper.has-close-icon-button .icon {
      top: -2px;
    }

    .datepicker,
    .timepicker {
      + .trigger {
        margin-left: -16px;
      }
    }

    .timepicker + .trigger {
      top: -9px;
    }

    .timepicker + .trigger .icon {
      height: 15px;
      width: 15px;
    }

    .datepicker + .trigger .icon {
      height: 14px;
      width: 13px;
    }
  }
}

// All IE hacks
.ie {
  .datagrid-wrapper {
    tbody tr {
      &.is-active-row td {
        border-bottom: 1px solid $ids-color-brand-primary-base;
        border-top: 1px solid $ids-color-brand-primary-base;
        outline: 0;

        .datagrid-cell-wrapper {
          margin-bottom: -1px;
          margin-top: -1px;
        }

        &:first-child {
          border-left: 1px solid $ids-color-brand-primary-base;

          .datagrid-cell-wrapper {
            margin-left: -1px;
          }
        }

        &:last-child {
          border-right: 1px solid $ids-color-brand-primary-base;
        }
      }
    }
  }
}

html[class*='theme-classic-'] .datagrid {
  .datagrid-trigger-cell.has-editor:not(.is-readonly) {
    &.is-fileupload .datagrid-cell-wrapper {
      .icon:not(.datagrid-alert-icon) {
        &.icon-error {
          left: 96%;
          top: 12px;
        }

        &.icon-fileupload {
          top: -2.5px;
        }

        &.icon-close {
          top: 1.5px;
        }
      }
    }

    .datagrid-cell-wrapper {
      span {
        position: relative;
        vertical-align: middle;
        top: 1px;
      }

      .trigger {
        + .icon.icon-calendar {
          +  .icon:not(.datagrid-alert-icon).icon-error {
            left: 95%;
            top: 14px;
          }
        }

        + .icon.icon-clock {
          left: -1px;

          +  .icon:not(.datagrid-alert-icon).icon-error {
            left: 92%;
            top: 15px;
          }
        }

        + .icon.icon-search-list + .icon:not(.datagrid-alert-icon).icon-error {
          left: 92%;
        }
      }
    }
  }

  &.medium-rowheight {
    .datagrid-trigger-cell.has-editor:not(.is-readonly) {
      &.is-fileupload .datagrid-cell-wrapper .icon:not(.datagrid-alert-icon) {
        &.icon-error {
          top: 7px;
          left: 95%;
        }

        &.icon-close {
          top: -2px;
          left: 3px;
        }
      }

      .datagrid-cell-wrapper {
        .colorpicker-container + .icon:not(.datagrid-alert-icon).icon-error {
          left: 100%;
        }

        .trigger {
          + .icon.icon-calendar {
            + .icon:not(.datagrid-alert-icon).icon-error {
              top: 8px;
            }
          }

          + .icon.icon-clock + .icon:not(.datagrid-alert-icon).icon-error {
            top: 10px;
          }

          + .icon.icon-search-list + .icon:not(.datagrid-alert-icon).icon-error {
            top: 12px;
            left: 93%;
          }
        }

        input.datepicker {
          margin-top: -1px;
        }

        input.timepicker {
          margin-top: 0;
        }

        .colorpicker-container + .icon:not(.datagrid-alert-icon).icon-error {
          left: 100%;
        }

        .colorpicker-container {
          &.dropdown-trigger {
            margin-top: -4px;
          }
        }

        .colorpicker-container {
          + .dropdown-trigger {
            margin-top: -4px;
          }

          .colorpicker {
            top: 1px;
          }

          .icon {
            top: 4px;
          }
        }
      }

      &.is-editing .datagrid-cell-wrapper {
        .colorpicker-container {
          margin-top: -3px;

          .colorpicker {
            margin-left: 0;
          }
        }
      }
    }
  }

  &.small-rowheight {
    td.datagrid-trigger-cell.has-editor:not(.is-readonly) {
      &.is-fileupload {
        &:focus,
        &:hover {
          .datagrid-cell-wrapper .icon:not(.datagrid-alert-icon).icon-error {
            top: 3px;
          }
        }

        .datagrid-cell-wrapper .icon:not(.datagrid-alert-icon).icon-error {
          top: 5px;
        }
      }

      .datagrid-cell-wrapper {
        .colorpicker-container {
          min-height: 22px;
          top: -6px;

          + .icon:not(.datagrid-alert-icon).icon-error {
            left: 102%;
            top: 7px;
          }

          input.colorpicker {
            top: 3px;
          }
        }

        .trigger {
          &.dropdown-trigger {
            + .icon {
              left: -5px;
              top: -1px;

              +  .icon:not(.datagrid-alert-icon).icon-error {
                left: 102%;
              }
            }
          }

          + .icon.icon-search-list {
            margin-top: -1px;

            + .icon:not(.datagrid-alert-icon).icon-error {
              left: 96%;
              top: 7px;
            }
          }

          + .icon.icon-calendar + .icon:not(.datagrid-alert-icon).icon-error {
            left: 98%;
            top: 5px;
          }

          + .icon.icon-clock {
            left: -5px;

            + .icon:not(.datagrid-alert-icon).icon-error {
              left: 96%;
              top: 8px;
            }
          }
        }
      }

      &.is-editing {
        .datagrid-cell-wrapper {
          .colorpicker-container {
            min-height: 22px;
            top: -7px;
          }
        }
      }
    }
  }

  &.extra-small-rowheight {
    .datagrid-trigger-cell.has-editor:not(.is-readonly) {
      &.is-fileupload {
        &:focus,
        &:hover {
          .datagrid-cell-wrapper .icon:not(.datagrid-alert-icon) {
            &.icon-error {
              top: 2px;
              left: 95%;
            }

            &.icon-fileupload {
              left: -4px;
            }
          }
        }

        .datagrid-cell-wrapper .icon:not(.datagrid-alert-icon).icon-error {
          top: 7px;
        }
      }

      .datagrid-cell-wrapper {
        span {
          vertical-align: unset;
        }

        .colorpicker-container {
          height: 22px;

          + .icon:not(.datagrid-alert-icon).icon-error {
            left: 99%;
          }

          span.trigger {
            inset-inline-start: 16%;
            vertical-align: middle;

            .icon {
              top: 0;
              inset-inline-start: 7px;
            }
          }
        }

        .trigger {
          &.dropdown-trigger:not(.colorpicker-container) {
            + .icon {
              top: -0.5px;
              margin-left: 0.5px;

              +  .icon:not(.datagrid-alert-icon).icon-error {
                left: 99%;
              }
            }
          }

          + .icon.icon-calendar {
            left: -5px;
            top: -0.5px;

            + .icon:not(.datagrid-alert-icon).icon-error {
              left: 96%;
              top: 5px;
            }
          }

          + .icon.icon-clock {
            left: -5px;

            + .icon:not(.datagrid-alert-icon).icon-error {
              left: 95%;
              top: 6px;
            }
          }

          + .icon.icon-search-list + .icon:not(.datagrid-alert-icon).icon-error {
            top: 6px;
            left: 94%;
          }
        }
      }

      &.is-editing {
        .datagrid-cell-wrapper {
          .colorpicker-container {
            .icon {
              inset-inline-start: 2px;
            }
          }
        }
      }

    }
  }

  &.small-rowheight,
  &.extra-small-rowheight {
    .datagrid-expand-btn {
      .icon {
        top: -2px;
      }
    }
  }
}

html[class*='theme-classic-'].is-firefox {
  .datagrid {
    .datagrid-expand-btn {
      .icon {
        top: -7px;
      }
    }
  }
}

.datagrid-header .datagrid-filter-wrapper {
  .datepicker + .trigger {
    color: $datepicker-active-trigger;
    cursor: pointer;
  }

  .datepicker + .trigger:hover {
    color: $datepicker-hover-trigger;
    background-color: transparent;
  }

  .datepicker + .trigger:hover .icon {
    color: $datepicker-hover-trigger;
    background-color: transparent;
    opacity: 1;
  }

  .datepicker + .trigger:active {
    color: $datepicker-active-state;
  }

  .timepicker + .trigger {
    color: $timepicker-active-trigger;
    cursor: pointer;
  }

  .timepicker + .trigger:hover {
    color: $timepicker-hover-trigger;
    background-color: transparent;
  }

  .timepicker + .trigger:hover .icon {
    color: $timepicker-hover-trigger;
    background-color: transparent;
    opacity: 1;
  }

  .timepicker + .trigger .icon use {
    fill: currentColor;
    opacity: 1;
  }

  .timepicker + .trigger:active {
    color: $timepicker-active-state;
  }
}
