// ============================================================================
// :: Table
// ============================================================================

// ============================================================================
// :: Root
// ============================================================================
.l-table {
  position: relative;
}

// ============================================================================
// :: Settings
// ============================================================================
$_col-1: 100% / 12;
$_col-2: 100% / 6;
$_col-3: 100% / 4;
$_col-4: 33.3%;
$_col-5: 100% / 12 * 5;
$_col-6: 49.9%;
$_col-7: 100% / 12 * 7;
$_col-8: 66.5%;
$_col-9: 100% / 12 * 9;
$_col-10: 100% / 12 * 10;
$_col-11: 100% / 12 * 11;
$_col-12: 100%;

// ============================================================================
// :: Elements
// ============================================================================
.l-table__header {
  padding-bottom: 1rem;

  border-bottom: $border-width-base solid $border-color-1x-light;

  .l-table__row {
    padding: 0;

    border: none;
  }
}

.l-table__row {
  border-bottom: $border-width-base solid $border-color-1x-light;
}

.l-table__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;

  padding: 1.5rem 0;
}

.l-table__col {
  flex-grow: 1;
  flex-shrink: 1;
  align-self: auto;

  @include respond-to($breakpoint-tablet-default) {
    width: $_col-12;
  }
}

// Stack rows vertically on small viewports when text zoom is large (accessibility).
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  @include respond-to($breakpoint-tablet-default) {
    .l-table__row {
      flex-direction: column;
      align-items: stretch;
    }

    .l-table__col {
      width: 100%;
      max-width: 100%;
      flex-grow: 0;
    }
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.l-table__col--1-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-1;
  }
}

.l-table__col--2-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-2;
  }
}

.l-table__col--3-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-3;
  }
}

.l-table__col--4-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-4;
  }
}

.l-table__col--5-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-5;
  }
}

.l-table__col--6-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-6;
  }
}

.l-table__col--7-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-7;
  }
}

.l-table__col--8-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-8;
  }
}

.l-table__col--9-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-9;
  }
}

.l-table__col--10-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-10;
  }
}

.l-table__col--11-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-11;
  }
}

.l-table__col--12-12 {

  @include respond-at($breakpoint-tablet-default) {
    width: $_col-12;
  }
}