@import "../../sass/base/index";

.dfo-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  // Force scrollbars to show on Mac if the content is overflowing.
  // Source: https://stackoverflow.com/questions/7855590
  padding-bottom: $padding-xsmall;
  &::-webkit-scrollbar {
    -webkit-appearance: none;
    &:vertical {
      width: 5px;
    }
    &::horizontal {
      height: 5px;
    }
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid $background; /* should match background, can't be transparent */
    background-color: $darkborder;
  }
  &::-webkit-scrollbar-track {
    background-color: $background;
    border-radius: 8px;
  }

  table,
  tr,
  td,
  th {
    border: 0;
  }

  .table {
    border: 0;
    border-color: $darkborder !important;
    border-top: 1px solid $darkborder;
    border-bottom: 1px solid $darkborder;
    border-collapse: collapse;

    font-size: 1.6rem;
    font-variant-numeric: lining-nums tabular-nums;
    text-align: left;
    font-weight: 400;

    caption {
      margin: $padding-xsmall 0;
      padding: $padding-medium;
      border-top: 1px solid $darkborder;
      font-size: 1.6rem;
      font-weight: 400;
    }

    td,
    th {
      padding: 1.25rem 3rem 1.25rem 1.25rem;
      line-height: 2.2rem;
      vertical-align: top;
    }

    th {
      font-weight: 800;
    }

    thead {
      th {
        border-bottom: 4px solid $darkborder;
        vertical-align: bottom;
      }
    }

    tfoot {
      border-top: 3px solid $darkborder;
    }

    &.table--striped {
      tbody {
        tr:nth-child(odd) td {
          // specialcase handling for intranet because
          // $darkerbackground does not look that great as stripe.
          @if $site == "intranet" {
            background: #dce8f1;
          } @else {
            background: $darkerbackground;
          }
        }
      }
    }

    &.table--with-borders {
      td,
      th {
        border: 1px solid $darkborder;
        padding: 1rem 1.5rem;
      }

      thead th {
        border-bottom-width: 4px;
      }
    }
  }
}