<commit_before>@import '../../globals/scss/import-once';

@include exports('data-table-v2-sort') {
  .#{$prefix}--table-sort-v2--ascending {
    .#{$prefix}--table-sort-v2__icon {
      transform: rotate(180deg);
      transition: transform 200ms $carbon--standard-easing;
    }
  }

  .#{$prefix}--table-sort-v2--active {
    .#{$prefix}--table-sort-v2__icon {
      opacity: 1;
    }
  }

  .#{$prefix}--data-table-v2 th {
    &:hover {
      .#{$prefix}--table-sort-v2__icon {
        opacity: 1;
      }
    }
  }

  .#{$prefix}--table-sort-v2 {
    @include button-reset(false);
    position: relative;
    left: 2px;
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;

    &:focus {
      outline: 0;

      svg {
        opacity: 1;
        outline: 1px solid $brand-01;
        fill: $brand-01;
        outline-offset: -0.5px; // safari fix
      }
    }
  }

  .#{$prefix}--table-sort-v2__icon {
    position: relative;
    left: 2px;
    transition: transform 200ms $carbon--standard-easing;
    transform: rotate(0);
    opacity: 0;
    fill: $ui-05;
    height: rem(9px);
    padding: $spacing-3xs;
    width: auto;
    max-width: 14px;<commit_msg>fix(data-table-v2): fix the icon that becomes small when column header wraps, resolves #720 (#742)<commit_after>@import '../../globals/scss/import-once';

@include exports('data-table-v2-sort') {
  .#{$prefix}--table-sort-v2--ascending {
    .#{$prefix}--table-sort-v2__icon {
      transform: rotate(180deg);
      transition: transform 200ms $carbon--standard-easing;
    }
  }

  .#{$prefix}--table-sort-v2--active {
    .#{$prefix}--table-sort-v2__icon {
      opacity: 1;
    }
  }

  .#{$prefix}--data-table-v2 th {
    &:hover {
      .#{$prefix}--table-sort-v2__icon {
        opacity: 1;
      }
    }
  }

  .#{$prefix}--table-sort-v2 {
    @include button-reset(false);
    position: relative;
    left: 2px;
    font: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;

    &:focus {
      outline: 0;

      svg {
        opacity: 1;
        outline: 1px solid $brand-01;
        fill: $brand-01;
        outline-offset: -0.5px; // safari fix
      }
    }
  }

  .#{$prefix}--table-sort-v2__icon {
    position: relative;
    left: 2px;
    transition: transform 200ms $carbon--standard-easing;
    transform: rotate(0);
    opacity: 0;
    fill: $ui-05;
    height: rem(9px);
    padding: $spacing-3xs;
    width: auto;
    min-width: 14px;
{'fraction_non_alphanumeric': 0.17405189620758482, 'fraction_numerical': 0.03632734530938124, 'mean_word_length': 2.1403508771929824, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6715748', 'n_tokens_mistral': 987, 'n_tokens_neox': 901, 'n_words': 168}