$fixed-column-width: rem(160px);
$breakpoint: 768px;

.p_nc {
  position: relative;
  max-width: 100vw;
  overflow: hidden;
}

.p_bz {
  .p_lu {
    &::after {
      display: block;
    }
  }

  .p_ez {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: spacing() spacing(tight);

    @include breakpoint-after($breakpoint, inclusive) {
      justify-content: flex-end;
    }
  }
}

.p_k3 {
  .p_xv {
    margin-bottom: rem(52px);
  }
}

.p_ez {
  display: none;
}

.p_q1 {
  height: rem(6px);
  width: rem(6px);
  background: color('ink', 'lightest');
  border-radius: border-radius();

  &:not(:last-of-type) {
    margin-right: spacing(extra-tight);
  }
}

.p_w7 {
  background: color('ink');
}

.p_lu {
  // width: 100%;
  margin-left: $fixed-column-width * -1;
  width: calc(100% + #{$fixed-column-width});
  border-spacing: 0;

  // &::after {
  //   content: '';
  //   position: absolute;
  //   top: 0;
  //   bottom: 0;
  //   left: $fixed-column-width;
  //   display: none;
  //   width: 0.6rem;
  //   background: linear-gradient(
  //     to right,
  //     rgba(color('black'), 0.12),
  //     rgba(color('black'), 0)
  //   );
  // }
}

.p_xv {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  // margin-left: $fixed-column-width;
}

// .TableRow {
//   &:hover .p_zh {
//     @include breakpoint-after($breakpoint) {
//       background: color('sky', 'lighter');
//     }
//   }
// }

.p_tr {
  border-bottom: 0;
}

.p_zh {
  padding: spacing();
  border-bottom: border();
  white-space: nowrap;
  text-align: left;
  transition: background-color 0.2s ease-in-out;

  padding: spacing() spacing() 0;

  position: relative;
  max-width: $fixed-column-width;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.p_z8 {
  text-align: right;
}

.p_xx {
  @include text-emphasis-normal;
  @include text-breakword;
  position: sticky;
  top: auto;
  left: 0;
  min-width: $fixed-column-width;
  white-space: unset;
  text-align: left;
  backface-visibility: hidden; // stops painting on scroll (due to positioning)

  // padding-top: spacing(loose);
  // padding-bottom: spacing(loose);
  padding: spacing();

  max-width: none;
  right: -1 * spacing();
  right: 0;
  position: absolute;
  z-index: 0;

  &.p_sv {
    visibility: hidden;
  }
}

.p_pk {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.p_h4 {
  min-width: $fixed-column-width;
  width: $fixed-column-width;
}

.p_sv {
  @include text-emphasis-subdued;
  font-weight: 400;
  border-bottom: border();

  &.p_jk {
    // stylelint-disable-next-line selector-max-class
    .p_le {
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      transition: fill duration() easing(), color duration() easing();
    } // stylelint-disable-next-line selector-max-class
    .p_x8 {
      justify-content: flex-start;
    }

    .p_hj {
      @include recolor-icon(color('indigo'));
      opacity: 0;
      transition: opacity duration() easing();
    }

    &:hover,
    &:focus {
      @include recolor-icon(color('indigo'));
      color: color('indigo');
      outline: none;
      cursor: pointer; // stylelint-disable-next-line selector-max-class, selector-max-specificity
      .p_hj {
        opacity: 1;
      }
    }
  }
}

.p_hp {
  @include text-emphasis-strong;
  background: color('sky', 'lighter');
  border-bottom: border();
}

.p_x7 {
  @include text-emphasis-normal;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border-bottom: 0;
  background: color('sky', 'light');
  color: color('ink', 'lighter');
  white-space: unset;
  text-align: center;
  backface-visibility: hidden; // stop painting on scroll (due to positioning)
}