@import "../settings/colors";
@import "../settings/core";

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

//
// @variables
//


// 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") {
  table {
    @include table;
  }
}

/* begin tables override */
@mixin table {
  width: 100%;
  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 {
    tr {
      border-top: $table-border-style $table-border-size transparent;
      line-height: vr-adjust(24px) - rem($table-border-size);

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

        //padding: $table-head-padding;

      }
    }
  }

  tbody {
    tr {
      border-top: $table-border-style $table-border-size $table-border-color;
      line-height: vr-adjust(24px) + rem($table-border-size);
    }
  }

  tfoot {
    tr {
      line-height: vr-adjust(24px) - rem($table-border-size);

      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;
    }
  }

  &.table-striped {
    thead, tfoot {
      background: $table-foot-bg;
    }

    tr {
      &.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;
    padding: ($table-row-padding / 2) $table-row-padding;
    line-height: vr-adjust(24px) - rem($table-border-size);
  }

  &.table-bordered {
    border: $table-border-style $table-border-size $table-border-color;

    thead {
      tr {
        border-top: $table-border-style $table-border-size $table-border-color;

        td {
          //line-height: vr-adjust(24px) - rem($table-border-size);

        }
      }
    }

    margin-top: -1px;

    thead tr th,
    tfoot tr th,
    tfoot tr td,
    tbody tr th,
    tbody tr td,
    tr td {
      display: $table-display;
      padding: ($table-row-padding / 2) $table-row-padding;
      line-height: vr-adjust(24px) - rem($table-border-size);
    }
  }

  &.table-condensed {
    thead tr th,
    tfoot tr th,
    tfoot tr td,
    tbody tr th,
    tbody tr td,
    tr td {
      padding: 0 $table-row-padding;
    }
  }
}

@include exports("table-bem") {
  table {
    @include table;
  }
  table td[class*=col-], table th[class*=col-] {
    position: static;
    float: none;
    display: table-cell;
  }
}