// Sorting - using :before (asc) and :after (desc) with UTF8 characters
table.dataTable thead {
  > tr > th,
  > tr > td {
    &.dt-orderable-asc,
    &.dt-orderable-desc {
      padding-right: 30px;
    }

    &:active {
      outline: none;
    }

    &.dt-orderable-asc,
    &.dt-orderable-desc {
      cursor: pointer;
      position: relative;

      &:before,
      &:after {
        position: absolute;
        display: block;
        opacity: 0.125;
        right: 1em;
        line-height: 9px;
        font-size: 0.9em;
      }

      &:before {
        font-family: "Font Awesome 5 Free";
        bottom: 50%;
        content: "\f0d8"; // up arrow - ascending
      }

      &:after {
        font-family: "Font Awesome 5 Free";
        top: 50%;
        content: "\f0d8"; // down arrow - descending
      }
    }

    &.dt-ordering-asc:before,
    &.dt-ordering-desc:after {
      opacity: 0.6;
    }
  }
}