@use "@linzjs/lui/dist/scss/Core" as lui;
@use "ag-grid-community/styles" as ag;

// ag-grid likes to add 1px to this, so we subtract to compensate
$grid-base-font-size: calc(#{lui.$base-font-size} - 1px);

// GridTheme that support ag-grid v29 new SASS API
@include ag.grid-styles(
  (
    themes: (
      'step-compact.theme-specific': (
        extend-theme: alpine,
        row-height: 36px,
        header-height: 36px,
        font-size: calc($grid-base-font-size - 2px),
      ),
      'step-default.theme-specific': (
        extend-theme: alpine,
        row-height: 40px,
        header-height: 40px,
        font-size: calc($grid-base-font-size),
      ),
      'step-view-list-default.theme-specific': (
        extend-theme: alpine,
        row-height: 60px,
        header-height: 40px,
        font-size: calc($grid-base-font-size),
        header-background-color: lui.$iceberg,
        cell-horizontal-border: none,
      ),
    ),

    input-focus-border-color: lui.$sea,
    borders-input: 1px solid,
    input-border-color: lui.$silver,
    alpine-active-color: lui.$sea,
    background-color: lui.$white,
    border-color: lui.$dew,
    borders: false,
    borders-critical: true,
    borders-secondary: false,
    cell-horizontal-border: solid lui.$dew,
    cell-horizontal-padding: lui.$unit-sm,
    data-color: lui.$charcoal,
    foreground-color: lui.$charcoal,
    font-family: (
      "Open Sans",
      system-ui,
      sans-serif,
    ),
    font-size: 1rem,
    header-background-color: lui.$white,
    header-foreground-color: lui.$surfie,
    odd-row-background-color: lui.$white,
    row-hover-color: lui.$hint,
    secondary-border-color: lui.$dew,
    selected-row-background-color: lui.$polar,
  )
);

.ag-theme-step-default.theme-specific,
.ag-theme-step-compact.theme-specific {
  div.ag-center-cols-viewport {
    // when using domLayout={"autoHeight"}, ag grid has a default min-height
    // set to 150px so the !important is necessary here
    min-height: 40px !important;
  }
  // fix alignment of cell content when grabber is present
  .ag-header-cell-comp-wrapper {
    justify-content: center;
  }

  .ag-header-select-draggable .ag-header-cell-comp-wrapper {
    justify-content: end;
  }

  .ag-header-cell {
    font-size: 14px;
    font-weight: 600;

    // fix: Display descender line
    padding: 0 11px;

    .LuiIcon {
      fill: lui.$surfie;
    }
  }

  .ag-header .ag-header-cell[aria-colindex="1"] {
    padding-left: 17px;
    padding-right: 15px;
  }

  .ag-text-area-input:focus {
    border-color: lui.$sea;
  }

  .ag-cell[col-id="selection"] {
    display: flex; // Fix that when you click below checkbox it doesn't process a click
  }

  // Fix that when you click below checkbox it doesn't process a click
  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
    height: auto;
  }

  .ag-row:last-of-type {
    border-bottom: 1px solid lui.$dew;
  }

  .ag-cell-label-container {
    padding: 8px 0;

    // Help ag-grid to calculate column height in react portal
    height: fit-content;
  }


  .ag-cell[aria-colindex="1"] {
    padding-left: lui.$unit-rg;
  }

  .ag-cell {
    padding-left: 11px;
    padding-right: 11px;
    display: flex;
    align-items: center;
  }

  .ag-cell-wrap-text {
    word-break: break-word;
  }

  .ag-cell.ag-cell-popup-editing,
  .ag-cell.ag-selected-for-edit,
  .ag-cell-inline-editing {
    padding-left: 9px;
    padding-right: 9px;
    background: rgb(72 160 244 / 20%);

    // These are important, it needs to override ag-grid to work
    border: 3px solid #48a0f4 !important;
    border-right: 3px solid #48a0f4 !important;
  }

  .ag-row .ag-cell-data-changed {
    // ag-grid natively has !important on this style so we have to use it here :(
    background-color: lightgoldenrodyellow;
  }

  .ag-body-horizontal-scroll-viewport {
    // It's set to scroll by default, but this causes issues with selecting the last row
    overflow-x: auto;
  }

  .ag-header-group-cell {
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 12px;
    height: 28px;
    font-weight: 800;
    letter-spacing: 2px;
    justify-content: center;

    &.ag-header-group-cell-with-group {
      background-color: lui.$iceberg;
    }
  }

  .ag-cell {
    font-weight: 400;
  }

  .ag-cell-value {
    display: flex;
    align-items: center;
  }

  .ag-cell .GridCell-editableIcon {
    fill: lui.$silver;
    visibility: hidden;
  }

  .ag-cell:hover .GridCell-editableIcon,
  .ag-cell.ag-cell-focus .GridCell-editableIcon {
    visibility: visible;
  }

  .ag-drag-handle.ag-row-drag {
    opacity: 0;

    .ag-icon-grip {
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%239999B3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2Zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z' /%3E%3C/svg%3E");
      background-repeat: no-repeat no-repeat;
      background-position: center center;
      background-size: cover;
      color: transparent;
    }
  }

  .ag-row:hover {
    .ag-drag-handle.ag-row-drag {
      opacity: 1;
      transition: opacity 0.2s ease-in-out;
    }
  }

  .GridCell-readonly {
    color: lui.$fuscous;
  }

  .ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
    visibility: hidden;
  }

  .ag-cell:hover .Grid-displayWhenCellFocused {
    visibility: inherit;
  }

  .ag-cell-wrapper {
    width: 100%;
  }

  .ag-row-highlight-above::after, .ag-row-highlight-below::after {
    content: '';
    height: 2px;
    background-color: transparent;
  }

  .ag-row-highlight-above::after {
    top:-3px; // moves the top highlight to the position of the bottom highlight
    border-top: 2px dashed lui.$andrea;
  }

  .ag-row-highlight-above:first-of-type::after {
    top:0; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
  }

  .ag-row-highlight-below::after {
    border-bottom: 2px dashed lui.$andrea;
  }

  .ag-pinned-left-header,
  .ag-pinned-right-header,
  .ag-pinned-right-cols-container,
  .ag-pinned-left-cols-container {
    position: relative;
    z-index: 1;
    box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);
  }

  .ag-pinned-left-header,
  .ag-pinned-left-cols-container {
      clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
  }

  .ag-pinned-right-header,
  .ag-pinned-right-cols-container {
    clip-path: polygon(-20% 0%, 100% 0%, 100% 100%, -20% 100%);
  }
}

.ag-theme-step-view-list-default.theme-specific {

  .ag-header-cell {
    font-size: 14px;
    font-weight: 600;

    // fix: Display descender line
    padding: 0 12px;

    .LuiIcon {
      fill: lui.$surfie;
    }
  }

  .ag-header .ag-header-cell[aria-colindex="1"] {
    padding-left: 32px;
    padding-right: 12px;
  }

  .ag-header-group-cell {
    font-weight: normal;
    font-size: 22px;
  }

  .ag-header-cell {
    font-size: 14px;
  }

  .ag-row .ag-cell:first-of-type {
    padding-left: 32px;
  }

  .ag-row .ag-cell:last-of-type {
    padding-right: 32px;
  }
}