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

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

  .ma__table__caption,
  & td > table caption {
    color: var(--mf-c-font-heading);
    font-weight: $fonts-bold;
    line-height: 1.3;
    text-align: left;
    margin: 0.5em;

    &.hide {
      display: none;
    }

    &__content {
      display: inline-block;
      width: 100%;
    }
  }

  thead {
    background-color: var(--mf-c-bg-subtle);

    th {
      color: var(--mf-c-font-heading);
      border: none;
      line-height: 1.3;
    }
  }

  tbody {
    border-top: 2px solid var(--mf-c-bd-divider);
  }

  tr + tr {
    border-top: 1px solid var(--mf-c-bd-divider);
  }

  th, td {
    font-size: $fonts-medium;
    text-align: left;
    vertical-align: top;
    padding: 0.5rem;
  }
}

.ma__table {

  .ma__table__caption {
    font-size: $fonts-medium
  }

  th {
    color: var(--mf-c-font-detail);
  }

  tr > *:first-child {
    padding-left: 10px;

     @media ($bp-medium-min) {

      padding-left: 15px;
     }
  }
}