.table-wrapper {
  flex-grow: 1;

  .table-cell-link-primary {
    color: @grey-dark;
    font-weight: 600;
    text-decoration: none;
  }
}

[role='columnheader'] button {
  height: auto;
  &:hover {
    background-color: transparent;
  }
}

& when (@table-enabled) {

  .table {

    &.table-hide-header {

      thead {
        display: none;
      }
    }

    &.table-break-word {
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

    &.table-fixed-layout {
      table-layout: fixed;
    }

    // When VirtualList is used, the first and last rows in tbody are the
    // spacer cells.
    &.table-borderless-outer {

      & > tbody.table-virtual-list {

        tr {

          &:nth-child(2) {

            td,
            th {
              border-top: 0;
            }
          }

          &:nth-last-child(2) {

            td,
            th {
              border-bottom: 0;
            }
          }
        }
      }
    }

    tr,
    .table-row {

      &.inactive {

        th,
        td,
        .expanding-table-primary-cell,
        .icon-grey,
        .status-text,
        .table-cell-link-primary,
        .table-cell-link-secondary,
        .table-cell-value {
          .property-variant(table-cell, color, disabled-color, null, null);
          .property-variant(table-cell, text-decoration, null, null);
        }

        .task-status-error,
        .task-status-failed,
        .text-error-state {
          color: @red;
        }
      }

      .table-display-on-row-hover {
        visibility: hidden;
      }

      &:hover {

        .table-display-on-row-hover {
          visibility: visible;
        }
      }

      // Because dropdown menus render at the root of the body tag, the :hover
      // pseudoclass doesn't apply when the user's mouse enters the dropdown.
      // This forces the button to stay visible while the dropdown menu is open.
      .dropdown {

        &.open {

          .table-display-on-row-hover {
            visibility: visible;
          }
        }
      }
    }

    td.wrap-content {
      white-space: normal;
    }

    th,
    td {
      // This property is necessary for table cells to respect the text-overflow
      // property. http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell
      max-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap;

      & when not (@table-cell-content-margin-horizontal = null) {

        & > *,
        span > * {
          box-sizing: content-box;
          margin-right: @table-cell-content-margin-horizontal;

          &:last-child {
            margin-right: 0;
          }
        }
      }

      &.clickable {

        .caret {
          .triangle-base();
          .triangle-color('down', @table-cell-caret-color);
          content: '';
          display: inline-block;
          margin-left: 0;
          visibility: hidden;

          & when not (@table-cell-caret-width = null) {
            .triangle-size-width('down', @table-cell-caret-width);
          }

          & when not (@table-cell-caret-height = null) {
            .triangle-size-height('down', @table-cell-caret-height);
          }

          &--asc {
            transform: rotate(0);
          }

          &--desc {
            transform: rotate(180deg);
          }
        }

        &.active,
        &:hover {

          .caret {
            visibility: visible;
          }
        }
      }

      .table-cell-emphasized,
      &.table-cell-emphasized {
        font-weight: 700;
      }

      [class^='table-cell-link-'],
      &[class^='table-cell-link-'] {
        .element-text-style(table-cell-link);

        &.selectable {

          &:hover {
            .element-text-style(table-cell-link-hover);
          }
        }

        &.disabled {
          .element-text-style(table-cell-link-disabled);
        }

        // Cell active

        &.active,
        &.highlight {
          .element-text-style(table-cell-link-active);

          &.selectable {

            &:hover {
              .element-text-style(table-cell-link-active-hover);
            }
          }

          &.disabled {
            .element-text-style(table-cell-link-active-disabled);
          }
        }
      }

      .table-cell-link-primary,
      &.table-cell-link-primary {
        font-weight: 600;
      }

      .table-cell-value,
      &.table-cell-value {
        flex: 1 1 auto;
        // This property is necessary for table cells to respect the text-overflow
        // property. http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell
        line-height: normal;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .table-cell-details-secondary,
      &.table-cell-details-secondary {
        .element-text-size(small, null);
      }

      .table-cell-word-wrap,
      &.table-cell-word-wrap {
        word-wrap: break-word;
      }

      .table-cell-flex-box,
      &.table-cell-flex-box {
        align-items: center;
        display: flex;
      }

      .table-cell-icon {
        flex: 0 0 auto;
      }
    }
  }

  & when (@table-inverse-enabled) {

    .table.table-inverse {

      tr,
      .table-row {

        &.inactive {

          .expanding-table-primary-cell,
          .icon-grey,
          .status-text,
          .table-cell-link-primary,
          .table-cell-link-secondary,
          .table-cell-value {
            .property-variant(table-cell-inverse, color, disabled-color, null, null);
          }
        }
      }

      th,
      td {

        &.clickable {

          .caret {
            .triangle-color('down', @table-cell-inverse-caret-color);
          }
        }
      }
    }
  }
}

& when (@table-enabled) and (@layout-screen-small-enabled) {

  @media (min-width: @layout-screen-small-min-width) {

    .table {

      th,
      td {

        & when not (@table-cell-content-margin-horizontal-screen-small = null) {

          & > *,
          span > * {
            margin-right: @table-cell-content-margin-horizontal-screen-small;
          }
        }

        &.clickable {

          .caret {

            & when not (@table-cell-caret-width-screen-small = null) {
              .triangle-size-width('down', @table-cell-caret-width-screen-small);
            }

            & when not (@table-cell-caret-height-screen-small = null) {
              .triangle-size-height('down', @table-cell-caret-height-screen-small);
            }
          }
        }

        .table-cell-details-secondary,
        &.table-cell-details-secondary {
          .element-text-size(small, screen-small);
        }
      }
    }
  }
}

& when (@table-enabled) and (@layout-screen-medium-enabled) {

  @media (min-width: @layout-screen-medium-min-width) {

    .table {

      th,
      td {

        & when not (@table-cell-content-margin-horizontal-screen-medium = null) {

          & > *,
          span > * {
            margin-right: @table-cell-content-margin-horizontal-screen-medium;
          }
        }

        &.clickable {

          .caret {

            & when not (@table-cell-caret-width-screen-medium = null) {
              .triangle-size-width('down', @table-cell-caret-width-screen-medium);
            }

            & when not (@table-cell-caret-height-screen-medium = null) {
              .triangle-size-height('down', @table-cell-caret-height-screen-medium);
            }
          }
        }

        .table-cell-details-secondary,
        &.table-cell-details-secondary {
          .element-text-size(small, screen-medium);
        }
      }
    }
  }
}

& when (@table-enabled) and (@layout-screen-large-enabled) {

  @media (min-width: @layout-screen-large-min-width) {

    .table {

      th,
      td {

        & when not (@table-cell-content-margin-horizontal-screen-large = null) {

          & > *,
          span > * {
            margin-right: @table-cell-content-margin-horizontal-screen-large;
          }
        }

        &.clickable {

          .caret {

            & when not (@table-cell-caret-width-screen-large = null) {
              .triangle-size-width('down', @table-cell-caret-width-screen-large);
            }

            & when not (@table-cell-caret-height-screen-large = null) {
              .triangle-size-height('down', @table-cell-caret-height-screen-large);
            }
          }
        }

        .table-cell-details-secondary,
        &.table-cell-details-secondary {
          .element-text-size(small, screen-large);
        }
      }
    }
  }
}

& when (@table-enabled) and (@layout-screen-jumbo-enabled) {

  @media (min-width: @layout-screen-jumbo-min-width) {

    .table {

      th,
      td {

        & when not (@table-cell-content-margin-horizontal-screen-jumbo = null) {

          & > *,
          span > * {
            margin-right: @table-cell-content-margin-horizontal-screen-jumbo;
          }
        }

        &.clickable {

          .caret {

            & when not (@table-cell-caret-width-screen-jumbo = null) {
              .triangle-size-width('down', @table-cell-caret-width-screen-jumbo);
            }

            & when not (@table-cell-caret-height-screen-jumbo = null) {
              .triangle-size-height('down', @table-cell-caret-height-screen-jumbo);
            }
          }
        }

        .table-cell-details-secondary,
        &.table-cell-details-secondary {
          .element-text-size(small, screen-jumbo);
        }
      }
    }
  }
}

.table-content-spacing-left {
  margin-left: @table-cell-content-margin-horizontal;
}

.table-content-spacing-right {
  margin-right: @table-cell-content-margin-horizontal;
}

.table-content-inline-block {
  display: inline-block;
}
