@mixin firstChild_TD_MQ {
  padding-left: 14px;
}

@mixin TD_MQ {
  display: table-cell;
  font-size: 16px;
  padding: 10px 15px;
  border-top: 1px solid $color-mercury;
}

@mixin TH_MQ {
  display: table-cell;
}

@mixin TR_MQ {
  border: 1px solid transparent;
  display: table-row;
}

@mixin HOVER_TD_MQ {
  border-top: solid 1px $color-axa-blue;
  border-bottom: solid 1px $color-axa-blue;
}

axa-table > table {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  text-decoration: none;
  width: 100%;
  border-collapse: collapse;

  th, td {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.02em;
    padding: 2px 10px;
    color: $color-dark-grey;
    text-align: left;

      &:first-child {
        @media (min-width: $breakpoint-sm) {
        @include firstChild_TD_MQ;
      }
    }

    @media (min-width: $breakpoint-sm) {
      @include TD_MQ;
    }
  }

  th {
    color: $color-dark-grey;
    font-weight: 700;

    display: none;

    @media (min-width: $breakpoint-sm) {
      @include TH_MQ;
    }
  }

  tr {
    border: 1px solid transparent;
    border-top: 1px solid $color-mercury;
    padding: 20px 0;
    display: block;
    box-sizing: border-box;

    &:last-child {
      border-bottom: 1px solid $color-mercury;
    }

    @media (min-width: $breakpoint-sm) {
      @include TR_MQ;
    }
  }

  tbody {
    tr {
      &:hover,
      &:active,
      &:focus {
        border: solid 1px $color-axa-blue;

        td {
          @media (min-width: $breakpoint-sm) {
            @include HOVER_TD_MQ;
          }
        }
      }
    }
  }

  thead {
    tr {
      display: none;

      @media (min-width: $breakpoint-sm) {
        @include TR_MQ;
      }
    }
  }
}

axa-table[innerscroll]:not([innerscroll="0"]) {
  width: 100%;
  overflow-x: auto;
  display: block;
  position: relative;
  padding-bottom: 20px;

  > table {
    th, td {
      &:first-child {
        @include firstChild_TD_MQ;
      }

      @include TD_MQ;
    }

    th {
      @include TH_MQ;
    }

    tr {
      @include TR_MQ;

      &:last-child {
        border-bottom: 1px solid $color-mercury;
      }

      &:hover,
      &:active,
      &:focus {
        td {
          @include HOVER_TD_MQ;
          
          &:first-child {
            border-left: solid 1px $color-axa-blue;
          }
        
          &:last-child {
            border-right: solid 1px $color-axa-blue;
          }
        }
      }
    }

    thead {
      tr {
        @include TR_MQ;
      }
    }
  }

  &[maxheight]:not([maxheight="0"]) {
    tbody {
      display: block;
      max-height: 160px;
      overflow-y: auto;
    }

    thead, tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
  }
}

td.o-table--light {
  color: $color-grey;
}

td.o-table--bold {
  font-weight: bold;
  color: $color-dark-grey;
}
