.cell-label {
  &:hover {
    a {
      color: $action-color;
    }

    svg {
      fill: $action-color;
      transform: rotate(180deg);
    }
  }

  a {
    color: inherit;
    display: inline-block;
    transition: color $base-duration $base-timing;
    width: 100%;
  }
}

.cell-label--asc,
.cell-label--desc {
  font-weight: $bold-font-weight;
}

.cell-label__sort-indicator {
  float: right;
  margin-left: 5px;

  svg {
    fill: $hint-grey;
    height: 13px;
    transition: transform $base-duration $base-timing;
    width: 13px;
  }
}

.cell-label__sort-indicator--desc {
  transform: rotate(180deg);
}

.cell-data {
  a {
    color: $base-font-color;
  }
}

.cell-data--number,
.cell-label--number {
  text-align: right;
}

.cell-data--red {
  color: $red;

  a {
    color: inherit;
  }
}