// RAMEN TABLE COMPONENT
//
//
// Required Global Variables:
// $spacing-xsmall
// $spacing-small
// $font-weight-bold
//
//
// Required Component Variables:
//
// $table-background-color: Sets the background colour of the table
// $table-border: Sets the table border
// $table-head-background-color: Sets the table head background colour
// $table-head-color: Sets the table head text colour
// $table-cell-min-width-small: Sets table cell (td) min width for small screens
// $table-cell-min-width-medium: Sets table cell (td) min width for medium screens
//
//

@mixin table {
  background-color: $table-background-color;
  max-width: 100%;
  overflow: auto;
  width: 100%;

  tr {
    th {
      border-bottom: $table-head-border;
      font-weight: $font-weight-bold;
      min-width: $table-cell-min-width-small;
      padding: $spacing-xsmall;
      text-align: left;
      vertical-align: top;

      @include breakpoint($bp-medium) {
        min-width: $table-cell-min-width-medium;
        padding: $spacing-small;
      }
    }
  }

  td {
    min-width: $table-cell-min-width-small;
    padding: $spacing-xsmall;
    vertical-align: top;

    @include breakpoint($bp-medium) {
      padding: $td-padding-medium;
      min-width: $table-cell-min-width-medium;
    }
  }

  tbody {
    tr {
      border-bottom: $table-border;

      td:first-child {
        font-weight: $font-weight-bold;
      }
    }
  }
}

@mixin table-inner {
  border-collapse: collapse;
  width: 100%;
}

.c-table {
  @include table;

  &__inner {
    @include table-inner;
  }
}