// ----------- Tables & Table Object

// Default table styles are defined in base. Use the table-light color style with other 
// color utilities or create custom theme extensions to suit your needs.

/*
Table Object
http://jxnblk.github.io/table-object
*/

.table {
  display: table;
  width: 100%;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
}
.table-fixed {
  table-layout: fixed;
}

/* Static (min-width) table
------------------------------------------------------- */

.static-table { min-width: 800px; }
.static-table, 
.static-table th, 
.static-table td { 
  border: 1px solid $base-color-3; 
  border-collapse: collapse; 
}
.static-table th, 
.static-table td { 
  padding: 1rem; 
}
.static-table thead { 
  background-color: $base-color-3; 
  color: white; 
  font-family: $sans; 
  font-weight: 400; 
}

/* Responsive table
------------------------------------------------------- */
.responsive-table, 
.responsive-table td, 
.responsive-table th { 
  border: 1px solid $base-color-3; 
  border-collapse: collapse;
}
.responsive-table td, 
.responsive-table th { 
  padding: 1rem; 
}
.responsive-table thead,
.responsive-table .mobile-thead { 
  background-color: $base-color-6; 
  color: white; 
  font-family: $sans; 
  font-weight: 400; 
}
.responsive-table {
  display: table;
  width: 100%;
}

// The following breakpoints can be used to make the tables responsive

.responsive-table .mobile-thead, 
.responsive-table .mobile-colhead { display: none; }

@media all and (max-width: 800px){

  .responsive-table thead { display: none; }

  .responsive-table .mobile-thead, 
  .responsive-table .mobile-colhead { 
    display: block; 
    border-collapse: collapse !important;
  }

  .responsive-table .mobile-colhead {}
  
  .responsive-table,
  .responsive-table td,
  .responsive-table th {
    border: 1px solid $base-color-3;
    width: 100%;
    display: block; 
    vertical-align: middle; 
    border-collapse: collapse !important; 
  }

}

/*
.field-light {
  background-color: white;
  -webkit-transition: box-shadow .2s ease;
          transition: box-shadow .2s ease;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
  border-radius: 3px;
}

.field-light:focus {
  outline: none;
  border-color: #0076df;
  box-shadow: 0 0 2px rgba(0, 118, 223, .5);
}

.field-light:disabled {
  color: #777;
  background-color: rgba(0, 0, 0, .125);
}

.field-light:read-only:not(select) {
  background-color: rgba(0, 0, 0, .125);
}

.field-light:invalid {
  border-color: #f95020;
}

.field-light.is-success {
  border-color: #00cf26;
}

.field-light.is-warning {
  border-color: #efcc00;
}

.field-light.is-error {
  border-color: #f95020;
}

.radio-light,
.checkbox-light {
  -webkit-transition: box-shadow .2s ease;
          transition: box-shadow .2s ease;
}

.radio-light {
  border-radius: 50%;
}

.radio-light:focus,
.checkbox-light:focus {
  outline: none;
  box-shadow: 0 0 2px rgba(0, 118, 223, .5);
}

.field-dark {
  color: white;
  background-color: rgba(0, 0, 0, .25);
  border: 1px solid rgba(0, 0, 0, .0625);
  border-radius: 3px;
}

.field-dark::-webkit-input-placeholder {
  color: rgba(255, 255, 255, .75);
}

.field-dark::-moz-placeholder {
  color: rgba(255, 255, 255, .75);
}

.field-dark:-ms-input-placeholder {
  color: rgba(255, 255, 255, .75);
}

.field-dark::placeholder {
  color: rgba(255, 255, 255, .75);
}

.field-dark:focus {
  outline: 0;
  border: 1px solid rgba(255, 255, 255, .5);
}

.field-dark:read-only:not(select) {
  background-color: rgba(255, 255, 255, .25);
}

.field-dark:invalid {
  border-color: #f95020;
}

.field-dark.is-success {
  border-color: #00cf26;
}

.field-dark.is-warning {
  border-color: #efcc00;
}

.field-dark.is-error {
  border-color: #f95020;
}

.table-light th,
.table-light td {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #ccc;
}
*/