// ------------------------------
// edX Pattern Library: Components - Tables

// About: Contains base styling for tabular data

// #SETTINGS
// #GLOBAL
// #CANNED
// #RESPONSIVE
// #SORTABLE


// ----------------------------
// #SETTINGS
// ----------------------------
// tables
$table-cell-padding:                        spacing-vertical(x-small) spacing-horizontal(small) !default;
$table-condensed-cell-padding:              spacing-vertical(xx-small) spacing-horizontal(x-small) !default;
$table-extra-cell-padding:                  spacing-vertical(small) spacing-horizontal(base) !default;
$table-bg:                                  palette(grayscale, base) !default;
$table-accent-bg:                           palette(primary, light) !default;
$table-focus-bg:                            palette(grayscale, trans) !default;
$table-active-bg:                           $component-active-bg !default;
$table-border-color:                        palette(grayscale, base) !default;


// ----------------------------
// #GLOBAL
// ----------------------------

%highlight {
  background-color: palette(warning, back);
}

%table-base {

  caption {
    @extend %copy-meta;
    @extend %copy-de-emphasized;
    @include text-align(left);
    margin-bottom: spacing-vertical(x-small);
  }

  tr:hover {
    background-color: $table-focus-bg;
  }

  th {
    @include text-align(left);
    font-weight: font-weight(semi-bold);
  }

  th,
  td {
    padding: $table-cell-padding;
    border: 1px solid $table-border-color;
  }

  tfoot {

    tr {
      border-top: 2px solid palette(grayscale, base);
      font-weight: font-weight(semi-bold);
    }
  }

  // can be used on cols, rows, or cells
  .is-highlighted {
    @extend %highlight;
  }

  // can be used on rows or cells only
  .align-left {
    @include text-align(left);
  }

  .align-center {
    @include text-align(center);
  }

  .align-right {
    @include text-align(right);
  }
}

.table {
  @extend %table-base;
}

// ----------------------------
// #CANNED
// ----------------------------

// less lines
.table-simplified {
  @extend %table-base;

  th,
  td {
    border: none;
    border-bottom: 1px solid $table-border-color;
  }
}

// extra cozy
.table-cozy {

  th,
  td {
    padding: $table-condensed-cell-padding;
  }
}

// extra comfortable
.table-comfortable {

  th,
  td {
    padding: $table-extra-cell-padding;
  }
}

// ----------------------------
// #RESPONSIVE
// ----------------------------
// wrapping div allows horizontally large tables to scroll on small screens
.wrapper-table-scrollable {
  width: 100%;
  overflow-y: auto;
}

// responsive table enables `supplemental` columns to hide on small screens
.table-responsive {

  th.supplemental,
  td.supplemental {
    display: none;
  }

  @media(min-width: $bp-screen-md) {

    th.supplemental,
    td.supplemental {
      display: table-cell;
    }
  }
}

// ----------------------------
// #SORTABLE
// ----------------------------
// sortable table includes button to sort by column - needs JS to actually sort
.table-sortable {

  // sortable header
  .sortable {
    position: relative;
    @include margin-left(spacing-horizontal(x-small));

    // sorting button
    .action-sort {
      @extend %btn-link;
      position: absolute;
      @include right(0);
      border: 0;
      color: palette(grayscale, base);

      &:hover {
        color: palette(primary, base);
      }
    }

    &.sort-current {

      .action-sort {
        color: palette(primary, base);
      }
    }
  }
}