/*
  Definitions for the responsive table component.
*/
// The tables use the common table elements and syntax - <tfoot> is not supported.
$table-mobile-breakpoint:     768px !default;       // Breakpoint for <table> mobile view.
$table-max-height:            400px !default;       // Maximum height of <table> elements (non-horizontal).
$table-caption-font-size:     1.5rem !default;      // Font size for <caption> elements.
$table-mobile-card-label:  'data-label' !default;   // Attribute used to replace column headers in mobile view.
$table-mobile-label-font-weight: 600 !default;      // Font weight for column header labels in mobile view.
$table-border-color:           #aaa !default;       // Border color for <table> elements.
$table-border-separator-color: #666 !default;       // Border color for the border between <thead> and <tbody>.
$table-th-back-color:          #e6e6e6 !default;    // Background color for <th> elements.
$table-th-fore-color:          #111 !default;       // Text color for <th> elements.
$table-td-back-color:          #f8f8f8 !default;    // Background color for <td> elements.
$table-td-fore-color:          #111 !default;       // Text color for <td> elements.
$_include-horizontal-table:    true !default;       // [Hidden] Flag for horizontal tables (`true`/`false`).
$table-horizontal-name: 'horizontal' !default;      // Class name for horizontal <table> elements.
$_include-striped-table:       true !default;       // [Hidden] Flag for striped tables.
$table-striped-name: 'striped' !default;            // Class name for striped <table> elements.
$table-td-alt-back-color:      #eee !default;       // Alternative background color for <td> elements in striped tables.
$_include-hoverable-table:     true !default;       // [Hidden] Flag for striped tables.
$table-hoverable-name: 'hoverable' !default;        // Class name for hoverable <table> elements.
$table-td-hover-back-color:    #90caf9 !default;    // Hover background color for <td> elements in hoverable tables.
// CSS variable name definitions [exercise caution if modifying these]
$table-border-color-var:           '--table-border-color' !default;
$table-border-separator-color-var: '--table-border-separator-color' !default;
$table-th-back-color-var:          '--table-head-back-color' !default;
$table-th-fore-color-var:          '--table-head-fore-color' !default;
$table-td-back-color-var:          '--table-body-back-color' !default;
$table-td-fore-color-var:          '--table-body-fore-color' !default;
$table-td-alt-back-color-var:      '--table-body-alt-back-color' !default;
$table-td-hover-back-color-var:      '--table-body-hover-back-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
// $universal-margin-var:          '--universal-margin' !default;
// $universal-padding-var:         '--universal-padding' !default;
// $universal-border-radius-var:   '--universal-border-radius' !default;
// $universal-box-shadow-var:      '--universal-box-shadow' !default;
// :root {
//  #{$universal-margin-var}: $universal-margin;
//  #{$universal-padding-var}: $universal-padding;
//  #{$universal-border-radius-var}: $universal-border-radius;
//  @if $universal-box-shadow != none {
//   #{$universal-box-shadow-var}: $universal-box-shadow;
//  }
// }
//
// ============================================================
/* Table module CSS variable definitions. */
:root {
  #{$table-border-color-var}: $table-border-color;
  #{$table-border-separator-color-var}: $table-border-separator-color;
  #{$table-th-back-color-var}: $table-th-back-color;
  #{$table-th-fore-color-var}: $table-th-fore-color;
  #{$table-td-back-color-var}: $table-td-back-color;
  #{$table-td-fore-color-var}: $table-td-fore-color;
  #{$table-td-alt-back-color-var}: $table-td-alt-back-color;
}
// Desktop view (scrollable vertical tables).
table {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  padding: var(#{$universal-padding-var});
  padding-top: 0;
  @if not($_include-horizontal-table) {
    overflow: auto;
    max-height: $table-max-height;
  }
  caption {
    font-size: $table-caption-font-size;
    margin: calc(2 * var(#{$universal-margin-var})) 0;
    max-width: 100%;
    flex: 0 0 100%;
  }
  thead, tbody {
    display: flex;
    flex-flow: row wrap;
    border: $__1px solid var(#{$table-border-color-var});
    @if not($_include-horizontal-table) {
      max-width: 100%;
      flex: 0 0 100%;
    }
  }
  thead {
    z-index: 999;  // Fixes the visibility of the element.
    border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0;
    border-bottom: $__1px solid var(#{$table-border-separator-color-var});
    @if not($_include-horizontal-table) {
      position: sticky;
      top: 0;
    }
  }
  tbody {
    border-top: 0;
    margin-top: calc(0 - var(#{$universal-margin-var}));
    border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
  }
  tr {
    display: flex;
    padding: 0; // Apply always to overwrite default.
    @if not($_include-horizontal-table) {
      flex-flow: row wrap;
      flex: 0 0 100%;
    }
  }
  th, td {
    padding: calc(2 * var(#{$universal-padding-var}));    // Apply always to overwrite default.
    @if not($_include-horizontal-table) {
      flex: 1 0 0%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  th {
    text-align: left;
    background: var(#{$table-th-back-color-var});
    color: var(#{$table-th-fore-color-var});
  }
  td {
    background: var(#{$table-td-back-color-var});
    color: var(#{$table-td-fore-color-var});
    border-top: $__1px solid var(#{$table-border-color-var});
  }
  @if not($_include-horizontal-table) {
    tbody tr:first-child td {
      border-top: 0;
    }
  }
}
// Styling for horizontal tables
@if $_include-horizontal-table {
  table:not(.#{$table-horizontal-name}) {
    overflow: auto;
    max-height: $table-max-height;
    thead, tbody {
      max-width: 100%;
      flex: 0 0 100%;
    }
    tr {
      flex-flow: row wrap;
      flex: 0 0 100%;
    }
    th, td {
      flex: 1 0 0%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    thead {
      position: sticky;
      top: 0;
    }
    tbody tr:first-child td {
      border-top: 0;
    }
  }
  table.#{$table-horizontal-name} {
    border: 0;
    thead, tbody {
      border: 0;
      flex: .2 0 0;
      flex-flow: row nowrap;
    }
    tbody {
      overflow: auto;
      justify-content: space-between;
      flex: .8 0 0;
      margin-left: 0;
      padding-bottom: calc(var(#{$universal-padding-var}) / 4);
    }
    tr {
      flex-direction: column;
      flex: 1 0 auto;
    }
    th, td {
      width: auto;
      border: 0;
      border-bottom: $__1px solid var(#{$table-border-color-var});
      &:not(:first-child){
        border-top: 0;
      }
    }
    th {
      text-align: right;
      border-left: $__1px solid var(#{$table-border-color-var});
      border-right: $__1px solid var(#{$table-border-separator-color-var});
    }
    thead {
      tr:first-child {
        padding-left: 0;
      }
    }
    th:first-child, td:first-child {
      border-top: $__1px solid var(#{$table-border-color-var});
    }
    tbody tr:last-child td {
      border-right: $__1px solid var(#{$table-border-color-var});
      &:first-child{
        border-top-right-radius: 0.25rem;
      }
      &:last-child{
        border-bottom-right-radius: 0.25rem;
      }
    }
    thead tr:first-child th {
      &:first-child{
        border-top-left-radius: 0.25rem;
      }
      &:last-child{
        border-bottom-left-radius: 0.25rem;
      }
    }
  }
}
// Mobile
@media screen and (max-width: #{$table-mobile-breakpoint - 1px}){
  @if $_include-horizontal-table {
    table, table.#{$table-horizontal-name} {
      border-collapse: collapse;
      border: 0;
      width: 100%;
      display: table;
      // Accessibility (element is not visible, but screen readers read it normally)
      thead, th {
        border: 0;
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        clip: rect(0 0 0 0);
        -webkit-clip-path: inset(100%);
        clip-path: inset(100%);
      }
      tbody {
        border: 0;
        display: table-row-group;
      }
      tr {
        display: block;
        border: $__1px solid var(#{$table-border-color-var});
        border-radius: var(#{$universal-border-radius-var});
        @if $universal-box-shadow != none {
          box-shadow: var(#{$universal-box-shadow-var});
        }
        background: #fafafa;     // use variables, this is a test (body)
        padding: var(#{$universal-padding-var});
        margin: var(#{$universal-margin-var});
        margin-bottom: calc(2 * var(#{$universal-margin-var}));
      }
      th, td {
        width: auto;
      }
      td {
        display: block;
        border: 0;
        text-align: right;
      }
      td:before {
        content: attr(#{$table-mobile-card-label});
        float: left;
        font-weight: $table-mobile-label-font-weight;
      }
      th:first-child, td:first-child {
        border-top: 0;
      }
      tbody tr:last-child td {
        border-right: 0;
      }
    }
  }
  @else {
    table {
      border-collapse: collapse;
      border: 0;
      width: 100%;
      display: table;
      // Accessibility (element is not visible, but screen readers read it normally)
      thead, th {
        border: 0;
        height: 1px;
        width: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        clip: rect(0 0 0 0);
        -webkit-clip-path: inset(100%);
        clip-path: inset(100%);
      }
      tbody {
        border: 0;
        display: table-row-group;
      }
      tr {
        display: block;
        border: $__1px solid var(#{$table-border-color-var});
        border-radius: var(#{$universal-border-radius-var});
        @if $universal-box-shadow != none {
          box-shadow: var(#{$universal-box-shadow-var});
        }
        background: #fafafa;     // use variables, this is a test (body)
        padding: var(#{$universal-padding-var});
        margin: var(#{$universal-margin-var});
        margin-bottom: calc(2 * var(#{$universal-margin-var}));
      }
      td {
        display: block;
        border: 0;
        text-align: right;
      }
      td:before {
        content: attr(#{$table-mobile-card-label});
        float: left;
        font-weight: $table-mobile-label-font-weight;
      }
    }
  }
}
// Striped tables.
@if $_include-striped-table {
  :root {
    #{$table-td-alt-back-color-var} : $table-td-alt-back-color;
  }
  table.#{$table-striped-name} {
    tr:nth-of-type(2n) > td {
      background: var(#{$table-td-alt-back-color-var});
    }
  }
  // Responsiveness for striped tables.
  @media screen and (max-width: #{$table-mobile-breakpoint}) {
    table.#{$table-striped-name} {
      tr:nth-of-type(2n) {
        background: var(#{$table-td-alt-back-color-var});
      }
    }
  }
}
// Hoverable tables.
@if $_include-striped-table {
  :root {
    #{$table-td-hover-back-color-var} : $table-td-hover-back-color;
  }
  table.#{$table-hoverable-name} {
    tr {
      &:hover, &:focus {
        &, & > td {
          background: var(#{$table-td-hover-back-color-var});
        }
      }
    }
  }
  @media screen and (max-width: #{$table-mobile-breakpoint}) {
    table.#{$table-hoverable-name} {
      tr {
        &:hover, &:focus {
          &, & > td {
            background: var(#{$table-td-hover-back-color-var});
          }
        }
      }
    }
  }
}