
// @require core/reset/reset.scss
// @require widgets/icon/icon.scss

/* SORTABLE HEADER */

table.sortable th[data-sort],
table th.sortable { // In order to better support datatables

  position: relative;
  cursor: pointer;
  padding-right: $table-sortable-th-padding-right;

  /* TEXT CENTER */

  &.text-center {
    padding-left: $table-sortable-th-padding-right; // In order to have the text perfectly aligned
  }

  /* HOVER */

  &:hover {
    background-color: $table-sortable-th-hover-bg-color;
  }

  /* ACTIVE */

  &:active {
    background-color: $table-sortable-th-active-bg-color;
  }

  /* BEFORE / AFTER */

  &:before,
  &:after {
    @extend %icon-base;
    @include absolute ( 0 $table-sortable-th-icon-right 0 false );
    margin: auto;
    opacity: 0;
  }

  /* BEFORE */

  &:before {
    content: $sortable-desc-icon;
    top: $soratable-table-th-icon-gutter;
  }

  /* AFTER */

  &:after {
    content: $sortable-asc-icon;
    bottom: $soratable-table-th-icon-gutter;
  }

  /* INACTIVE OPACITY */

  &:hover:before,
  &:hover:after,
  &.sort-desc:after,
  &.sort-asc:before {
    opacity: $table-sortable-th-icon-opacity;
  }

  /* ACTIVE OPACITY */

  &.sort-desc:before,
  &.sort-asc:after {
    opacity: $table-sortable-th-icon-active-opacity;
  }

}
