$border-color: #e0e0e0;
$header-bg: #f5f7f9;
$header-color: #929499;
$zebra-bg: #fcfcfc;
$hovered-bg: #f3fdff;
$text-color: #3d3d3d;
$breakpoint-mobile-max: 767px;

.table {
  font-size: 12px;
  line-height: 20px;
  table-layout: fixed;
  border-collapse: collapse;
  border: $border-color 1px solid;

  thead {
    background-color: $header-bg;
    user-select: none;
    font-size: 10px;

    th {
      padding: 14px 20px;
      text-transform: uppercase;
      font-weight: 700;
      color: $header-color;
      text-shadow: 1px 1px 2px #fff, 0 0 0 $header-color;
      cursor: default;
    }
  }

  tbody {
    background-color: #fff;
  }

  td,
  th {
    padding: 16px 20px;
    text-align: left;
    vertical-align: middle;
    border-top: $border-color 1px solid;
    word-wrap: break-word;

    &.left {
      text-align: left;
    }

    &.center {
      text-align: center;
    }

    &.right {
      text-align: right;
    }

    &:first-child {
      padding-left: 35px;
    }

    &:last-child {
      padding-right: 35px;
    }
  }

  &.zebra tbody tr:nth-child(2n),
  &.zebra tbody + tbody:nth-child(2n - 1) {
    background-color: $zebra-bg;
  }

  &.hovered tbody tr:hover {
    background-color: $hovered-bg;
  }

  .placeholder {
    td {
      padding: 20px;
      text-align: center;
      text-transform: uppercase;
      color: #ababab;
      font-size: 10px;
    }

    &:hover {
      background-color: transparent !important;
    }
  }

  td table {
    box-shadow: none;

    tbody,
    tr {
      background-color: inherit !important;
    }

    td {
      box-shadow: none;

      &:first-child {
        padding-left: 0;
      }
    }
  }
}

.table.responsive {
  @media screen and (max-width: 700px) {
    display: block;
    box-shadow: none;
    border-top: none;

    thead,
    tfoot {
      display: none;
    }

    tbody,
    tr,
    td,
    th {
      display: block;

      &[hidden] {
        display: none;
      }
    }

    td,
    th {
      &:first-child {
        padding-left: 20px;
      }

      &::before {
        content: attr(data-title) ": ";
        text-transform: uppercase;
        font-size: 0.95em;
        font-weight: 600;
        line-height: 1;
        display: block;
        margin-bottom: 4px;
      }
    }

    td {
      width: 100% !important;
    }

    tr + tr,
    tbody + tbody {
      margin-top: 10px;
    }
  }
}