table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  .operations {
    min-width: 4rem;
    position: relative;
    text-align: center;
  }

  .menu-icon {
    text-align: center;
    cursor: pointer;
    user-select: none;
  }
}

th {
  border: none;
  padding: 1rem 1.6rem;
  vertical-align: middle;
  color: colors('base900');
  background-color: colors('base200');
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  text-align: left;
  line-height: 1;
}

td {
  padding: 1rem 1.6rem;
  vertical-align: middle;
  color: colors('base900');
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  text-align: left;
  line-height: inherit;
}

tr:hover,
.tr:hover {
  background-color: colors('base100');
}

tr:not(:last-of-type) > td {
  border-bottom: 1px solid colors('base200');
}

.sorting-arrow {
  padding: 0.3rem;
  position: absolute;
  right: 0.4rem;
  color: colors('base200');
  font-size: 1rem;
  cursor: pointer;

  &.active {
    color: colors('base900');
  }

  &.top {
    top: 0.4rem;
  }

  &.bottom {
    bottom: 0.4rem;
  }
}

.table {
  @extend table;
  display: table;

  .tr {
    @extend tr;
    display: table-row;
  }

  .th,
  .td {
    display: table-cell;
  }

  .th {
    @extend th;
    border-bottom: 1px solid colors('base200');
  }

  .td {
    @extend td;
  }

  .tr:not(:last-of-type) > .td {
    border-bottom: 1px solid colors('base200');
  }

  .thead {
    display: table-header-group;
  }

  .tbody {
    display: table-row-group;
  }

  .fa {
    vertical-align: middle;
  }
}

.table-container {
  margin-bottom: 2.4rem;
}

.table-responsive {
  overflow: hidden;
  width: 100%;
  position: relative;

  .table-container-scrollable {
    overflow-x: auto;
  }

  // forces scrollbar for webkit
  ::-webkit-scrollbar {
    height: 1.2rem;
  }

  ::-webkit-scrollbar-track {
    background: #f0f0f0;
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.15) inset;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 0.6px;
    background: #ccc;
  }

  thead > tr > th,
  tbody > tr > td,
  .thead > .tr > .th,
  .tbody > .tr > .td {
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.table-heading {
  display: grid;
  margin-bottom: 2.4rem;
  grid-template-columns: 50% minmax(18rem, 50%);
  grid-column-gap: 6.4rem;
  align-items: flex-end;
  line-height: 1;
}

.items-to-show {
  max-width: 24rem;
  grid-column: 2 / -1;
  justify-self: end;
}

.table-footer {
  display: grid;
  margin-bottom: 2.4rem;
  grid-template-areas: 'counter pagination';
  grid-template-columns: repeat(2, auto);
  align-items: center;
  justify-content: space-between;
}

.table-counter {
  @extend %truncate;
  grid-area: counter;
}

.table-pagination {
  grid-area: pagination;
}

.table-triggers {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  > * {
    border-right: 1px solid colors('base200');
    padding: 0 1.6rem;

    &:first-of-type {
      padding-left: 0;
    }

    &:last-of-type {
      border-right: none;
      padding-right: 0;
    }
  }
}