/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '../core/styles/border';
@use '../core/styles/elevation';
@use '../core/styles/spacing';
@use '../core/styles/theme';
@use '../core/styles/typography';
@use '../core/styles/animation';
@use './variables';

@mixin host {
  display: block;
}


// The base styles for the `<table>` element.
@mixin base {
  width: 100%;
  border-collapse: collapse;
}

// The base styles for the rows of the table.
@mixin row-base($cell-class-name, $select-class-name) {
  // Finds the first table cell that is not the select cell
  > .#{$cell-class-name}:not(.#{$select-class-name}):first-child,
  .#{$cell-class-name}.#{$select-class-name} + .#{$cell-class-name}:not(.#{$select-class-name}) {
    padding-right: #{spacing.variable(large)};
  }

  > .#{$cell-class-name}:last-child {
    padding-right: #{spacing.variable(large)};
  }
}

@mixin fixed {
  position: relative;
}

@mixin fixed-head-cell {
  position: sticky;
  top: 0;

  background: #{theme.variable(surface)};

  z-index: #{elevation.z-index-variable(surface)};

  &::after {
    content: '';

    border-bottom-width: 1px;
    border-style: solid;
    border-color: #{theme.variable(outline)};
    border-width: 0;

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    height: 1px;

    box-sizing: border-box;
  }
}

// The dense styles for all table rows.
@mixin row-dense {
  height: variables.$thead-dense-row-height;
}

// The roomy styles for all table rows.
@mixin row-roomy {
  height: variables.$thead-roomy-row-height;
}

/// The base styles for the cells within the table.
@mixin cell-base($select-class-name) {
  padding-right: #{spacing.variable(xxxlarge)};
  
  border-bottom-width: #{border.variable(thin)};
  border-bottom-style: solid;
  border-bottom-color: #{theme.variable(outline)};

  &:first-child:not(.#{$select-class-name}) {
    padding-left: #{spacing.variable(large)};
  }
}

@mixin cell {
  padding-right: #{spacing.variable(xxxlarge)};
  padding-left: #{spacing.variable(large)};

  border-bottom-width: #{border.variable(thin)};
  border-bottom-style: solid;
  border-bottom-color: #{theme.variable(outline)};
}

// Creates styles for container element that is placed within each cell.
@mixin cell-container {
  display: flex;
  align-items: center;
}

// Centers the content within a table cell.
@mixin cell-center {
  justify-content: center;
}

// Right justifies the content within a table cell.
@mixin cell-right {
  justify-content: flex-end;
}

// Provides base styles for the select checkbox container element.
@mixin cell-select {
  text-align: center !important;
  box-sizing: border-box;
  width: 66px;
  padding-right: #{spacing.variable(small)};
  padding-left: #{spacing.variable(medium)};
}

// Styles the select checkbox wrapper element.
@mixin cell-checkbox-container {
  display: flex;

  &--align-left {
    justify-content: flex-start;
  }
  &--align-right {
    justify-content: flex-end;
  }
  &--align-center {
    justify-content: center;
  }
}

@mixin cell-resizing {
  display: block;
  height: 100%;
  position: absolute;
  right: 4px;
  top: 0;
  bottom: 0;
  border-right-width: #{border.variable(medium)};
  border-right-style: solid;
  border-right-color: #{theme.variable(primary)};
}

// The default table head row styles.
@mixin head-row {
  height: variables.$thead-row-height;
}

@mixin head-filter {
  // TODO: use element-specific variables when passthrough tokens are supported
  // --forge-text-field-height: 40px;
  // --forge-select-height: 40px;
  --forge-field-height: 40px;

  .forge-table-head__cell-container {
    padding: #{spacing.variable(xsmall)} 0;
  }
}

/// Removes the border on all `th` and `td` elements.
@mixin row-no-border {
  th, td {
    border-bottom: none;
  }
}

// The base styles for the cells within the table head.
@mixin head-cell {
  color: #{theme.variable(text-medium)};
  font-weight: bold;
  text-align: left;
  font-size: #{typography.font-size-relative('0750')};
  box-sizing: border-box;
}

// The sorted state styles for the column header cells.
@mixin head-cell-text-sorted {
  color: #{theme.variable(text-high)};
  font-weight: 700 !important;
}

// Creates styles for the sort icon within the table head cells.
@mixin head-cell-sort-icon {
  color: #{theme.variable(text-high)};
  font-size: 18px !important;
  height: 18px;
  width: 18px;
  margin-left: 5px;
  transition: transform #{animation.variable(duration-short4)} #{animation.variable(easing-accelerate)};
  display: none !important;
  font-weight: 700;
}

// The active sort icon styles.
@mixin head-cell-sort-icon-active {
  display: inline !important;
}

// Rotates the sort icon using a transform when in ascending direction.
@mixin head-cell-sort-icon-ascending {
  transform: rotate(180deg);
}

// The table head cell wrapper element styles for alignment purposes.
@mixin head-cell-container {
  display: flex;
  align-items: center;
}

// Base styles for a table header cell when the column is sortable.
@mixin head-cell-sortable($icon-class-name, $sort-order-class-name) {
  cursor: pointer;

  :hover {
    .#{$icon-class-name},
    .#{$sort-order-class-name} {
      color: #{theme.variable(text-medium)};
    }
  }
}

@mixin head-cell-sortable-button {
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: inherit;
  margin: inherit;
  padding-block: #{spacing.variable(xxsmall)};
  padding-inline: 0;
  font: inherit;
  color: inherit;
  width: 100%;
  outline-offset: #{spacing.variable(xxsmall)};
}

// The base table body row styles for row interactions.
@mixin body-row {
  height: variables.$tbody-row-height;
  transition: background-color #{animation.variable(duration-short4)} #{animation.variable(easing-standard)};

  &:hover {
    background-color: var(--forge-table-theme-row-hover-background, variables.$row-hover-background);
  }

  &--selected:hover {
    background-color: var(--forge-table-theme-row-selected-hover-background, variables.$row-selected-hover-background);
  }
}

// Sets the selected state styles on a row.
@mixin body-row-selected {
  background-color: var(--forge-table-theme-row-selected-background, variables.$row-selected-background);

  &:hover {
    background-color: var(--forge-table-theme-row-selected-hover-background, variables.$row-selected-hover-background);
  }
}

// Sets the styles for a clickable row.
@mixin body-row-clickable {
  cursor: pointer;

  &:active {
    background-color: var(--forge-table-theme-row-active-background, variables.$row-active-background);
  }
  
  &.forge-table-body__row--selected:active {
    background-color: var(--forge-table-theme-row-selected-active-background, variables.$row-selected-active-background);
  }
}

// The cell styles for all tbody rows.
@mixin body-row-cell {
  color: #{theme.variable(on-surface)};
  font-size: variables.$cell-font-size;
}

@mixin resize-handle {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  border-right-width: #{border.variable(medium)};
  border-right-style: solid;
  border-right-color: #{theme.variable(primary)};
  box-sizing: border-box;
  margin-right: #{spacing.variable(xxsmall)};
  transition-property: border-right-width;
  transition-duration: #{animation.variable(duration-medium1)};
  transition-timing-function: #{animation.variable(easing-accelerate)};
}

@mixin resize-handle-hover {
  border-right-width: #{border.variable(thick)};
  cursor: col-resize;
}

@mixin forge-table {
  @include base;

  thead {
    tr {
      @include head-row;

      th {
        @include cell;
        @include head-cell;
      }
    }
  }

  tbody {
    tr {
      @include body-row;

      td {
        @include cell;
        @include body-row-cell;
      }
    }
  }
}
