// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

//
// @name _tables.scss
// @dependencies _global.scss
//

//
// @variables
//

$include-html-table-classes: $include-html-classes !default;

// These control the background color for the table and even rows
$table-bg: $white !default;
$table-even-row-bg: $snow !default;

// These control the table cell border style
$table-border-style: solid !default;
$table-border-size: 1px !default;
$table-border-color: $gainsboro !default;

// These control the table head styles
$table-head-bg: $white-smoke !default;
$table-head-font-size: rem-calc(14) !default;
$table-head-font-color: $jet !default;
$table-head-font-weight: $font-weight-bold !default;
$table-head-padding: rem-calc(8 10 10) !default;

// These control the table foot styles
$table-foot-bg: $table-head-bg !default;
$table-foot-font-size: $table-head-font-size !default;
$table-foot-font-color: $table-head-font-color !default;
$table-foot-font-weight: $table-head-font-weight !default;
$table-foot-padding: $table-head-padding !default;

// These control the caption
$table-caption-bg: transparent !default;
$table-caption-font-color: $table-head-font-color !default;
$table-caption-font-size: rem-calc(16) !default;
$table-caption-font-weight: bold !default;

// These control the row padding and font styles
$table-row-padding: rem-calc(9 10) !default;
$table-row-font-size: rem-calc(14) !default;
$table-row-font-color: $jet !default;
$table-line-height: rem-calc(18) !default;

// These are for controlling the layout, display and margin of tables
$table-layout: auto !default;
$table-display: table-cell !default;
$table-margin-bottom: rem-calc(20) !default;


//
// @mixins
//

@mixin table {
  background: $table-bg;
  border: $table-border-style $table-border-size $table-border-color;
  margin-bottom: $table-margin-bottom;
  table-layout: $table-layout;

  caption {
    background: $table-caption-bg;
    color: $table-caption-font-color;
    font: {
      size: $table-caption-font-size;
      weight: $table-caption-font-weight;
    }
  }

  thead {
    background: $table-head-bg;

    tr {
      th,
      td {
        color: $table-head-font-color;
        font-size: $table-head-font-size;
        font-weight: $table-head-font-weight;
        padding: $table-head-padding;
      }
    }
  }

  tfoot {
    background: $table-foot-bg;

    tr {
      th,
      td {
        color: $table-foot-font-color;
        font-size: $table-foot-font-size;
        font-weight: $table-foot-font-weight;
        padding: $table-foot-padding;
      }
    }
  }

  tr {
    th,
    td {
      color: $table-row-font-color;
      font-size: $table-row-font-size;
      padding: $table-row-padding;
      text-align: $default-float;
    }

    &.even,
    &.alt,
    &:nth-of-type(even) { background: $table-even-row-bg; }
  }

  thead tr th,
  tfoot tr th,
  tfoot tr td,
  tbody tr th,
  tbody tr td,
  tr td { display: $table-display; line-height: $table-line-height; }
}


@include exports("table") {
  @if $include-html-table-classes {
    table {
      @include table;
    }
  }
}

//
// ACL Style Table
//

// ---------------------------------------------
// TABLES
// ---------------------------------------------
table {
  //
  // Base elements
  //
  border-spacing: 0;
  thead {
    background-color: lighten($creme, 3);
    border-bottom: 1px solid $black-lighten-50;
    border-top: 1px solid $black-lighten-50;
    // Need the extra nesting to overwrite Foundation styles
    tr {
      th {
        font-size: font-scale(-1);
        font-weight: normal;
      }
      th, td {
        padding: .5625rem .625rem;
      }
    }
  }
  // Need the extra nesting to overwrite Foundation styles
  tr {
    td {
      vertical-align: top;
    }
  }
  th, td {
    border-bottom: 1px solid $black-lighten-60;
  }
  input[type='checkbox'] {
    margin: 0;
  }
  // Alt row bg colors
  tr {
    &.even, &.alt, &:nth-of-type(even) {
      background-color: lighten($black, 72);
    }
  }
  //
  // More optional styles such as bg on hover, selected rows bg, etc.
  //
  // For tables with rows that are selectable by checkbox
  tr.is-selected {
    background-color: lighten($yellow, 31);
  }
  // On row hover... could be used to add different coloured borders, etc.
  &.on-hover-row {
    tbody {
      tr:hover {
        background-color: lighten($yellow, 34);
      }
    }
  }
  // Index # column for table row
  .col-index {
    text-align: right;
  }
  // Extra information that should be displaced with less priority
  .more-email {
    font-size: font-scale(-2);
  }
  // If the row selector is the first or last column in the table...
  th, td {
    &.col-row-selector {
      &:first-child {
        padding-right: 0;
      }
      &:last-child {
        padding-left: 0;
      }
    }
  }
}

//
// Allow table to scroll when
// it is viewed on a small screen
//
.acl_table-wrapper, .acl-tbl-wrapper {
  border: 1px solid $black-lighten-60;
  border-bottom: 0;
  overflow: auto;
  width: 100%;
  table {
    border: 0;
    margin-bottom: 0;
    width: 100%;
  }

  // Open table with no side borders
  &.open-tbl {
    border-left: 0;
    border-right: 0;
  }

  &.borderless {
    border: 0;
  }

  &.acl-tbl--scrolling {
    max-height: 35rem;
    overflow-y: auto;
  }
}


//
// Styles for table with a header and footer.
// Header usually contains a heading for table + filter + sort...
// Footer usually contain Save and Cancel actions.
//
.table_with_actions {
  border: 1px solid $black-lighten-70;
  border-radius: $global-radius;
}

.table_with_actions-header {
  @include clearfix();

  padding: .75rem 1rem .25rem;
}

// TODO: Set max-width for title and action
// to prevent header from being broken with long title
// and multiple actions.
.table_with_actions-header-title {
  float: left;
  max-width: 60%;
}

.table_with_actions-header-actions {
  float: right;
  max-width: 35%;
}

.table_with_actions-footer {
  @include clearfix();

  border-top: 1px solid $black-lighten-70;
  padding: .75rem 1rem 1rem;
}

//
// Allow tbody of a table to scroll.
// it is usually used with a table that has header and footer.
//
.acl_table-scrolling_body {
  tbody {
    display: block;
    max-height: 25rem;
    overflow-y: scroll;
  }
  thead, tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
}