// Lightning Design System 2.12.0
// 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: $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: $table-color-background-header;
    color: $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: $color-background-row-hover;
    }
  }

  /**
   * 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: $color-background-row-selected;
    }

    a {
      color: $color-text-link-active;
    }
  }

  /**
   * 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: $brand-accessible 0 0 0 1px inset;
  }

  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 $color-border;
    bottom: $border-width-thin solid $color-border;
  }

  // More than one row in thead
  thead > tr + tr > th {
    border-top: $border-width-thin solid $color-border;
  }

  // Cells
  tbody td,
  tbody th {
    border-top: $border-width-thin solid $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:
      $color-border 0 ($border-width-thin * -1) 0 inset,
      $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 $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: $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: $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: $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: $table-color-background-header-hover;
  }

  /**
   * Allows for alignment of form element, such as a checkbox
   *
   * @selector .slds-th__action_form
   * @restrict .slds-th__action
   */
  &_form,
  &--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
   */
  &-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
   */
  &_asc .slds-is-sortable__icon,
  &--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, rgba(255, 255, 255, 0) 0%, 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
}


/**
 * 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
   */
  &__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
   */
  &__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: $table-color-background-header-resizable-handle;
      height: 100%;
      width: $border-width-thin;
    }

    &:after {
      background-color: $color-background-button-brand;
      width: $border-width-thin;
      height: 100vh;
      opacity: 0;
    }

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

      &:before {
        background-color: $color-background-button-brand;
        width: $spacing-xx-small;
      }

      &:after {
        opacity: 1;
      }
    }
  }
}

@import 'blame';