//
// TABLES
//

//
// Structure
//
// <table class="rf-table">
//  <tr class="rf-table__row rf-table__row--header">
//    <th class="rf-table__th">Product</th>
//    <th class="rf-table__th">Name</th>
//  </tr>
//  <tbody class="rf-table__body">
//    <tr class="rf-table__row">
//      <td class="rf-table__td"> Cell #1</td>
//      <td class="rf-table__td"> Cell #2</td>
//    </tr>
//  </tbody>
// </table>
//
// Best Practices
//
// Set column widths in the header
//

.rf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.rf-table__th,
.rf-table__td {
  padding-left: $list-padding/2;
  padding-right: $list-padding/2;

  &:last-of-type {
    padding-right: $list-padding;
  }

  &:first-of-type {
    padding-left: $list-padding;
  }
}

.rf-table__row--header {
  vertical-align: bottom;
}

.rf-table__col--centered {
  text-align: center;

  .form-control {
    text-align: center;
  }
}

.rf-table__col--right {
  text-align: right;
}

//
// ROW TYPES
//

.rf-table__row--error {
  border-left: 6px solid $red;
}

.rf-table__row--success {
  border-left: 6px solid $green;
}

.rf-table__row--aligntop {
  > td {
    vertical-align: top;
  }
}


// Padding and borders for table cells

.rf-table__td,
.rf-table__th {
  @include word-wrap;
}

.rf-table__td {
  border-bottom: $border-default;
  font-size: 13px;
  padding: $list-padding;
  vertical-align: middle;
}

.rf-table__th {
  @extend h5;
  padding: 0px $list-padding 5px;
}

.rf-table__td--strong {
  color: $charcoal;
  font-weight: bold;
}

//
// CONDENSED TABLE
//

.rf-table--condensed {
  margin: 6px 0;

  .rf-table__td {
    padding: 2px 10px;

    .rf-preview {
      min-height: 34px;
    }
  }

  .rf-table__td select {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .rf-table__td label {
    margin-bottom: 0;
  }

}

// Rounds corners of the table body
.rf-table__row:first-of-type .rf-table__td:first-of-type {
  border-top-left-radius: $border-radius;
}

.rf-table__row:first-of-type .rf-table__td:last-of-type  {
  border-top-right-radius: $border-radius;
}

.rf-table__row:last-of-type .rf-table__td:first-of-type  {
  border-bottom-left-radius: $border-radius;
}

.rf-table__row:last-of-type .rf-table__td:last-of-type  {
  border-bottom-right-radius: $border-radius;
}

// Draws table borders
.rf-table__row:first-of-type > .rf-table__td {
  border-top: $border-default;
}

.rf-table__row > .rf-table__td:first-of-type {
  border-left: $border-default;
}

.rf-table__row > .rf-table__td:last-of-type {
  border-right: $border-default;
}