@use "../_layout/mixins";

%table {
  background: var(--neutral--light);
  border: 2px solid var(--neutral--darker);
  border-collapse: collapse;

  th {
    background: var(--neutral--darker);
    color: var(--white);
    border: 1px solid var(--neutral--light);
  }
  td {
    border: 1px solid var(--neutral--darker);
  }
  td, th {
    padding: 0.7em;
  }
}
%tableCaption {
  display: table-caption;
  caption-side: top;
  line-height: 1.1;
  font-weight: var(--bold-weight);
  font-size: var(--step-1);
}

.table {
  @include mixins.figure();
  display: table;
  border-spacing: 0 0.5em;

  table {
    @extend %table;
  }
  figcaption {
    @extend %tableCaption;
  }
}

.table__table {
  @extend %table;
}
.table__caption {
  @extend %tableCaption;
}