.it-sort-header-container {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  letter-spacing: normal;

  // Needs to be reset since we don't want an outline around the inner
  // div which is focusable. We have our own alternate focus styling.
  outline: 0;

  .it-sort-header-disabled & {
    cursor: default;

    .it-sort-arrow {
      opacity: 0 !important;
      fill-opacity: 0 !important;
    }
  }

  // For the sort-header element, default inset/offset values are necessary to ensure that
  // the focus indicator is sufficiently contrastive and renders appropriately.
  &::before {
    $border-width: 3px;
    $offset: calc(#{$border-width} + 2px);
    margin: calc(#{$offset} * -1);
  }

  &.it-sort-header-position-before {
    flex-direction: row-reverse;
    justify-content: left;
    gap: 0.5rem;
  }

  .it-sort-arrow {
    opacity: 0;
    fill-opacity: 0;
    transition:
      fill-opacity 0.3s ease-out,
      opacity 0.3s ease-out;
    -moz-transition:
      fill-opacity 0.3s ease-out,
      opacity 0.3s ease-out;
    -webkit-transition:
      fill-opacity 0.3s ease-out,
      opacity 0.3s ease-out;
    -o-transition:
      fill-opacity 0.3s ease-out,
      opacity 0.3s ease-out;
  }

  &:hover {
    .it-sort-arrow {
      opacity: 0.5;
      fill-opacity: 0.5;
    }
  }

  &.it-sort-header-sorted {
    .it-sort-arrow {
      opacity: 1 !important;
      fill-opacity: 1 !important;
    }
  }
}
