// Example of a more complex table
// ---

@if $table-experimental {
  %with-sort-arrow {
    @include respond-to(small-tablet, true) {
      position: relative;
      margin-right: .4em;

      &:after {
        position: absolute;
        top: 50%;
        right: -1.2em;
        display: none;
        margin-top: -.4em;
        line-height: 1;
        color: $table-c-inactive;
        content: "\025bc";
      }
    }
  }

  .us-table-cell-sorted {
    @include respond-to(small-tablet, true) {
      background: $table-c-sorted-bg;
    }
  }

  %us-table-head-text,
  .us-table-head-text {
    @extend %with-sort-arrow;
    display: inline-block;
    line-height: normal;
    vertical-align: baseline;
  }

  .us-table-sort-button,
  .us-table-sort-button:visited {
    @extend %us-table-head-text;

    @include respond-to(small-tablet, true) {
      color: $table-c-head-text;
      cursor: default;

      .js .js-sortable & {
        cursor: pointer;

        &:after {
          display: block;
        }

        &:hover {
          color: $table-c-head-text;
        }

        &:hover:after {
          color: $table-c-head-text;
        }
      }
    }
  }

  .us-table-head-sorted {
    .us-table-sort-button,
    .us-table-head-text {
      &:after {
        display: block;
        color: $table-c-head-text;
      }
    }
  }
}