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

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

.p_v6 {
  .p_f4 {
    &::after {
      display: block;
    }
  }

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

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

.p_wz {
  .p_sz {
    margin-bottom: rem(52px);
  }
}

.p_hp {
  display: none;
}

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

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

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

.p_f4 {
  // 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_sz {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  // margin-left: $fixed-column-width;
}

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

.p_zh {
  border-bottom: 0;
}

.p_ux {
  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_cj {
  text-align: right;
}

.p_zd {
  @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_ac {
    visibility: hidden;
  }
}

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

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

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

  &.p_n9 {
    // stylelint-disable-next-line selector-max-class
    .p_tg {
      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_oq {
      justify-content: flex-start;
    }

    .p_qq {
      @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_qq {
        opacity: 1;
      }
    }
  }
}

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

.p_eo {
  @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)
}