/**
** TABLES
** Responsive styling for tables
** Applied for tables both with and without c-table class.
**/

.c-table {
  $scrollbar-height: 8px;
  margin: 0;

  &::-webkit-scrollbar {
    height: $scrollbar-height;
  }
  &::-webkit-scrollbar-track-piece {
    background: $brand-color--lighter;
    border-radius: $scrollbar-height;
  }
  &::-webkit-scrollbar-thumb {
    background: $brand-color--dark;
    border-radius: $scrollbar-height;
  }

  &__wrapper {
    margin: $spacing--large 0 $spacing--large 0;

    @include mq($from: desktop) {
      @include grids-expand(4,6,2);
    }

    &--has-scroll {
      .c-table {
        padding-bottom: $spacing;

        &__expand-button {
          @include mq($from: wide) {
            display: block;
          }
        }
      }
    }
  }

  &__expand-button {
    display: none;
    background: $brand-color--lighter;
    border: 0;
    height: 38px;
    width: 38px;
    border-radius: 0;
    margin: $spacing 0 0 auto;
  }

  &__expanded-table-wrapper {
    display: inline-block;
    background: $white;
    padding: $spacing--medium $spacing--medium $spacing--large $spacing--medium;
    margin: $spacing--large;
  }

  &__dialog {
    text-align: center;
  }

  &__content {
    text-align: center;
    position: relative;
  }

  &__left-shadow,
  &__right-shadow {
    position: absolute;
    z-index: 1;
    top: 0;
    height: calc(100% - #{$spacing--large});
    width: 15px;
    background-attachment: scroll, scroll;
    background-repeat: no-repeat;
    display: none;

    &--active {
      display: block;
    }
  }

  &__left-shadow {
    left: 0;
    background: radial-gradient(
        ellipse at left,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0) 75%
      )
      0 center;
  }

  &__right-shadow {
    right: 0;
    background: radial-gradient(
        ellipse at right,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0) 75%
      )
      0 center;
  }
}

.c-article table:not(.c-table),
article table:not(.c-table) {
  margin: $spacing--large 0 $spacing--large 0;
}

.c-table,
.c-article table,
article table {
  padding-left: 1px;
  padding-right: 1px;
  display: inline-block;
  vertical-align: top;
  font-size: 85%;
  table-layout: fixed;

  overflow-x: auto;
  max-width: 100%;

  // optional - enable iOS momentum scrolling
  -webkit-overflow-scrolling: touch;

  // scrolling shadows on left/right

  @include chinese() {
    th {
      @include font-size(18px, 22px);

      @include mq(tablet) {
        @include font-size(18px, 30px);
      }
    }

    thead tr:nth-child(2) th {
      @include font-size(16px,18px);

      @include mq(tablet) {
        @include font-size(18px, 26px);
      }
    }

    td {
      @include font-size(16px,22px);
      @include mq(tablet) {
        @include font-size(18px, 30px);
      }
    }
  }

  &:after,
  &:before {
    content: '';
    display: table;
    clear: both;
  }

  caption {
    background-color: transparent;
    font-weight: $font-weight-bold;
    @include font-size(16px, 20px);
    text-align: left;
    text-transform: uppercase;
    font-family: $font;
    margin-bottom: $spacing--small;
  }

  thead {
    overflow: hidden;
  }

  td,
  th {
    display: table-cell;
    padding: $spacing--small/2 $spacing--small;
  }

  th {
    font-weight: $font-weight-bold;
    border-bottom: 3px solid $brand-color--tertiary;
    font-family: $font;

    @include font-size(16px,22px);
    @include mq(tablet) {
      @include font-size(16px,30px);
    }

    @include chinese() {
      @include font-size(18px,22px);
      @include mq(tablet) {
        @include font-size(18px,30px);
      }
    }
  }

  tbody th {
    border-bottom: 0;
    border-right: 3px solid $brand-color--tertiary;
    padding: $spacing--small/1.5;
  }

  thead tr:nth-child(2) th {
    border: 1px solid $brand-grey--lighter;
    text-transform: none;
    @include font-size(14px,18px);
    @include mq(tablet) {
      @include font-size(15px, 26px);
    }
    font-weight: $font-weight-semibold;
    height: 40px;
    background-color: $brand-color--lighter;
    padding: $spacing/6 $spacing $spacing/6 $spacing/3;

    &:empty {
      background-color: transparent;
    }

    @include chinese() {
      @include font-size(16px,18px);
      @include mq(tablet) {
        @include font-size(18px, 26px);
      }
    }
  }

  td {
    border: 1px solid $brand-grey--lighter;
    vertical-align: top;
    line-height: 1.6em;

    @include font-size(14px,22px);
    @include mq(tablet) {
      @include font-size(15px,30px);
    }

    @include chinese() {
      @include font-size(16px,22px);
      @include mq(tablet) {
        @include font-size(18px,30px);
      }
    }

    p {
      line-height: 1.6em;
    }

    p:last-child {
      margin: 0;
    }

    img {
      max-width: 100%;
      min-width: 120px;
    }
  }

  // Remove excess spacing on headings inside table
  h1,
  h2,
  h3,
  h4,
  h5 {
    margin-top: 0;
  }

  ul {
    margin: 0 0 0 $spacing--small*1.4;
  }

  .c-figure {
    margin: 0;
    padding: 0;
    width: 100% !important;
    left: 0 !important;
  }
}

.c-styleguide-table {
  &__warning-cell {
    background: red;
    color: #fff;
  }
}