@import "../../styles/common";

.table {
  border-collapse: collapse;
  font-size: $font-size-6;
  text-align: left;
  width: 100%;
}

.lastColumnRight {
  .td:last-of-type {
    text-align: right;
  }
}

.thead {
}

.tbody {
}

.tr {
}

.th {
  border-bottom: 1px solid $black-20;
  font-weight: 600;
}

.td {
  border-bottom: 1px solid $black-10;
}

.th,
.td {
  padding: $spacing-small $spacing-medium;
}

.thBody {
  display: flex;
  align-items: center;
}

.th {
  &:hover,
  &:focus {
    .sortIcon {
      opacity: 0.33;
    }
  }
}

.thActive {
  .sortIcon.sortIcon {
    opacity: 1;
  }
}

.sortIcon {
  margin-top: -0.5em;
  margin-bottom: -0.5em;
  height: 1.4em;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.sortable {
  cursor: pointer;
}