@use "00-base/configure" as *;

.ma__rich-text table,
.ma__table {
  border-collapse: collapse;
  width: 100%;

  thead {
    background-color: $c-bg-subtle;

    th {
      color: $c-font-heading;
      border: none;
      font-size: $fonts-larger;
      line-height: 1.3;
    }
  }

  tbody {
    border-top: 2px solid $c-bd-divider;
  }

  tr + tr {
    border-top: 1px solid $c-bd-divider;
  }

  th, td {
    font-size: $fonts-small;
    padding: 10px 20px 10px 0;
    text-align: left;
    vertical-align: top;

    &:first-child {
      padding-left: 15px;
    }
  }

  .is-offset th:first-child,
  .is-offset td:first-child {
    padding-left: 0;
  }
}

.ma__table {

  th {
    color: $c-font-detail;
  }

  @media ($bp-small-max) {
    display: block;

    thead {
      display: none;
    }

    tbody {
      display: block;
    }

    thead + tbody,
    tbody:first-child {
      border-top: 0;
    }

    tr {
      display: block;
    }

    td {

      &:before {
        color: $c-font-heading;
        font-weight: $fonts-normal;
      }
    }

    td,
    th {
      display: block;
      font-size: $fonts-medium;
      padding-left: 40% !important;
      padding-bottom: 0;
      position: relative;

      &:before {
        content: attr(data-label);
        height: 100%;
        position: absolute;
          top: 10px;
          left: 0;
        width: 35%;
      }
    }

    th {
      font-size: $fonts-medium;
      color: $c-font-heading;
      background-color: $c-bg-subtle;
    }
  }
}

.ma__table--wide {

  @media ($bp-medium-max) {
    display: block;

    thead {
      display: none;
    }

    tbody {
      display: block;
    }

    thead + tbody,
    tbody:first-child {
      border-top: 0;
    }

    tr {
      display: block;
    }

    td {

      &:before {
        color: $c-font-heading;
        font-weight: $fonts-normal;
      }
    }

    td,
    th {
      display: block;
      padding-left: 40% !important;
      position: relative;

      &:before {
        content: attr(data-label);
        height: 100%;
        position: absolute;
          top: 10px;
          left: 0;
        text-align: right;
        width: 35%;
      }
    }

    th {
      font-size: $fonts-medium;
      color: $c-font-heading;
      background-color: $c-bg-subtle;
    }
  }
}