@use "sass:math";
@use "../variables" as Vars;
@use "./context-menu" as CtxMenu;

$checkbox-text-gap: Vars.$slab-checkbox-height * 1.5 !default;

$icon-rowaction-font-size: 20px;

$context-menu-width: 39px;


.ag-theme-alpine .ag-row-selected::before {
  background-color: var(--slab_table_row_selection_background) !important;
}

.ag-theme-alpine .ag-row {
  font-size: Vars.$slab-base-font-size !important;
  border-bottom: unset;
}


.ag-theme-alpine .ag-header, .ag-theme-alpine .ag-column-drop-cell {
  background-image: none !important;
}

.ag-theme-alpine .ag-keyboard-focus .ag-header-cell:focus {
  border: 1px dashed var(--primary_light) !important;
}

.ag-theme-alpine .ag-keyboard-focus .ag-header-cell:focus::after {
  border: 1px dashed var(--primary_light) !important;
  content: inherit;
}

.ag-root.ag-layout-normal {
  background: var(--slab_background_primary);
}

@mixin ag-header-row() {
  .ag-header-row {
    line-height: Vars.$grid-header-line-height;

    .ag-header-cell {
      overflow: hidden;
      border-color: var(--slab_table_border_color);
      font-weight: normal;
      text-align: left;
      padding: 0;

      .ag-header-select-all {
        margin-left: 5px;
      }

      .slab-grid-header-context-menu {
        display: flex;
        height: 100%;

        .slab-context-menu {
          height: 100%;
          min-width: $context-menu-width;
          width: $context-menu-width;

          .icon-context-menu {
            padding-top: math.ceil(math.div((Vars.$grid-header-height - CtxMenu.$slab-icon-context-menu-font-size), 2)) - 5;
          }
        }

        .slab-grid-header-context-menu-label {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
        }
      }

      .ag-header-cell-label {
        padding: 0 5px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        > span {
          height: auto;
        }
      }

      .ag-header-cell-resize {
        cursor: ew-resize;
        border-right: 5px solid var(--slab_table_border_color);
      }
    }
  }
}


@mixin ag-row() {
  .ag-row {

    .icon-context-menu {
      padding-top: math.ceil(math.div((Vars.$grid-cell-height - CtxMenu.$slab-icon-context-menu-font-size), 2));
    }

    &.ag-row-selected {
      background-color: var(--slab_table_row_selection_background) !important;
      color: var(--slab_table_row_selection_foreground);

      .icon-context-menu {
        color: var(--slab_table_row_selection_foreground);
      }

      &.ag-row-focus {
        opacity: 0.8;
      }

      &.ag-row-hover {
        opacity: 0.8;
      }
    }

    &:not(.ag-row-selected) {
      &.ag-row-odd {
        background-color: var(--slab_table_row_odd_background);
      }

      &.ag-row-even {
        background-color: var(--slab_table_row_even_background);
      }

      &.ag-row-focus {
        background-color: var(--primary_lighter);
      }
    }


    .ag-cell {
      display: grid;
      line-height: Vars.$grid-cell-height;
      border: none;
      padding: 0 5px;
      outline-width: 0;

      &.ag-cell-last-left-pinned {
        border-right: 1px solid var(--slab_table_border_color) !important;
      }

      &.ag-cell-focus {
        border: 1px dashed var(--primary_light) !important;
      }

      &.ag-cell-wrapper .ag-drag-handle.ag-row-drag {
        display: none;
      }

      .ag-icon {
        visibility: hidden;
      }

    }

    .ag-cell-inline-editing {
      height: Vars.$grid-cell-height;
      background: var(--slab_background_primary);
      padding: 0;
    }
  }
}

.ag-bl-full-height {
  overflow: hidden;
}

.ag-theme-alpine {
  .ag-root-wrapper {
    border: none !important;
  }

  .ag-ltr .ag-root {
    border: none;
    overflow: hidden;
    font: normal Vars.$slab-base-body-font-size Vars.$slab-base-body-font-family;

    .ag-header {

      border-bottom: none;
      font: normal Vars.$slab-base-body-font-size Vars.$slab-base-body-font-family;

      .ag-header-viewport, .ag-pinned-left-header {

        .ag-header-container {
          @include ag-header-row()
        }
      }

      .ag-pinned-left-header {
        @include ag-header-row()
      }

    }

    .ag-body-viewport {
      @include ag-row()
    }

    .ag-body-horizontal-scroll {
      .ag-horizontal-left-spacer {
        overflow-x: auto;
        border-right: none;
        background-color: #f6f6f6;
      }
    }

    .ag-horizontal-left-spacer {
      background: transparent !important;
    }
  }

  .ag-row-drag {
    background: none;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .ag-pinned-left-header {
    border-right: solid 1px;
    border-right-color: var(--slab_table_border_color) !important;
  }

  .ag-header-cell-text {
    color: var(--slab_foreground_primary);
  }

  .ag-cell {
    border-right: none !important;
  }

  .ag-header {
    border-bottom: solid 1px var(--slab_table_border_color) !important;
    border-top: solid 1px var(--slab_table_border_color) !important;
  }

  .ag-header-cell::after,
  .ag-header-group-cell::after {
    background: var(--slab_background_primary) !important;
  }

  .ag-header-group-cell {
    padding-left: 5px !important;
    padding-right: 5px !important;
    .ag-header-cell-comp-wrapper {
      justify-content: center !important;
      font-weight: normal;
    }
  }

  .ag-header-cell-label {
    flex-direction: row !important;
    justify-content: left !important;
    align-items: center !important;
  }

}

.slab-remove-top-header {
  .ag-header {
    border-top: solid 1px var(--slab_background_primary) !important;
  }
}

.height-hidden { //Style for the hidden element to get the proper height from Typescript
  display: none;
  line-height: Vars.$grid-cell-height; //Table Row Height
  height: Vars.$grid-header-height; //Table Header Height
}

systelab-spinner-cell {
  display: flex;
}