index.scss

.o-table-sortable {
  &__th {
    &__flexcontainer {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    &__arrow {
      margin-left: 5px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      width: 0;
      height: 0;
      font-size: 0;
      line-height: 0;
      content: '';
      border-style: solid;
    }

    &__arrowup {
      border-bottom-width: 4px;
      border-bottom-color: $color-silver;
      border-top: none;
    }

    &__arrowdown {
      margin-top: 3px;
      border-top-width: 4px;
      border-top-color: $color-silver;
      border-bottom: none;
    }
  }

  th:not([aria-sort='none']) {
    cursor: pointer;
  }

  th[aria-sort='none']
    > div.o-table-sortable__th__flexcontainer
    > div.o-table-sortable__th__arrow-wrapper {
    display: none;
  }

  [tabindex] {
    cursor: pointer;
  }

  th[aria-sort='ascending'] {
    &:active,
    &:focus {
      .o-table-sortable__th__arrow {
        border-top-color: $color-axa-blue;
      }
    }

    &.o-table-sortable__th--selected {
      .o-table-sortable__th__arrow {
        border-bottom-color: $color-axa-blue;
      }
      .o-table-sortable__th__arrowdown {
        display: none;
      }
    }
  }

  th[aria-sort='descending'] {
    &:active,
    &:focus {
      .o-table-sortable__th__arrow {
        border-bottom-color: $color-axa-blue;
      }
    }

    &.o-table-sortable__th--selected {
      .o-table-sortable__th__arrow {
        border-top-color: $color-axa-blue;
      }
      .o-table-sortable__th__arrowup {
        display: none;
      }
    }
  }
}