@use 'libs/components/theme/src/lib/styles/variables' as variables;
@use './ag-grid-extra' as ag-grid-extra;
@use './variables' as sky-ag-grid-variables;

.ag-theme-sky-data-grid-modern-dark,
.ag-theme-sky-data-grid-modern-dark-compact {
  border-top: 2px solid transparent;

  .ag-row-hover::before {
    background-color: transparent;
  }

  .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
    align-items: flex-start;
  }

  .ag-root-wrapper {
    border: none;
  }

  .ag-cell {
    border-block-end: none;
    border-block-start: none;
  }

  .ag-cell.sky-ag-grid-cell-invalid {
    border: 1px solid var(--sky-highlight-color-danger);
  }

  .ag-row:not(.ag-row-first) {
    border-top: none;
  }

  .ag-header,
  .ag-row {
    border-bottom-style: dotted;

    + .ag-row-last {
      border-bottom-style: dotted;
    }
  }
}

.ag-theme-sky-data-entry-grid-modern-dark,
.ag-theme-sky-data-entry-grid-modern-dark-compact {
  @include ag-grid-extra.ag-grid-extra-dark();

  border-top: sky-ag-grid-variables.$sky-standard-border;

  .ag-popup {
    .ag-popup-editor {
      background-color: transparent;

      sky-input-box {
        --sky-background-color-input-box-group: var(--ag-background-color);
      }
    }

    .ag-select-list {
      .ag-select-list-item {
        cursor: pointer;
        border: 1px solid transparent;

        &:focus-visible,
        &:hover,
        &.ag-active-item {
          background-color: transparent;
          border-color: variables.$sky-theme-modern-border-color-primary-dark;
        }
      }
    }
  }

  .ag-cell:not(.ag-cell-wrap-text) .ag-cell-wrapper {
    align-items: flex-start;
  }

  @include sky-ag-grid-variables.skyux-cell-wrap-text(
    sky-ag-grid-variables.$sky-cell-wrap-text-padding-modern,
    sky-ag-grid-variables.$sky-cell-wrap-text-line-height-modern
  );

  // set 1px of top and bottom padding when a cell is not focused and remove it when it is focused to prevent the 2px border causing contents to shift
  .ag-cell {
    padding-top: 1px;
    padding-bottom: 1px;
    border-right-color: variables.$sky-theme-modern-mode-dark-border-color-neutral-medium;
  }

  .ag-cell:hover {
    border: 1px solid
      variables.$sky-theme-modern-mode-dark-background-color-primary-dark;
  }

  .ag-cell.sky-ag-grid-cell-invalid {
    border: 1px solid var(--sky-highlight-color-danger);
  }

  .sky-ag-grid-cell-editable {
    .ag-select {
      .ag-picker-field-display {
        margin-top: 2px;
        margin-left: 9px;
      }
    }
  }

  .sky-ag-grid-cell-uneditable:not(.sky-ag-grid-cell-row-selector) {
    background-color: variables.$sky-theme-modern-mode-dark-background-color-elevation-24;
  }

  input {
    background-color: variables.$sky-theme-modern-mode-dark-background-color-page-default;
    color: variables.$sky-theme-modern-mode-dark-font-body-default-color;
  }

  .ag-row:not(.ag-row-first) {
    border-top: none;
  }

  .ag-row {
    &.ag-row-focus {
      z-index: 1;
    }

    .ag-cell.ag-cell-focus {
      .ag-select {
        .ag-picker-field-display {
          margin-top: 6px;
          margin-left: 9px;
        }
      }
    }
  }
}

.ag-theme-sky-data-grid-modern-dark,
.ag-theme-sky-data-entry-grid-modern-dark {
  @include sky-ag-grid-variables.skyux-cell-wrap-text(
    sky-ag-grid-variables.$sky-cell-wrap-text-padding-modern,
    sky-ag-grid-variables.$sky-cell-wrap-text-line-height-modern
  );
}

.ag-theme-sky-data-grid-modern-dark-compact,
.ag-theme-sky-data-entry-grid-modern-dark-compact {
  @include sky-ag-grid-variables.skyux-cell-wrap-text(
    sky-ag-grid-variables.$sky-cell-wrap-text-padding-modern-compact,
    sky-ag-grid-variables.$sky-cell-wrap-text-line-height-modern
  );
}
