.c-data-table {
  &__wrapper {
    position: relative;
  }

  &__th--sortable {
    position: relative;
    transition: background-color $transition-duration $transition-easing;

    &:hover {
      background-color: $bg-light;
    }

    &:focus-within {
      background-color: $bg-light;
    }
  }

  &__sort {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    white-space: nowrap;
    color: rgba($body-color, 0.82);
    padding: 0.2rem 0.3rem 0.2rem 0;
    transition:
      color $transition-duration $transition-easing,
      background-color $transition-duration $transition-easing;

    &:hover {
      color: $body-color;
    }

    @include focus-visible($outline: $hks-stroke-current-2, $offset: 2px);

    &:focus-visible {
      color: $body-color;
      text-decoration: none;
    }

    &.is-active {
      color: $body-color;
      font-weight: 600;
    }
  }

  &__sort-label {
    line-height: 1.2;
  }

  &__sort-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    font-size: 1.15rem;
    line-height: 1;
    font-variation-settings:
      "FILL" 0,
      "wght" 400,
      "GRAD" 0,
      "opsz" 24;
    opacity: 0.42;
    transform: rotate(90deg);
    transition: none;
  }

  &__sort.is-active {
    .c-data-table__sort-icon {
      transition:
        opacity $transition-duration $transition-easing,
        transform $transition-duration $transition-easing;
    }
  }

  &__sort.is-active.is-asc {
    .c-data-table__sort-icon {
      opacity: 1;
      transform: rotate(-90deg);
    }
  }

  &__sort.is-active.is-desc {
    .c-data-table__sort-icon {
      opacity: 1;
      transform: rotate(90deg);
    }
  }
  .btn {
  }
}