//
// Copyright IBM Corp. 2019, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import 'carbon-components/scss/components/data-table/data-table-sort';

// Height of header cell for sorting
//
// Ensure sort button takes 100% of the cell, by setting the same height as the parent row

:host(#{$prefix}-table-header-row) ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
  height: rem(48px);
}

:host(#{$prefix}-table-header-row[size='compact']) ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
  height: rem(24px);
}

:host(#{$prefix}-table-header-row[size='short']) ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
  height: rem(32px);
}

:host(#{$prefix}-table-header-row[size='tall']) ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
  height: rem(64px);
}

:host(#{$prefix}-table-header-cell[sort-direction]) .#{$prefix}--table-sort {
  height: 100%;
}

// Padding of header cell for sorting
//
// Let sort button rather than the cell define the padding

:host(#{$prefix}-table-header-row) ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
  padding-left: 0;
  padding-right: 0;
}

:host(#{$prefix}-table-header-cell[sort-direction]) .#{$prefix}--table-sort {
  padding-left: $spacing-04;
  padding-right: $spacing-04;
}

:host(#{$prefix}-table-header-cell[sort-direction]:first-of-type) .#{$prefix}--table-sort {
  padding-left: $spacing-05;
}

//
// Sort icon style
//

// Show sort icon of primary sorting column or one of hovered column
:host(#{$prefix}-table-header-cell[sort-active]) .bx--table-sort .bx--table-sort__icon,
:host(#{$prefix}-table-header-cell) .bx--table-sort:hover .bx--table-sort__icon {
  opacity: 1;
}

// `carbon-web-components` uses conditional rendering for choosing Arrows16 vs. ArrowDown16,
// and thus `display:none` here is not needed
:host(#{$prefix}-table-header-cell[sort-direction]) .bx--table-sort .bx--table-sort__icon {
  display: block;
}

:host(#{$prefix}-table-header-cell[sort-direction='ascending']) .#{$prefix}--table-sort__icon {
  transform: rotate(180deg);
}