@import '../../../../ng-aquila/src/shared-styles/index';

$icon-width: 9px; // approximation: chevron icon svg path
$icon-height: 9px; // approximation: chevron icon svg path
$icon-shift: -1px; // approximation: shifting icon position

:host {
  cursor: pointer;
}

.nx-sort-header__icons-container {
  display: flex;
  margin-left: nx-spacer(s);
  vertical-align: bottom;
  width: $icon-width;

  position: relative;
  flex-direction: column;
  justify-content: center;

  :host-context([dir='rtl']) & {
    margin-right: initial;
    margin-left: nx-spacer(s);
  }

  .nx-sort-header {
    &__unsorted {
      font-size: nx-font-size(2xs);
      position: relative;
      font-weight: nx-font-weight(semibold);
      width: $icon-width;
      height: $icon-height;
    }

    &__ascend,
    &__descend {
      font-weight: nx-font-weight(regular);
      font-size: var(--table-sort-icon-size);
      width: $icon-width;
      top: $icon-shift;
      position: relative;
      transform: rotate(90deg);
    }
  }
}

.nx-sort-header__focus-container {
  display: flex;
}

.nx-sort-header__focus-container:focus {
  // don't show inner dotted border on firefox
  outline: 0;

  &.cdk-keyboard-focused {
    @include focus-style;
    border-radius: nx-border-radius(s);
  }
}

@media screen and (forced-colors: active) {
  .nx-sort-header__focus-container {
    color: buttonText;
  }
}
