// Datagrid New Styles
//================================================== //

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

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

  th.text-ellipsis.is-sortable.is-resizable .datagrid-column-wrapper .datagrid-header-text {
    margin-block: 7px 0;
    margin-inline: 1px 0;
  }

  &.small-rowheight {
    th.text-ellipsis .datagrid-column-wrapper .datagrid-header-text {
      margin-block: 8px 0;
    }

    th.text-ellipsis.is-sortable.is-resizable .datagrid-column-wrapper .datagrid-header-text {
      margin-block: 8px 0;
    }
  }

  &.medium-rowheight {
    th.text-ellipsis .datagrid-column-wrapper .datagrid-header-text {
      margin-block: 15px 0;
    }

    th.text-ellipsis.is-sortable.is-resizable .datagrid-column-wrapper .datagrid-header-text {
      margin-block: 14px 0;
    }
  }

  // Fix the size of the drag icon
  &.medium-rowheight {
    .datagrid-column-wrapper,
    th {
      .handle,
      .is-draggable-target {
        font-size: 2.3rem;
      }
    }
  }

  // Adjust some icons
  .datagrid-filter-wrapper {
    .dropdown + .trigger {
      .icon {
        right: 5px;
        top: 1px;
      }
    }

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

    .datepicker,
    .timepicker {
      + .trigger {
       &:hover {
         background-color: transparent;
       }
      }
    }

    .lookup-wrapper {
      .trigger {
        .icon {
          height: 16px;
          right: 0;
          top: -2px;
          width: 16px;
        }
      }
    }

    .searchfield-wrapper.has-close-icon-button .icon {
      right: 14px;
      top: 6px;
    }
  }

  th .datagrid-header-text.required::after {
    font-size: 1.8rem;
  }
}

.datagrid-drilldown {
  top: 2px;
}

// Adjust header text
.datagrid-header-text {
  font-size: $ids-size-font-xs !important;
}

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

// Adjust Filter Text
.datagrid-header .datagrid-filter-wrapper .dropdown {
  padding: 1px 0 0 5px;
}

// Adjust some trigger cells
.datagrid-trigger-cell {
  .icon-calendar {
    top: -3px;
  }

  .btn-icon > .icon {
    top: 0;
  }

  // Date Picker
  .datepicker {
    + .trigger {
      margin-top: 11px;
    }
  }
}

