// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @summary Initializes data table
 *
 * @name base
 * @selector .slds-table
 * @restrict table
 * @support dev-ready
 * @variant
 */
.slds-table {
  // scss-lint:disable SelectorDepth
  background-color: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  font-size: inherit; // forces table to respect body font

  // Cells
  th,
  td {
    padding: $table-cell-spacing;
    white-space: nowrap;
    position: relative;
  }

  // Table Heading Cells
  th {
    font-weight: $font-weight-regular;

    &:focus {
      outline: 0;
    }
  }

  thead th {
    background-color: var(--slds-g-color-neutral-base-95, #{$table-color-background-header});
    color: var(--slds-g-color-neutral-base-30, #{$table-color-text-header});
    padding: $table-cell-spacing;
    font-weight: $font-weight-bold;
    line-height: normal;
  }

  /**
   * Default Table Row Hover
   *
   * @selector .slds-no-row-hover
   * @restrict .slds-table
   * @modifier
   */
  &:not(.slds-no-row-hover) tbody tr:hover,
  &:not(.slds-no-row-hover) tbody tr:focus {

    outline: 0;

    > td,
    > th {
      background-color: var(--slds-g-color-neutral-base-95, #{$color-background-row-hover});
    }
  }

  &:not(.slds-no-row-hover) tbody tr:focus {
    box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
  }

  /**
   * Selected Table Row + Hover
   *
   * @selector .slds-is-selected
   * @restrict .slds-table tr
   * @modifier
   */
  tbody tr.slds-is-selected,
  &:not(.slds-no-row-hover) tr.slds-is-selected:hover {

    > td,
    > th {
      background-color: var(--slds-g-color-neutral-base-95, #{$color-background-row-selected});
    }

    a {
      color: var(--slds-g-link-color-focus, #{$color-text-link-active});

      &[aria-disabled="true"] {
        color: var(--slds-g-color-neutral-base-80, #{$color-text-button-default-disabled});
        cursor: default;
      }
    }
  }

  /**
   * By default, nowrap is applied
   *
   * @selector .slds-cell-wrap
   * @restrict .slds-table th, .slds-table td
   * @modifier
   */
  .slds-cell-wrap {
    white-space: pre-line;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  // Reduce cell to the width of its content, if space is available
  .slds-cell-shrink {
    width: 1%;
  }

  /**
   * Use to add a left padding buffer to cells
   *
   * @selector .slds-cell-buffer_left
   * @restrict .slds-table th, .slds-table td
   * @modifier
   */
  .slds-cell-buffer_left,
  .slds-cell-buffer--left {
    padding-left: $spacing-large;
  }

  /**
   * Use to add a right padding buffer to cells
   *
   * @selector .slds-cell-buffer_right
   * @restrict .slds-table th, .slds-table td
   * @modifier
   */
  .slds-cell-buffer_right,
  .slds-cell-buffer--right {
    padding-right: $spacing-large;
  }

  tbody {
    // Start the counter
    tr {
      counter-increment: row-number;
    }
  }

  .slds-row-number {
    // Add the counter number
    &:after {
      content: counter(row-number);
    }
  }

  /**
   * Focus state on a cell
   *
   * @selector .slds-has-focus
   * @restrict .slds-table th, .slds-table td
   * @modifier
   */
  th:focus,
  [role="gridcell"]:focus {
    outline: 0;
  }

  th:focus,
  th.slds-has-focus,
  [role="gridcell"]:focus,
  [role="gridcell"].slds-has-focus {
    box-shadow: var(--slds-g-shadow-inset-inverse-focus-1, #{$shadow-button-focus});

    /**
    * Use when cells are in action mode
    *
    * @selector .slds-cell_action-mode
    * @restrict .slds-table th, .slds-table td
    * @modifier
    */
    &.slds-cell_action-mode {
      border-bottom: 3px solid var(--slds-g-color-brand-base-50, #{$color-border-brand-dark});
    }
  }

  th:focus,
  th.slds-has-focus {
    box-shadow: var(--slds-g-shadow-inset-inverse-focus-1, #{$shadow-button-focus});
  }

  th:active,
  [role="gridcell"]:active {
    box-shadow: none;
  }

  .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux {
    margin-right: 0;
  }
}

/**
 * Add left and right padding to the first and last cells of a table
 *
 * @selector .slds-table_cell-buffer
 * @restrict .slds-table
 * @required
 * @modifier
 */
.slds-table_cell-buffer,
.slds-table--cell-buffer {

  // First cells in a row
  tr > th:first-child,
  tr > td:first-child {
    padding-left: $spacing-large;
  }

  // Last cells in a row
  tr > th:last-child,
  tr > td:last-child {
    padding-right: $spacing-large;
  }
}

/**
 * Add vertical borders to a table
 *
 * @selector .slds-table_bordered
 * @restrict .slds-table
 * @modifier
 */
.slds-table_bordered,
.slds-table--bordered {
  border-collapse: separate;
  // scss-lint:disable SelectorDepth
  border: {
    top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
    bottom: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  }

  // More than one row in thead
  thead > tr + tr > th {
    border-top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  }

  // Cells
  tbody td,
  tbody th {
    border-top: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  }

  // Default Table Row Hover
  //
  // Checks if .no-row-hover is applied to parent table
  // Applies hovers to only <th> and <td> within <tbody>
  // Also checks that the <th> and <td> do not have the class .slds-has-focus
  // This retains the selected state when a row is hovered
  //
  // Box shadow used to eliminate jumpiness on hover
  &:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-has-focus),
  &:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-has-focus),
  &:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-has-focus),
  &:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-has-focus) {
    box-shadow:
      var(--slds-g-color-border-base-1, #{$color-border}) 0 ($border-width-thin * -1) 0 inset,
      var(--slds-g-color-border-base-1, #{$color-border}) 0 ($border-width-thin) 0 inset;
  }
}

/**
 * Add column borders
 *
 * @selector .slds-table_col-bordered
 * @restrict .slds-table
 * @modifier
 */
.slds-table_col-bordered,
.slds-table--col-bordered {

  td + td,
  th + th,
  th + td,
  td + th {
    border-left: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
  }
}

/**
 * Add alternating strips to rows
 *
 * @selector .slds-table_striped
 * @restrict .slds-table
 * @modifier
 */
.slds-table_striped,
.slds-table--striped {
  // scss-lint:disable SelectorDepth
  tbody tr:nth-of-type(even) > td,
  tbody tr:nth-of-type(even) > th {
    background-color: var(--slds-g-color-neutral-base-95, #{$color-background-row-hover});
  }
}

/**
 * @summary Set table to use fixed layout for width and truncation purposes
 *
 * @name advanced
 * @selector .slds-table_fixed-layout
 * @restrict .slds-table
 * @support dev-ready
 * @variant
 */
.slds-table_fixed-layout,
.slds-table--fixed-layout {
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;

  thead {
    background-color: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  }

  // Tap into hardware acceleration for performance of large amounts of rows
  tbody {
    transform: translateZ(0);
  }

  .slds-cell-shrink {
    width: $square-icon-large-boundary;

    &:nth-child(n) {
      padding: {
        left: 0;
        right: 0;
      }
    }

    &:first-child {
      text-align: right;
      padding-right: $spacing-x-small;
    }

    &:last-child {
      text-align: left;
      padding-left: $spacing-x-small;
    }
  }
}

/**
 * If the column is sortable, then let's handle the actionable
 * region of the `<th>` cell
 *
 * @selector .slds-is-sortable
 * @restrict .slds-table_fixed-layout th
 */
.slds-is-sortable {

  .slds-th__action:hover,
  .slds-th__action:focus,
  &.slds-has-focus .slds-th__action,
  &.slds-has-focus .slds-th__action:hover,
  &.slds-has-focus .slds-th__action:focus {
    background-color: var(--slds-g-color-neutral-base-100, #{$table-color-background-header-hover});
    color: currentColor;

    .slds-is-sortable__icon {
      display: inline-block;
      fill: $brand-accessible;
    }
  }
}

/**
 * Actionable area inside th
 *
 * @selector .slds-th__action
 * @restrict .slds-table th div, .slds-table th a
 */
.slds-th__action {
  display: flex;
  padding: $table-cell-spacing;
  height: 2rem; // Keep in sync with the padding of .slds-table--header-fixed_container
  align-items: center;

  &:focus,
  &:hover {
    outline: 0;
    background-color: var(--slds-g-color-neutral-base-100, #{$table-color-background-header-hover});
  }

  &:focus {
    box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
  }
}

/**
  * Allows for alignment of form element, such as a checkbox
  *
  * @selector .slds-th__action_form
  * @restrict .slds-th__action
  */
.slds-th__action_form,
.slds-th__action--form {
  display: inline-flex; // Allows for alignment of form element, such as a checkbox
}

/**
  * Allows for alignment of button, such as a menu
  *
  * @selector .slds-th__action-button
  * @restrict .slds-has-button-menu .slds-button_icon
  */
.slds-th__action-button {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: $spacing-xx-small;
}

/**
 * If the column header has a menu button, then let's add right padding to the
 * header to preserve truncation
 *
 * @selector .slds-has-button-menu
 * @restrict .slds-table_fixed-layout th
 */
.slds-has-button-menu {

  .slds-th__action {
    padding-right: $spacing-x-large;
  }

  .slds-th__action-button {
    right: $spacing-small;
  }
}

/**
 * Icon inside sortable th
 *
 * @selector .slds-is-sortable__icon
 * @restrict .slds-is-sortable .slds-icon
 */
.slds-is-sortable__icon {
  @include square($square-icon-small-content);
  margin-left: $spacing-xx-small;
  display: none;
}

/**
 * Active state of sorted column
 *
 * @selector .slds-is-sorted
 * @restrict .slds-table_fixed-layout th
 */
.slds-is-sorted {

  .slds-is-sortable__icon {
    display: inline-block;
  }
}

/**
  * Change direction of arrow
  *
  * @name sorted-ascending
  * @selector .slds-is-sorted_asc
  * @restrict .slds-is-sorted
  * @modifier
  */
.slds-is-sorted_asc .slds-is-sortable__icon,
.slds-is-sorted--asc .slds-is-sortable__icon {
  transform: rotate(180deg);
}

$max-column-support: 15;

@for $i from 1 through $max-column-support {

  .slds-table_column-#{$i}-wrap tbody tr > *:nth-child(#{$i}) .slds-truncate {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: none;
    white-space: normal;
  }
}

[class*="slds-table_column-"] tr td .slds-truncate {
  overflow: hidden;
  position: relative;
  max-height: 3.25rem;

  &:after {
    content: '';
    position: absolute;
    top: 2.25rem;
    bottom: 0;
    right: 0;
    width: 50%;
    background: linear-gradient(to right, transparent 0%, var(--slds-g-color-neutral-base-100, rgba(255, 255, 255, 1)) 69%);
  }
}

[class*="slds-table_column-"] tr:hover td .slds-truncate:after {
  background: linear-gradient(to right, rgba(250, 250, 249, 0) 0%, rgba(250, 250, 249, 1) 69%);
}

/**
 * Resizable data table columns
 *
 * @selector .slds-table_resizable-cols
 * @restrict .slds-table_fixed-layout
 */

.slds-table_resizable-cols thead th,
.slds-table--resizable-cols thead th {
  padding: 0; // Reset padding so actionable link bleeds to edge

  &:last-of-type .slds-resizable__handle {
    width: $spacing-small;
    right: 0;

    .slds-resizable__divider {

      &:before,
      &:after {
        right: 0;
      }
    }
  }
}

/**
 * Provide an indicator that resizing is available
 *
 * @selector .slds-is-resizable
 * @restrict .slds-table_resizable-cols th
 */


/**
 * Resizable handle
 *
 * @selector .slds-resizable
 * @restrict .slds-is-resizable div
 */
.slds-resizable {
  max-width: 100%;
}

/**
  * Grab handle to resize column
  *
  * @selector .slds-resizable__handle
  * @restrict .slds-resizable span
  */
.slds-resizable__handle {
  width: $spacing-large;
  height: 100%;
  position: absolute;
  top: 0;
  right: ($spacing-small * -1);
}

/**
  * Grab handle divider indicator when resizing column
  *
  * @selector .slds-resizable__divider
  * @restrict .slds-resizable__handle span
  */
.slds-resizable__divider {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: col-resize;
  z-index: $z-index-popup;

  &:before,
  &:after {
    height: 100%;
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: $spacing-small;
  }

  &:before {
    background-color: var(--slds-g-color-neutral-base-70, #{$table-color-background-header-resizable-handle});
    height: 100%;
    width: $border-width-thin;
  }

  &:after {
    background-color: var(--slds-g-color-brand-base-50, #{$color-background-button-brand});
    width: $border-width-thin;
    height: 100vh;
    opacity: 0;
  }

  &:hover,
  &:focus,
  &:active {

    &:before {
      background-color: var(--slds-g-color-brand-base-50, #{$color-background-button-brand});
      width: $spacing-xx-small;
    }

    &:after {
      opacity: 1;
    }
  }
}

// Handles making the handle + divider visible during keyboard navigation
.slds-resizable__input:focus ~ .slds-resizable__handle .slds-resizable__divider {

  &:before {
    background-color: var(--slds-g-color-brand-base-50, #{$color-background-button-brand});
    width: $spacing-xx-small;
  }

  &:after {
    opacity: 1;
  }
}

@import 'blame';