@import 'global';

.responsive-table {
  &-container {
    position: relative;
    table {
      margin-bottom: 0;
      table-layout: fixed;
      white-space: nowrap;
      thead {
        [data-tip]:hover:before,
        [data-tip]:hover:after,
        [data-tip]:focus:before,
        [data-tip]:focus:after {
          display: none;
        }
      }
    }
  }
  &-sticky {
    display: none;
  }
  &-container.sticky &-sticky {
    position: fixed;
    top: 0;
    background-color: $white;
    z-index: 1;
  }
  &-scrollable {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  &-left {
    position: absolute;
    display: inline-block;
    width: auto;
    background-color: $white;
    z-index: 2;
    box-shadow: rem-calc(5) 0 rem-calc(3) rem-calc(-3) lighten($grey, 20%);
    th:last-child,
    td:last-child {
      border-right: 0;
    }
  }
  &-source {
    position: relative;
    z-index: 1;
  }
  @media #{$large-up} {
    &-container {
      width: auto;
      table {
        margin-bottom: rem-calc(22);
        table-layout: auto;
        white-space: normal;
        thead {
          [data-tip]:hover:before,
          [data-tip]:hover:after,
          [data-tip]:focus:before,
          [data-tip]:focus:after {
            display: block;
          }
        }
      }
    }
    &-scrollable {
      width: auto;
      overflow-x: visible;
      overflow-y: visible;
    }
    &-left {
      display: none;
      box-shadow: none;
    }
    &-container.sticky &-sticky {
      display: table;
    }
  }
}