@import 'settings';

@mixin vf-p-table-sortable {
  %heading-icon {
    $vertical-offset: 0.5px;
    @include vf-icon-chevron-themed;
    @include vf-icon-size(map-get($icon-sizes, default));

    background: {
      repeat: no-repeat;
      size: 100%;
    }

    content: '';
    display: inline-block;
    margin-left: $sp-x-small;
    // table heading text is smaller than the icon, so we need to compensate with negative top margin
    margin-top: calc(#{map-get($settings-text-x-small, font-size)}rem - $default-icon-size);
    vertical-align: calc($vertical-offset + 0.5 * $cap-height - 0.5 * $default-icon-size);
  }

  // stylelint-disable selector-max-type -- table elements can use selector types
  table th {
    &[aria-sort] {
      cursor: pointer;
      outline-color: $colors--theme--focus;
      white-space: nowrap;

      &:hover,
      &:focus-visible {
        color: $colors--theme--link-default;
      }

      .p-table__sort-button {
        // "inherit" styles are used to ensure this uses th styles instead of button defaults
        background: inherit;
        border: none;
        color: inherit;
        display: inline-block;
        font: inherit;
        // Cancel the focus outline space to avoid affecting layout
        margin: -2px -#{$sph--x-small};
        max-width: 100%;
        outline-color: inherit;
        overflow: inherit;
        // Small spacer for the focus outline
        padding: 2px $sph--x-small;
        text-align: inherit;
        text-decoration: inherit;
        text-indent: inherit;
        text-overflow: inherit;
        text-transform: inherit;
        text-wrap: inherit;
        vertical-align: inherit;
        white-space: inherit;
      }
    }

    &[aria-sort='ascending']::after {
      @extend %heading-icon;

      -webkit-transform: rotate(180deg); // stylelint-disable-line property-no-vendor-prefix
      transform: rotate(180deg);
    }

    &[aria-sort='descending']::after {
      @extend %heading-icon;
    }

    &[aria-sort]:hover {
      text-decoration: underline;
    }
  }
  // stylelint-enable selector-max-type
}