libs/barista-components/table/src/sort/sort-header.scss
@import '../../../core/src/style/variables';
@import '../../../core/src/style/interactive-common';

$dt-sort-header-arrow-margin: 4px;
$dt-sort-header-arrow-container-size: 12px;
$dt-sort-header-arrow-container-height: 14px;

.dt-sort-header-container {
  align-items: center;

  .dt-sort-header-disabled & {
    cursor: default;
  }
}

.dt-sort-header-button {
  color: $gray-600;
  border: none;
  background: 0 0;
  display: flex;
  align-items: flex-end;
  text-align: left;
  padding: 0;
  cursor: inherit;
  outline: 0;
  font: inherit;

  /*
    Commented focus style for now - until we figure out how to handle focus
    with mouse input
  &:focus {
    @include dt-focus-style();
  } */
}

.dt-sortable:hover {
  background-color: $gray-130;
  cursor: pointer;

  .dt-sort-header-button {
    color: $gray-700;
  }

  .dt-sort-header-arrow {
    fill: $gray-700;
  }
}

.dt-sort-header-arrow {
  width: $dt-sort-header-arrow-container-size;
  min-width: $dt-sort-header-arrow-container-size;
  height: $dt-sort-header-arrow-container-height;
  position: relative;
  display: flex;
  margin: 0 0 $dt-sort-header-arrow-margin $dt-sort-header-arrow-margin;

  .dt-icon {
    fill: $gray-300;
  }
}

.dt-sort-header-sorted {
  .dt-sort-header-button {
    color: $gray-700;
  }

  .dt-sort-header-arrow .dt-icon {
    fill: $gray-700;
  }
}

.dt-table-column-align-right .dt-sort-header-button {
  text-align: right;
}

.dt-table-column-align-center .dt-sort-header-button {
  text-align: center;
}