// Main Grid
.datagrid {
  > tbody > tr .icon.plus-minus::before,
  > tbody > tr .icon.plus-minus::after {
    color: $font-color-highcontrast;
  }

  td {
    .chart-completion-target {
      height: 28px;

      .target {
        margin-top: 6px;
      }

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

    .btn-actions {
      top: 2px;
    }

    .hyperlink {
      top: 1px;
    }
  }

  td.is-editing {
    .lookup-wrapper {
      padding-top: 0;
    }

    input.lookup {
      + .trigger {
        margin-left: -17px;
        margin-top: 10.5px;

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

    .datepicker {
      margin-top: 0;
      padding: unset;

      ~ .icon {
        top: calc(50% - 18px);
      }

      + .trigger {
        margin-top: 12px;
      }
    }

    input.timepicker {
      margin-top: 3px;

      ~ .trigger {
        margin-left: -7px;
        margin-top: 14px;
      }

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

  .datagrid-header .datagrid-column-wrapper.formatter-dropdown:not(.l-right-text) .datagrid-header-text {
    inset-inline-start: 5px;
    position: relative;
  }

  .datagrid-header .datagrid-column-wrapper.formatter-defaultformatter:not(.l-right-text) .datagrid-header-text.required {
    inset-inline-start: -4px;
  }

  &.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;
  }

  &.small-rowheight .datagrid-header .datagrid-column-wrapper.formatter-defaultformatter:not(.l-right-text) .datagrid-header-text.required {
    inset-inline-start: 0;
  }

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

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

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

  &.extra-small-rowheight {
    tbody tr td .row-btn {
      top: 0;
    }

    .datagrid-trigger-cell {
      .icon.icon-calendar {
        left: -5px !important;
        top: -1px !important;
      }
    }

    td.is-editing {
      input.timepicker {
        + .trigger {
          margin-left: -1px;
          margin-top: 2px;

          > .icon {
            top: 0;
          }
        }
      }

      .datepicker {
        padding: unset !important;

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

  // Short Row Height
  &.small-rowheight {
    tbody {
      tr {
        td {
          &.datagrid-trigger-cell {
            .dropdown-trigger {
              + .icon {
                top: 1px;
                inset-inline-start: -8px;
              }
            }

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

            &.has-editor:not(.is-readonly) {
              &.is-fileupload .datagrid-cell-wrapper .icon.icon-error:not(.datagrid-alert-icon) {
                left: 99%;
                margin-top: 1px;
              }

              .datagrid-cell-wrapper {
                .colorpicker-container + .icon.icon-error:not(.datagrid-alert-icon) {
                  left: 100%;
                  margin-top: 2px;
                }

                .trigger {
                  + .icon-search-list + .icon.icon-error:not(.datagrid-alert-icon) {
                    left: 100%;
                  }

                  + .icon-calendar + .icon.icon-error:not(.datagrid-alert-icon) {
                    left: 101%;
                    margin-top: 1px;
                  }

                  +.icon-clock + .icon.icon-error:not(.datagrid-alert-icon) {
                    margin-top: 1px;
                    left: 98%;
                  }
                }
              }
            }
          }

          &.is-editing {
            .datepicker {
              + .trigger {
                > .icon {
                  top: 2px;
                  left: -1px;
                }
              }
            }
          }

          // Adjust Tags
          span {
            line-height: 25px;
          }

          // Adjust Row Buttons
          .row-btn {
            min-height: 25px;
          }
        }
      }
    }

    td.is-editing {
      .datepicker {
        padding: unset !important;

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

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

          > .icon {
            top: 0;
          }
        }
      }
    }

    > tbody > tr .datagrid-alert-text {
      top: -1px;
    }

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

    .datagrid-column-wrapper .btn-actions {
      top: -2px;
    }
  }

  &.small-rowheight,
  &.extra-small-rowheight {
    tbody {
      tr {
        td {
          .datagrid-cell-wrapper {
            .row-btn {
              top: -2px;

              &.btn-icon {
                height: 22px;
              }

              .icon {
                margin-top: 0;
                margin-block-end: 2px;
              }
            }
          }
        }

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

  &.extra-small-rowheight {
    tbody tr td .datagrid-cell-wrapper .row-btn {
      top: -2px;
    }
  }

  &.medium-rowheight {
    .datagrid-cell-wrapper {
      .icon-clock.icon {
        top: 0;
      }

      .row-btn {
        min-height: 32px;
        top: 3px;
      }

      a.row-btn {
        top: -2px;
      }

      .dropdown-trigger:not(.colorpicker-container) {
        + .icon {
          top: 1px !important;
          left: 4px !important;
        }
      }
    }

    .datagrid-trigger-cell {
      .icon.icon-calendar {
        left: 4px;
        top: 0;
      }
    }

    td.is-editing {
      &:not(.datagrid-trigger-cell) .datepicker {
        + .trigger {
          margin-top: 7px;
        }

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

      .datepicker {
        + .trigger {
          margin-left: -2px;
        }

        + .trigger.btn-icon {
          &:hover {
            background-color: transparent;
          }
        }
      }

      input.timepicker {
        + .btn-icon.trigger {
          margin-left: -3px !important;
          margin-top: 3px !important;
        }
      }
    }

    .chart-completion-target {
      inset-block-start: -1px;
      line-height: 26px;
    }

    // fix focus gets cutoff on medium row height
    .datagrid-rowgroup-header {
      .datagrid-expand-btn {
        margin-bottom: 2px;
        margin-top: 2px;
      }
    }
  }
}

// Fix Editor Alignment
.datagrid.medium-rowheight {
  tbody tr {
    line-height: 26px;
  }

  > tbody > tr .datagrid-cell-wrapper {
    .datagrid-checkbox-wrapper {
      margin-top: -13px;
      padding-top: 2px;
    }
  }

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

  tbody tr td.is-editing {
    input {
      margin-top: 0;
      margin-left: 0;

      :not(.colorpicker) {
        height: 22px !important;
      }

      &.lookup {
        margin-left: -1px;
      }
    }

    input.lookup {
      + .trigger {
        margin-left: -15px;
        margin-top: 1px;
      }
    }

    .lookup-wrapper {
      padding: 0;
    }

    .datepicker {
      padding-left: 0;
      padding-top: 0;
    }

    .datepicker ~ .icon {
      margin-left: 11px;
      top: calc(50% - 19px) !important;
    }

    &:not(.datagrid-trigger-cell) {
      input.datepicker {
        margin-top: 4px !important;
      }
    }
  }

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

  .datagrid-trigger-cell.has-editor .icon.icon-search-list {
    top: 2px;
    left: 2px;
  }

  .datagrid-trigger-cell .icon.icon-search-list {
    top: 4px;
  }

  .datagrid-expand-btn {
    margin-top: 4px;
  }

  tbody > tr .datagrid-cell-wrapper {
    .datagrid-expand-btn + span,
    .datagrid-tree-node {
      top: 4px;
    }
  }
}

// Fix Editor Alignment
.datagrid.small-rowheight {
  .icon-search-list {
    left: -1px !important;
    top: 4px !important;
  }

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

    .btn-actions {
      top: 0;
    }
  }

  tbody tr td.is-editing {
    .lookup-wrapper {
      padding-left: 0;
      padding-top: 0;
      height: inherit;
    }

    input {
      height: 20px;
      padding-bottom: 0;
    }

    input.lookup {
      + .trigger {
        margin-left: -18px;
        top: 0;

        > .icon {
          transform: none;
        }
      }
    }

    .datepicker + .icon {
      top: -4px;
    }
  }

  tbody tr td .datagrid-drilldown {
    top: -1px;
  }

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

    .datagrid-tree-node {
      top: 0;
    }
  }
}

// Fix Editor Alignment
.datagrid.extra-small-rowheight {
  tbody tr td {
    .icon-search-list {
      left: -3px;
      top: 4px;
    }

    &.is-editing {
      input.lookup {
        + .trigger {
          margin-left: -22px;
          margin-top: 1px;
        }
      }
    }

    .chart-completion-target {
      top: 6px;

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

    .datagrid-expand-btn {
      margin-top: -2px;

      &.is-expanded {
        margin-top: 0;
      }
    }
  }
}

// Fix header alignment
.datagrid-container {
  th.text-ellipsis :not(.datagrid-column-wrapper) .datagrid-header-text {
    margin: 9px 0 0;
  }

  &.small-rowheight th.text-ellipsis :not(.datagrid-column-wrapper) .datagrid-header-text {
    margin: 4px 0 0;
  }

  &.medium-rowheight th.text-ellipsis .datagrid-header-text {
    margin: 4.5px 0 0;
  }

  &.medium-rowheight .datagrid-column-wrapper .sort-indicator {
    margin-block-start: 4px;
  }

  &.medium-rowheight th.text-ellipsis .datagrid-column-wrapper .sort-indicator {
    margin-block-start: 5px;
  }

  &.medium-rowheight th.text-ellipsis.l-center-text .datagrid-column-wrapper  .sort-indicator {
    margin-block-start: -4px;
  }

  &.medium-rowheight th.text-ellipsis.l-right-text .datagrid-column-wrapper  .sort-indicator {
    margin-block-start: 5px;
  }

  &:not(.extra-small-rowheight) .datagrid-header {
    .datagrid-filter-wrapper .dropdown + .icon {
      top: 1px;
    }
  }

  &.small-rowheight {
    .sort-indicator {
      margin-block-start: 6px;
      left: 3px;
      position: relative;
    }
  }

  &.extra-small-rowheight {
    .sort-indicator {
      margin-block-start: 3.5px;
    }
  }

  &.small-rowheight .datagrid-column-wrapper.l-right-text {
    .sort-indicator {
      margin: 7px -1px 0 0;
    }
  }

  .datagrid-column-wrapper.l-center-text.formatter-checkbox {
    .sort-indicator {
      margin-top: -4px;
    }
  }

  &.small-rowheight .datagrid-column-wrapper.l-center-text.formatter-checkbox {
    .sort-indicator {
      margin-top: -2px;
    }
  }
}

.datagrid-column-wrapper.l-center-text.formatter-checkbox {
  .sort-indicator {
    margin-top: -4px;
  }
}

.sort-indicator {
  margin-block-start: 4px;

  span {
    height: 8px;
  }
}

.text-ellipsis .sort-indicator {
  margin-block-start: 2px;

  span {
    height: 8px;
  }
}

.datagrid.small-rowheight tbody tr td {
  &.datagrid-trigger-cell {
    .trigger.colorpicker-container {
      height: 22px;
    }

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

    &.is-editing .datagrid-cell-wrapper {
      padding: 2px 11px 0 !important;

      .icon-close {
        margin-left: -21px !important;
        left: -7px;
      }

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

  .hyperlink {
    margin-top: 2px;
  }
}

// Small mode adjustments
.datagrid-container.small-rowheight {
  .datagrid-header .datagrid-filter-wrapper {
    .datepicker,
    .timepicker {
      + .trigger {
        right: 2px;
      }
    }

    .lookup-wrapper {
      .trigger {
        margin-left: -22px;
        margin-top: 2px;
      }
    }
  }
}

// Adjust handle for resize on lists
.is-gridlist.has-draggable-columns th .handle {
  font-size: 23px;
  top: -3px;
}

.has-draggable-columns th {
  .handle.handle,
  .is-draggable-target.handle {
    .icon {
        left: -4px;
    }
  }
}

// Firefox
.is-firefox {
  // Adjust icon for firefox
  .datagrid-header .datagrid-filter-wrapper .timepicker + .trigger {
    top: -2px;
  }

  .datagrid {
    .datagrid-trigger-cell .icon.icon-clock {
      top: -2px;
    }
  }

  // Main Grid for firefox
  .datagrid {
    td {
      &.is-editing {
        .datepicker {
          ~ .icon {
            top: calc(50% - 17px);
          }
        }

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

    // Medium Row Height for firefox
    &.medium-rowheight {
      tbody tr {
        td {
          &.is-editing {
            .datepicker {
              margin-top: 0;

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

            &.datagrid-trigger-cell {
              input.datepicker {
                margin-top: -6px;
              }

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

              input.timepicker + .btn-icon.trigger {
                top: 4px;
              }
            }

            .lookup-wrapper {
              padding-top: 1px;

              .lookup {
                ~ .trigger {
                  top: -1px;

                  .icon {
                    top: calc(50% - 10px);
                  }
                }
              }
            }
          }
        }
      }
    }

    &.small-rowheight {
      tbody tr {
        td {
          &.is-editing {
            .lookup {
              + .trigger {
                top: 1px;
              }
            }
          }
        }
      }
    }
  }

  .modal.datagrid-columns-dialog {
    .searchfield-wrapper {
      height: auto;
    }
  }
}

// Adjustments for uplift mode
.datagrid.extra-small-rowheight {
  tbody tr td.datagrid-trigger-cell.has-editor {
    .icon.icon-search-list {
      top: -1px;
      left: -5px;
    }
  }

  tbody tr td.is-editing input {
    height: 24px;

    &.lookup {
      height: 24px;
      padding-right: 0;
    }
  }

  tbody tr td.is-editing .dropdown {
    padding: 0 22px 0 3px !important;
  }

  tbody tr td.is-editing .dropdown-wrapper .dropdown + .icon {
    height: 16px;
    right: -1px;
    top: 7px !important;
    width: 16px;
  }

  .datagrid-cell-wrapper {
    min-height: 34px;

    .btn-actions {
      top: 2px;
    }
  }

  tbody tr td.is-editing .datepicker {
    height: 26px;
  }

  div.dropdown + .icon,
  div.multiselect + .icon {
    height: 16px;
    right: 4px;
    top: 7px !important;
    width: 14px;
  }

  tbody tr td.is-editing .datepicker + .icon {
    top: -4px !important;
  }

  tbody tr td.datagrid-trigger-cell .dropdown-trigger :not(.colorpicker-container) + .icon {
    top: 1px !important;
    left: -5px !important;
  }
}

.datagrid-cell-wrapper {
  .custom-card {
    svg.icon {
      top: 5px;
    }
  }
}

.datagrid-container.extra-small-rowheight {
  &.has-filterable-columns .is-filterable .datagrid-filter-wrapper .btn-filter {
    left: 6px;
    padding-top: 4px;
  }

  .datagrid-header .datagrid-filter-wrapper .dropdown + .icon {
    top: -2px !important;
  }

  .datagrid-header .datagrid-filter-wrapper .timepicker + .icon {
    right: 4px;
    top: -5px;
  }
}

.datagrid-container.medium-rowheight {
  &.has-filterable-columns .is-filterable .datagrid-column-wrapper.l-right-text {
    top: -3px;
  }
}

.datagrid-dropdown-list.extra-small-rowheight .trigger .icon {
  left: 7px !important;
  top: 6px;

  &.search {
    top: 3px;
  }
}

.datagrid-dropdown-list.small-rowheight .trigger .icon {
  top: 9px;
  margin-left: -1px !important;
}

.datagrid.medium-rowheight td.is-editing:not(.datagrid-trigger-cell) input.timepicker {
  margin-top: 3px !important;

  ~ .icon {
    margin-left: 16px !important;
    top: calc(50% - 18px) !important;
  }
}

.datagrid {
  &.extra-small-rowheight {
    tbody tr {
      td.is-editing {
        .datepicker + .btn-icon.trigger {
          margin-top: 1px;
          background-color: transparent;
        }
      }
    }

    td.is-editing {
      .timepicker {
        margin: 0 !important;
        padding: unset !important;
      }
    }

    .datagrid-header th.text-ellipsis .datagrid-column-wrapper {
      .datagrid-header-text {
        margin: 6px 1px 0 !important;
      }
    }

    .datagrid-trigger-cell.has-editor:not(.is-readonly) {
      &.is-fileupload .datagrid-cell-wrapper .icon.icon-error:not(.datagrid-alert-icon) {
        left: 99%;
        margin-top: 1px;
      }

      .datagrid-cell-wrapper {
        .colorpicker-container + .icon.icon-error:not(.datagrid-alert-icon) {
          left: 101%;
          margin-top: 1px;
        }

        .trigger {
          + .icon-search-list + .icon.icon-error:not(.datagrid-alert-icon) {
            left: 96%;
          }

          + .icon-calendar + .icon.icon-error:not(.datagrid-alert-icon) {
            left: 99%;
            margin-top: 1px;
          }

          + .icon-clock + .icon.icon-error:not(.datagrid-alert-icon) {
            left: 97%;
            margin-top: 0;
          }
        }
      }
    }
  }

  &.small-rowheight {
    tbody tr {
      td.is-editing {
        .datepicker {
          height: 26px;
        }
      }
    }

    td.is-editing {
      .timepicker {
        margin-left: 0 !important;
        padding: unset !important;
        width: calc(100% - 25px);
      }
    }

    .datagrid-header th.text-ellipsis {
      .datagrid-column-wrapper .datagrid-header-text {
        margin-inline-start: 1px;
        top: 1px;
        position: relative;
      }
    }
  }

  &.medium-rowheight {
    td.is-editing {
      .timepicker {
        margin-top: 4px;
      }
    }

    .datagrid-trigger-cell.has-editor:not(.is-readonly) {
      &.is-fileupload .datagrid-cell-wrapper .icon.icon-error:not(.datagrid-alert-icon) {
        left: 97%;
        margin-top: 1px;
      }

      .datagrid-cell-wrapper {
        .colorpicker-container + .icon.icon-error:not(.datagrid-alert-icon) {
          left: 100%;
          top: 9px;
        }

        .trigger {
          &.dropdown-trigger:not(.colorpicker-container) + .icon + .icon.icon-error:not(.datagrid-alert-icon) {
            left: 100%;
          }

          + .icon-calendar + .icon.icon-error:not(.datagrid-alert-icon) {
            margin-top: -2px;
            left: 98%;
          }

          + .icon-clock + .icon.icon-error:not(.datagrid-alert-icon) {
            margin-top: -2px;
            left: 97%;
          }
        }
      }
    }
  }
}

// EmptyMessage
.datagrid-container.has-empty-message.is-empty {
  .empty-title {
    font-size: 1.8rem !important;
  }

  &.empty-message-height-small {
    .empty-message {
      top: calc(50% + 33px) !important;
    }

    &.medium-rowheight .empty-message {
      top: calc(50% + 31px) !important;
    }

    &.small-rowheight .empty-message {
      top: calc(50% + 28px) !important;
    }

    &.extra-small-rowheight .empty-message {
      top: calc(50% + 26px) !important;
    }
  }
}

.datagrid-container.extra-small-rowheight.has-filterable-columns .is-filterable .datagrid-filter-wrapper {
  .lookup-wrapper .trigger {
    margin-top: 2px;
    inset-inline-end: -3px;
  }

  .has-close-icon-button .icon {
    right: 21px;
    top: calc(50% + 2px);
  }
}

.datagrid-header .datagrid-filter-wrapper .lookup-wrapper .searchfield-wrapper.has-close-icon-button .icon {
  top: calc(50% - 2px);
  height: 15px;
}

.datagrid-container.small-rowheight.has-filterable-columns .is-filterable .datagrid-filter-wrapper .has-close-icon-button .icon {
  right: 23px;
  top: calc(50% + 2px);
}

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

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

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

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

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

// Process Indivator Formatter
.datagrid > tbody > tr .process-indicator {
  top: 14px;

  &.responsive .lines .indicator.current {
    left: -1px;
    top: -2px;
  }
}

 .datagrid-cell-wrapper .process-indicator {
  top: 7px;
}

.datagrid.small-rowheight,
.datagrid.extra-small-rowheight {
  .datagrid-cell-wrapper .process-indicator {
    top: 7px;
  }
}

.datagrid.medium-rowheight tbody tr td .process-indicator {
  top: 10px;
}

.datagrid.medium-rowheight .chart-completion-target .chart-targeted-text {
  margin-top: -33px;
}

.datagrid.small-rowheight tbody tr td .chart-completion-target {
  top: 6px;
}

.datagrid.extra-small-rowheight tbody tr td .hyperlink {
  margin-top: 0;
}

.datagrid.datagrid.extra-small-rowheight tbody tr td .datagrid-drilldown {
  top: 1px;
}

// Adjust the lookup X
.is-safari {
  .datagrid-header .datagrid-filter-wrapper .lookup-wrapper .searchfield-wrapper.has-close-icon-button .icon {
    top: 1px;
  }

  .datagrid-container {
    &.small-rowheight,
    &.extra-small-rowheight {
      .datagrid-header .datagrid-filter-wrapper {
        .timepicker {
          + .trigger {
            top: -9px;
            margin-left: -22px;
          }
        }
      }
    }
  }
}

// START OF CSS DATAGRID ICON ALIGNMENTS

.datagrid {
  tbody {
    tr.datagrid-row {
      &.is-selected.is-hover-row {
        td .datagrid-cell-wrapper {
          .btn-icon:hover {
            background-color: $datagrid-button-icon-hover-bg-color !important;

            svg {
              color: $datagrid-button-icon-hover-color !important;
              background-color: unset !important;
              box-shadow: none !important;
            }
          }
        }
      }

      td.datagrid-trigger-cell {
        .datagrid-cell-wrapper {
          span {
            vertical-align: middle;
            position: relative;
            top: 0;
          }

          svg.icon:not(.datagrid-alert-icon).icon-clock {
            top: 1.5px;
            left: -1px;
          }
        }

        &.is-editing {
          .datagrid-cell-wrapper {
            span {
              vertical-align: middle;
            }

            .datepicker + button.trigger {
              margin-top: 11px;
              margin-left: 13px;
            }

            .timepicker + button.trigger {
              > svg.icon {
                left: -2px;
              }
            }
          }
        }
      }
    }
  }

  &.extra-small-rowheight {
		tbody {
			tr.datagrid-row {
				td.datagrid-trigger-cell {
					.datagrid-cell-wrapper {
            span {
              font-size: 1.4rem;
              vertical-align: middle;
              top: 0;
            }

            svg.icon:not(.datagrid-alert-icon).icon-clock {
              top: -0.5px;
              left: -5px;
            }
					}

          &.is-editing {
            .datagrid-cell-wrapper {
              span {
                vertical-align: middle;
              }

              input {
                position: relative;
              }

              .datepicker + button.trigger {
                margin-top: 5px;
                margin-left: 5px;
              }

              .timepicker + button.trigger {
                > svg.icon {
                  top: -1px;
                  left: -1px;
                }
              }
            }
          }
				}
			}
		}
	}

	&.small-rowheight {
		tbody {
			tr.datagrid-row {
				td.datagrid-trigger-cell {
					.datagrid-cell-wrapper {
            svg.icon:not(.datagrid-alert-icon).icon-calendar {
              top: -2px;
              left: -5px;
            }

            svg.icon:not(.datagrid-alert-icon).icon-clock {
              top: -2.5px;
              left: -5px;
            }
					}

          &.is-editing {
            .datagrid-cell-wrapper {
              span {
                vertical-align: middle;
                top: 0;
              }

              input {
                position: relative;

                &.datepicker {
                  top: -2px;
                }

                &.timepicker {
                  top: -1px;
                  left: -1px;
                }
              }

              .datepicker + button.trigger {
                margin-left: 7px;
                margin-top: 2px;
              }

              .timepicker + button.trigger {
                top: 4px;
                right: 4.5px;
                margin-top: unset;
                margin-left: unset;

                > svg.icon {
                  top: -0.5px;
                  left: -1.5px;
                }
              }
            }
          }
				}
			}
		}
	}

  &.medium-rowheight {
		tbody {
			tr.datagrid-row {
        td:not(.datagrid-trigger-cell) {
          .datagrid-cell-wrapper {
            line-height: 2;
          }

          &.is-editing {
            .datagrid-cell-wrapper {
              input {
                position: relative;
                top: 1px;
              }
            }
          }
        }

				td.datagrid-trigger-cell {
					.datagrid-cell-wrapper {
            span {
              vertical-align: middle;
              top: 1px
            }


            svg.icon:not(.datagrid-alert-icon).icon-calendar {
              top: 2px;
            }

            svg.icon:not(.datagrid-alert-icon).icon-clock {
              top: 2px;
            }
					}

          &.is-editing {
            .datagrid-cell-wrapper {
              span {
                vertical-align: middle;
              }

              input {
                &.datepicker {
                  margin-top: 3px;
                }

                &.timepicker {
                  margin-top: 3px;
                }
              }

              .datepicker + button.trigger {
                margin-top: 6px;
                margin-left: 13px;
              }

              .timepicker + button.trigger {
                top: 4px;
                right: 8.5px;

                > svg.icon {
                  top: 0;
                }
              }
            }
          }
				}
			}
		}
	}
}

.is-mac {
  .datagrid {
    tbody {
      tr.datagrid-row {
        td.datagrid-trigger-cell {
          &.is-editing {
            .datagrid-cell-wrapper {
              span {
                vertical-align: middle;
              }

              .datepicker + button.trigger {
                margin-top: 12px;
                margin-left: 13px;
              }

              .timepicker + button.trigger {
                margin-left: -1.5px;
                margin-top: 14.5px;
              }
            }
          }
        }
      }
    }

    &.extra-small-rowheight {
      tbody {
        tr.datagrid-row {
          td.datagrid-trigger-cell {
            .datagrid-cell-wrapper {
              svg.icon:not(.datagrid-alert-icon).icon-clock {
                left: -5px;
              }
            }

            &.is-editing {
              .datagrid-cell-wrapper {
                .datepicker + button.trigger {
                  margin-top: 2px;
                  margin-left: 5px;
                }

                .timepicker + button.trigger {
                  margin-left: 3px;
                  margin-top: 2.5px;
                }
              }
            }
          }
        }
      }
    }

    &.small-rowheight {
      tbody {
        tr.datagrid-row {
          td.datagrid-trigger-cell {
            .datagrid-cell-wrapper {
              svg.icon:not(.datagrid-alert-icon).icon-calendar {
                top: -1px;
                left: -2px;
              }

              svg.icon:not(.datagrid-alert-icon).icon-clock {
                top: -2.5px;
                left: -4px;
              }
            }

            &.is-editing {
              .datagrid-cell-wrapper {
                span {
                  vertical-align: middle;
                }

                .datepicker + button.trigger {
                  margin-top: 0;
                  margin-left: 11px;
                }

                .timepicker + button.trigger {
                  top: -6.5px;
                }
              }
            }
          }
        }
      }
    }

    &.medium-rowheight {
      tbody {
        tr.datagrid-row {
          td.datagrid-trigger-cell {
            .datagrid-cell-wrapper {
              span {
                top: -1px;
                position: relative;
              }

              svg.icon:not(.datagrid-alert-icon).icon-calendar {
                top: 1px;
                left: 1px;
              }

              svg.icon:not(.datagrid-alert-icon).icon-clock {
                top: 0.5px;
                left: -1.5px;
              }
            }

            &.is-editing {
              .datagrid-cell-wrapper {
                span {
                  vertical-align: middle;
                }

                .datepicker + button.trigger {
                  margin-top: 11px;
                  margin-left: 11px;
                }

                .timepicker + button.trigger {
                  top: 4px;
                  right: 9px;
                }
              }
            }
          }
        }
      }
    }
  }
}

html[dir='rtl'] {
  .datagrid-header th.text-ellipsis .datagrid-column-wrapper .datagrid-header-text {
    margin-block: 6px 0;
    margin-inline: 1px 0;
  }

  .sort-indicator {
    margin-block-start: 4px;
  }

  .datagrid-header .datagrid-filter-wrapper .dropdown > span {
    width: calc(100% - 20px);
  }

  .datagrid-header .datagrid-filter-wrapper div.dropdown + .icon {
    left: 5px;
  }

  .datagrid-container.extra-small-rowheight .sort-indicator {
    left: 8px;
    position: relative;
  }

  .datagrid-container.extra-small-rowheight th .handle .icon {
    top: 3px !important;
  }

  .datagrid > tbody > tr .process-indicator {
    top: 12px;
  }

  .datagrid.medium-rowheight tbody tr td .process-indicator {
    top: 8px;
  }

  .datagrid.small-rowheight,
  .datagrid.extra-small-rowheight {
    tbody tr td .process-indicator {
      top: 5px;
    }
  }

  th .datagrid-column-wrapper.l-right-text {
    .datagrid-header-text {
      top: 8px;
    }
  }

  .datagrid {
    &.extra-small-rowheight {
      .datagrid-header th.text-ellipsis .datagrid-column-wrapper {
        padding: 0 8px 0 0;
      }

      .datagrid-header .datagrid-column-wrapper.l-center-text .sort-indicator {
        left: 12px;
        top: 6px;
        position: absolute;
      }

      th .datagrid-column-wrapper .datagrid-header-text {
        padding: 0 5px;
      }

      .datagrid-header {
        .datagrid-column-wrapper {
          &.l-right-text {
            .sort-indicator {
              position: relative;
              right: 8px;
              top: 1px;
            }
          }
        }
      }

      .datagrid-header th.text-ellipsis .datagrid-column-wrapper {
        .datagrid-header-text {
          inset-block-start: auto;
        }
      }
    }

    &.small-rowheight {
      .datagrid-header th.text-ellipsis .datagrid-column-wrapper .datagrid-header-text {
        margin-inline-start: -1px !important;
        margin-block-start: 3px !important;
      }
    }
  }

  .datagrid > tbody > tr .process-indicator {
    &.responsive .lines .indicator.current {
      left: 0;
      top: 0;
    }
  }

  .datagrid {
    td.is-editing {
      input.lookup {
        + .trigger {
          margin-left: 6px;
          margin-top: 10px;

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

      input.timepicker {
        + .trigger {
          margin-left: 7px;
          margin-top: 13px;

          > .icon {
            top: 0;
          }
        }
      }
    }
  }

  .datagrid.medium-rowheight {
    .is-editing .datepicker {
      + .trigger.btn-icon {
        margin-top: 5px;
      }
    }

    .datagrid-trigger-cell.has-editor {
      .datepicker ~ .trigger {
        left: -5px;
        top: 4px;
      }

      .icon-error {
        left: 0 !important;
        margin-top: 0 !important;
        top: 11px;
      }
    }

    .datagrid-cell-wrapper {
      .dropdown-trigger:not(.colorpicker-container) + .icon {
        top: 2px !important;
        left: -4px !important;
      }
    }
  }

  .datagrid.small-rowheight {
    .is-editing .datepicker {
      + .trigger.btn-icon {
        left: -7px;
        margin-top: 0;
        top: 3px;
      }
    }

    .datagrid-trigger-cell.has-editor {
      .icon-calendar {
        top: 0 !important;
      }

      .icon-error {
        top: 6px;
      }
    }
  }

  .datagrid {
    td.error {
      .datagrid-cell-wrapper {
        .trigger + .icon-calendar + .icon-error {
          left: 0;
          margin-top: 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: 27px !important;
          }
        }
      }
    }
  }

  // Small mode adjustments
  .datagrid-container {
    &.small-rowheight {
      .datagrid-header .datagrid-filter-wrapper {
        .datepicker,
        .timepicker {
          + .trigger {
            left: 16px;
            right: auto;
          }
        }
      }

      td.is-editing {
        input.lookup {
          + .trigger {
            margin-left: 6px;
            margin-top: -1px;

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

        input.timepicker {
          + .trigger {
            margin-left: 5px;
            margin-top: -2px;
          }
        }
      }
    }

    &.extra-small-rowheight {
      td.is-editing {
        .datepicker {
          + .trigger {
            margin-top: 3px;
          }
        }

        input.timepicker {
          + .trigger {
            margin-left: 5px;
          }
        }
      }
    }

    &.small-rowheight,
    &.extra-small-rowheight {
      .datagrid-header .datagrid-filter-wrapper {
        .lookup-wrapper {
          .trigger {
            left: 0;
            margin-left: 2px;
            margin-right: auto;
            margin-top: 2px;
          }
        }
      }
    }

    &.medium-rowheight {
      .datagrid-trigger-cell {
        .icon.icon-calendar {
          left: auto;
          right: 3px;
        }
      }

      td.is-editing {
        .datepicker {
          ~ .trigger {
            margin-left: auto;
            margin-right: 17px;
          }
        }

        input.lookup {
          padding: 0;
          margin-top: 2px;

          + .trigger {
            margin-left: -4px !important;
            margin-top: 1px;
            left: -3px;

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

        input.timepicker {
          + .trigger {
            margin-top: 0;
          }
        }
      }
    }
  }

  &.is-firefox {
    .datagrid.medium-rowheight {
      .datagrid-trigger-cell.has-editor {
        &.is-editing .datepicker + .trigger.btn-icon {
          margin-top: 5px;
        }
      }
    }

    .datagrid.medium-rowheight {
      .datagrid-trigger-cell.has-editor {
        &.is-editing .datepicker + .trigger.btn-icon {
          margin-top: 2px;
        }
      }
    }

    .datagrid.extra-small-rowheight {
      .datagrid-trigger-cell.has-editor:not(.is-readonly) {
        .datagrid-cell-wrapper {
          .trigger + .icon.icon-calendar {
            top: -2.5px;
          }
        }
      }
    }
  }
}

.android.is-firefox {
  .datagrid-header .datagrid-filter-wrapper {
    .dropdown + .icon:not(.close) {
      top: 1px;
    }
  }
}

