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

.ma__table--responsive {
  position: relative;
  margin-bottom: 1em;

  /*
    Default Scrollbars
    For WebKit (Chrome, Safari, Opera)
    Note: These selectors dont' work with Firefox or IOS Safari
  */

  ::-webkit-scrollbar {
    height: 12px; /* Width of the scrollbar for scrollbar x*/
  }

  ::-webkit-scrollbar-track {
    background: #fff;
    border: 2px solid #8AAAC7;
  }

  ::-webkit-scrollbar-thumb {
    background: #8AAAC7;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #14558F;
  }
}

.ma__table--responsive__wrapper {
  // Pure CSS scrolling shadows with background-attachment: local.
  // Code taken from https://codepen.io/aardrian/pen/MWeRJWd
  background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
  linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%) 0 100%,
  linear-gradient(to right, $c-gray-light 30%, rgba(255, 255, 255, 0)),
  linear-gradient(to right, rgba(255, 255, 255, 0), $c-gray-light 70%) 0 100%,
  0 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
  border: 2px solid var(--mf-c-gray-light);
  overflow-x: auto;

  @media ($bp-medium-max) {

    overflow-y: hidden;
  }

  &[tabindex="0"]:focus {
    outline: 3px solid var(--mf-c-focus);
    outline-offset: 3px;
  }

}

.ma__table--responsive .sticky-thead {
    background: var(--mf-c-bg);
    border-collapse: collapse;
    box-shadow: 0 0 0 2px var(--mf-c-gray-light);
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: all 0.04s ease-in-out;
    // Prevent table from stretching to full size.
    width: auto;
    z-index: $z-sticky-header;

    &:before {
        background: var(--mf-c-bg);
        content: '';
        height: 100vh;
        left: 0;
        position: absolute;
        right: 0;
        top: -100vh;
        z-index: -1;
    }

    .sticky-thead-wrapper {
      overflow-x: auto;
      -ms-overflow-style: none;  // IE 10+
      overflow: -moz-scrollbars-none;  // Firefox

      &::-webkit-scrollbar {
        display: none;  // Safari and Chrome
      }
    }

    table {
      margin-bottom: 0;

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

        @media ($bp-medium-min) {

          padding-left: 15px;
        }
      }
    }
}

.ma__table--responsive.has-top-visible .sticky-thead {
    // Force stretch.
    width: 100%;
}

.ma__table--responsive td,
.ma__table--responsive th {
    box-sizing: border-box;
    font-size: $fonts-small;
    padding: 0.5rem;
}

.ma__table--responsive thead {
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
    box-shadow: 0 0 0 2px var(--mf-c-gray-light);
}