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

.ma__listing-table {

  &__container {

    .pre-content > &,
    .post-content > &,
    .main-content--full .page-content > & {

      @include ma-container();
    }
  }

  table {
    border-collapse: collapse;
    width: 100%;

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

  tbody {

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

  tr {

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

  tr + tr {
    border-top-style: solid;
    border-top-width: 1px;
  }

  td, th {
    font-size: $fonts-xsmall;
    line-height: 1.5;
    padding: 10px 0;
    vertical-align: top;

    @media ($bp-small-max) {
      display: block;
      line-height: 1.25;
    }
  }

  th {
    letter-spacing: $letter-spacing-large;
    padding-right: 15px;
    padding-bottom: 0;
    text-align: left;
    text-transform: uppercase;

    @media ($bp-small-min) {
      padding-bottom: 10px;
      width: 33%;
    }
  }

  td {
    font-size: $fonts-small;
  }

  &__data-item {
    display: block;
  }

  &__extra {
    display: none;

    &.collapsed {
      visibility: hidden;
      display:block;
      height: 0px;
    }

    &.collapsing, &.expanding {
      position: relative;
      overflow: hidden;
      visibility: visible;
      -webkit-transition-property: height, visibility;
      transition-property: height, visibility;
      transition-duration: 0.35s;
      -webkit-transition-duration: 0.35s;
      transition-timing-function: ease;
      -webkit-transition-timing-function: ease;
    }

    &.expanded {
      height: auto;
      visibility: visible;
      display: block;
    }
  }

  &__expand-button {

    .ma__button-icon, .ma__button-icon:hover {

      &.ma__button-icon--expanded, &.ma__button-icon--quaternary-simple, &.ma__button-icon--quaternary-simple:hover {
        padding: 0px;
        font-size: $fonts-small;
        background-color: transparent
      }
    }
  }

  &__expand {

    > button {

      @include ma-button-reset;

      @include ma-link-underline;

      @include ma-chevron;
      font-size: $fonts-small;

      &:after {
        opacity: .5;
        margin-left: 0;
        border-width: 3px;
        height: 8px;
        width: 8px;
        transform: translateY(-45%) rotate(45deg);
      }

      span:first-child {
        display: inline;
      }

      span:nth-child(2) {
        display: none;
      }

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

      td.is-open & {

        &:after {
          transform: translateY(-55%) rotate(-135deg);
        }

        span:first-child {
          display: none;
        }

        span:nth-child(2) {
          display: inline;
        }
      }
    }
  }

  .main-content .ma__header-tags + & {
    border-top: 1px solid;
    margin-top: .5em;
  }
}

//theme

.ma__listing-table {

  tr + tr {
    border-top-color: $c-bd-divider;
  }

  &__expand {

    > button {
      color: $c-primary;
      font-weight: $fonts-normal;
    }
  }

  .main-content .ma__header-tags + & {
    border-color: $c-bd-divider;
  }
}