@import "mixins";

table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 2rem;
  border-collapse: collapse;
  padding-bottom: 2em;

  thead {
    tr {
      @include transition(all, 0.3s, ease);

      th {
        color: #738f93;
        letter-spacing: 1.4px;
        font-size: 14px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        height: 48px;
        padding: 0 1.6em;
        vertical-align: middle;
        font-weight: 400;

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

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

        &.sortable {
          cursor: pointer;
          outline: none;

          &:hover {
            color : var(--secondary-color);
          }
        }
      }
    }
  }

  th, td {
    text-align: left;
    padding: 1.6rem;
    border-top: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;

    &.numeric {
      text-align: right;
    }
  }

  tbody {
    tr {
      padding: 0 30px;

      td {
        font-size: 0.8em;
        border-bottom: thin solid rgba(0, 0, 0, 0.12);
        height: 48px;
        padding: 0 16px;
        vertical-align: center !important;

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

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

      &:hover {
        background: #eeeeee;
      }

      &:last-child {
        margin-bottom: 30px;
      }
    }
  }
}