<commit_before>.pf-c-table {

  // stylelint-disable
  // ============================================================ //
  // Start non-conformant variables
  //
  // these variables do not conform to guidelines as styling targets individual elements
  // this is purposeful and necessary to avoid adding selectors to each td/th
  // ============================================================ //

  // Base
  --pf-c-table--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-table--BorderColor: var(--pf-global--BorderColor--100);
  --pf-c-table--border-width--base: var(--pf-global--BorderWidth--sm);

  // Caption
  --pf-c-table-caption--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-table-caption--Color: var(--pf-global--Color--200);
  --pf-c-table-caption--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-table-caption--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-table-caption--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-table-caption--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-table-caption--xl--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-table-caption--xl--PaddingLeft: var(--pf-global--spacer--md);

  @media screen and (max-width: $pf-global--breakpoint--xl) {
    --pf-c-table-caption--PaddingRight: var(--pf-c-table-caption--xl--PaddingRight);
    --pf-c-table-caption--PaddingLeft: var(--pf-c-table-caption--xl--PaddingLeft);
  }

  // Thead
  --pf-c-table--thead--cell--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-table--thead--cell--FontWeight: var(--pf-global--FontWeight--bold);

  // Tbody cell
  --pf-c-table--tbody--cell--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-table--tbody--cell--PaddingBottom: var(--pf-global--spacer--lg);

  // Th / td shared variables
  --pf-c-table--cell--FontSize: var(--pf-global--FontSize--md);
  --pf-c-table--cell--FontWeight: var(--pf-global--FontWeight--normal);
  --pf-c-table--cell--Color: var(--pf-global--Color--100);
  --pf-c-table--cell--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-table--cell--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-table--cell--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-table--cell--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-table--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-table--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg);

  // Default cell variables
  --pf-c-table--cell--MinWidth: 0;
  --pf-c-table--cell--MaxWidth: none;
  --pf-c-table--cell--Width: auto;
  --pf-c-table--cell--Overflow: visible;
  --pf-c-table--cell--TextOverflow: clip;
  --pf-c-table--cell--WhiteSpace: normal;
  --pf-c-table--cell--WordBreak: normal;

  // Help
  --pf-c-table--cell--m-help--MinWidth: 11ch;

  // Truncate
  --pf-c-table--m-truncate--cell--MaxWidth: 1px;
  --pf-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft));

  // Hidden visible
  --pf-c-table--cell--hidden-visible--Display: table-cell;
  // stylelint-enable

  // ============================================================ //
  // End non-conformant variables
  // ============================================================ //

  // Table cell - toggle
  --pf-c-table__toggle--c-button--MarginTop: calc(#{pf-size-prem(6px)} * -1);
  --pf-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
  --pf-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
  --pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;

  // Button
  --pf-c-table__button--BackgroundColor: transparent;
  --pf-c-table__button--Color: var(--pf-global--Color--100);
  --pf-c-table__button--hover--Color: var(--pf-global--Color--100);
  --pf-c-table__button--focus--Color: var(--pf-global--Color--100);
  --pf-c-table__button--active--Color: var(--pf-global--Color--100);
  --pf-c-table__button--OutlineOffset: calc(var(--pf-global--BorderWidth--lg) * -1);

  // Compact
  --pf-c-table--m-compact__toggle--PaddingTop: 0;
  --pf-c-table--m-compact__toggle--PaddingBottom: 0;

  // Check
  --pf-c-table__check--input--MarginTop: #{pf-size-prem(4px)};
  --pf-c-table__check--input--FontSize: var(--pf-global--FontSize--md);

  // Favorite
  --pf-c-table--cell--m-favorite--Color: var(--pf-global--Color--light-300);
  --pf-c-table__favorite--c-button--Color: var(--pf-global--Color--light-300);
  --pf-c-table__favorite--c-button--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-table__favorite--c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-table__favorite--c-button--MarginRight: calc(var(--pf-global--spacer--md) * -1);
  --pf-c-table__favorite--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-table__favorite--c-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
  --pf-c-table__favorite--m-favorited--c-button--Color: var(--pf-global--palette--gold-400);

  // Action
  --pf-c-table__action--PaddingTop: 0;
  --pf-c-table__action--PaddingRight: 0;
  --pf-c-table__action--PaddingBottom: 0;
  --pf-c-table__action--PaddingLeft: 0;

  // Inline edit
  --pf-c-table__inline-edit-action--PaddingTop: 0;
  --pf-c-table__inline-edit-action--PaddingRight: 0;
  --pf-c-table__inline-edit-action--PaddingBottom: 0;
  --pf-c-table__inline-edit-action--PaddingLeft: 0;

  // Expandable row
  // hardcoding to match design spec
  --pf-c-table__expandable-row--Transition: var(--pf-global--Transition);
  --pf-c-table__expandable-row--MaxHeight: #{pf-size-prem(450px)};
  --pf-c-table__expandable-row-content--Transition: var(--pf-global--Transition);
  --pf-c-table__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-table__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);

  // ::before border
  --pf-c-table__expandable-row--after--Top: calc(var(--pf-c-table--border-width--base) * -1);
  --pf-c-table__expandable-row--after--Bottom: calc(var(--pf-c-table--border-width--base) * -1);
  --pf-c-table__expandable-row--after--border-width--base: var(--pf-global--BorderWidth--lg);
  --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
  --pf-c-table__expandable-row--after--BorderColor: var(--pf-global--active-color--100);

  // Icon inline
  --pf-c-table__icon-inline--MarginRight: var(--pf-global--spacer--sm);

  // Sort cell
  --pf-c-table__sort--MinWidth: calc(6ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft) + var(--pf-c-table__sort-indicator--MarginLeft));

  // Sort button
  --pf-c-table__sort__button--PaddingTop: var(--pf-global--spacer--form-element);
  --pf-c-table__sort__button--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-table__sort__button--PaddingBottom: var(--pf-global--spacer--form-element);
  --pf-c-table__sort__button--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-table__sort__button--MarginTop: calc(var(--pf-c-table__sort__button--PaddingTop) * -1);
  --pf-c-table__sort__button--MarginBottom: calc(var(--pf-c-table__sort__button--PaddingBottom) * -1);
  --pf-c-table__sort__button--MarginLeft: calc(var(--pf-c-table__sort__button--PaddingLeft) * -1);
  --pf-c-table__sort__button--Color: var(--pf-global--Color--100);
  --pf-c-table__sort--m-selected__button--Color: var(--pf-global--active-color--100);
  --pf-c-table__sort--m-help--MinWidth: 15ch;

  // Sort indicator
  --pf-c-table__sort-indicator--Color: var(--pf-global--disabled-color--200);
  --pf-c-table__sort-indicator--MarginLeft: var(--pf-global--spacer--md);
  --pf-c-table__sort--m-selected__sort-indicator--Color: var(--pf-global--active-color--100);
  --pf-c-table__sort__button--hover__sort-indicator--Color: var(--pf-global--Color--100);
  --pf-c-table__sort__button--active__sort-indicator--Color: var(--pf-global--Color--100);
  --pf-c-table__sort__button--focus__sort-indicator--Color: var(--pf-global--Color--100);

  // Help
  --pf-c-table--th--m-help--MinWidth: 11ch;

  // Table header popover
  --pf-c-table__column-help--MarginLeft: var(--pf-global--spacer--xs);
  --pf-c-table__column-help--TranslateY: #{pf-size-prem(2px)};
  --pf-c-table__column-help--c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-table__column-help--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-table__column-help--c-button--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-table__column-help--c-button--PaddingLeft: var(--pf-global--spacer--sm);

  // Compound expansion toggle button
  --pf-c-table__compound-expansion-toggle__button--Color: var(--pf-global--active-color--100);
  --pf-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-global--link--Color--hover);
  --pf-c-table__compound-expansion-toggle__button--focus--Color: var(--pf-global--link--Color--hover);
  --pf-c-table__compound-expansion-toggle__button--active--Color: var(--pf-global--link--Color--hover);

  // ::before border treatment
  --pf-c-table__compound-expansion-toggle__button--before--border-width--base: var(--pf-global--BorderWidth--sm);
  --pf-c-table__compound-expansion-toggle__button--before--BorderColor: var(--pf-global--BorderColor--100);
  --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
  --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
  --pf-c-table__compound-expansion-toggle__button--before--Bottom: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
  --pf-c-table__compound-expansion-toggle__button--before--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);

  // ::before border treatment
  --pf-c-table__compound-expansion-toggle__button--after--border-width--base: var(--pf-global--BorderWidth--lg);
  --pf-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
  --pf-c-table__compound-expansion-toggle__button--after--Top: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
  --pf-c-table__compound-expansion-toggle__button--after--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);

  // Compact table
  --pf-c-table--m-compact-th--PaddingTop: calc(var(--pf-global--spacer--sm) + var(--pf-global--spacer--xs));
  --pf-c-table--m-compact-th--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--cell--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--cell--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--cell--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--cell--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-table--m-compact--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-table--m-compact__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
  --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);

  // Nested table
  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);

  // Modifier - expandable row expanded
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);

  @media screen and (min-width: $pf-global--breakpoint--xl) {
    --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-c-table--cell--first-last-child--xl--PaddingRight);
    --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--cell--first-last-child--xl--PaddingLeft);
    --pf-c-table--m-compact--cell--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft);
    --pf-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight);
  }

  @include pf-t-light; // This component always needs to be light

  // Base
  width: 100%;
  background-color: var(--pf-c-table--BackgroundColor);

  &.pf-m-fixed {
    table-layout: fixed;
  }

  &.pf-m-sticky-header {
    position: relative;

    > thead > tr {
      border-bottom: 0;

      > * {
        position: sticky;
        top: 0;
        z-index: var(--pf-global--ZIndex--xs);
        background: var(--pf-c-table--BackgroundColor);

        // stylelint-disable-next-line
        &::after {
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          content: "";
          border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
        }
      }
    }
  }

  // Standard table row (non-expandable)
  // exclude expandable rows
  tr:not(.pf-c-table__expandable-row) {
    border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
  }

  // Table cell
  tr > * {
    @include pf-hidden-visible(var(--pf-c-table--cell--hidden-visible--Display));

    // set position relative for ::before/::after borders
    position: relative;
    width: var(--pf-c-table--cell--Width);
    min-width: var(--pf-c-table--cell--MinWidth);
    max-width: var(--pf-c-table--cell--MaxWidth);
    padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);

    // default settings
    overflow: var(--pf-c-table--cell--Overflow);
    font-size: var(--pf-c-table--cell--FontSize);
    font-weight: var(--pf-c-table--cell--FontWeight);
    color: var(--pf-c-table--cell--Color);
    text-overflow: var(--pf-c-table--cell--TextOverflow);
    word-break: var(--pf-c-table--cell--WordBreak);
    white-space: var(--pf-c-table--cell--WhiteSpace);

    // First child padding left
    &:first-child {
      --pf-c-table--cell--PaddingLeft: var(--pf-c-table--cell--first-last-child--PaddingLeft);
    }

    // Last child padding right
    &:last-child {
      --pf-c-table--cell--PaddingRight: var(--pf-c-table--cell--first-last-child--PaddingRight);
    }

    &.pf-m-center {
      text-align: center;
    }

    &:empty {
      width: auto;
      min-width: 0;
      padding: 0;
    }

    &.pf-m-help {
      --pf-c-table--cell--MinWidth: var(--pf-c-table--cell--m-help--MinWidth);
    }

    &.pf-m-favorite {
      --pf-c-table__button--Color: var(--pf-c-table--cell--m-favorite--Color);
      --pf-c-table__sort--MinWidth: fit-content;
      --pf-c-table--cell--MaxWidth: fit-content;
      --pf-c-table--cell--Overflow: visible;
    }
  }

  // Table caption
  caption {
    padding-top: var(--pf-c-table-caption--PaddingTop);
    padding-bottom: var(--pf-c-table-caption--PaddingBottom);
    padding-left: var(--pf-c-table-caption--PaddingLeft);
    font-size: var(--pf-c-table-caption--FontSize);
    color: var(--pf-c-table-caption--Color);
    text-align: left;
    background-color: var(--pf-c-table--BackgroundColor);
  }

  // Table header cell
  thead {
    --pf-c-table--cell--FontSize: var(--pf-c-table--thead--cell--FontSize);
    --pf-c-table--cell--FontWeight: var(--pf-c-table--thead--cell--FontWeight);

    vertical-align: bottom;
  }

  // Table body cell
  // stylelint-disable
  tbody {
    --pf-c-table--cell--PaddingTop: var(--pf-c-table--tbody--cell--PaddingTop);
    --pf-c-table--cell--PaddingBottom: var(--pf-c-table--tbody--cell--PaddingBottom);

    > tr > * {
      overflow-wrap: break-word;
      vertical-align: baseline;
    }

    // Border treatment
    // using first child as row does not calculate height appropriately
    > tr > :first-child::after {
      position: absolute;

      // offset top to extend above tr border
      top: var(--pf-c-table__expandable-row--after--Top);
      bottom: var(--pf-c-table__expandable-row--after--Bottom);
      left: 0;
      content: "";

      // add border left
      background-color: transparent;
      border-left: var(--pf-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-c-table__expandable-row--after--BorderColor);
    }

    // Check table cell
    .pf-c-table__check {
      > input {
        margin-top: var(--pf-c-table__check--input--MarginTop);
        vertical-align: top;
      }
    }
  }
  // stylelint-enable

  // REMOVE PADDING FOR SPECIAL CELLS THAT CONTAIN BUTTONS
  // ==================================================================
  // unset padding, button adds appropriate padding
  // unset padding for these cells as the button within provides padding
  .pf-c-table__compound-expansion-toggle {
    &,
    &:first-child,
    &:last-child {
      // explicitly reset padding rather than css variable, as the button within uses the variable
      padding: 0;
    }
  }

  // set property here to increase specificity
  .pf-c-table__sort {
    min-width: var(--pf-c-table__sort--MinWidth);
  }

  .pf-m-help {
    min-width: var(--pf-c-table--th--m-help--MinWidth);
  }

  thead,
  .pf-m-truncate {
    --pf-c-table--cell--MinWidth: var(--pf-c-table--m-truncate--cell--MinWidth);
    --pf-c-table--cell--MaxWidth: var(--pf-c-table--m-truncate--cell--MaxWidth);
    --pf-c-table--cell--Overflow: hidden;
    --pf-c-table--cell--TextOverflow: ellipsis;
    --pf-c-table--cell--WhiteSpace: nowrap;
  }

  .pf-m-wrap {
    --pf-c-table--cell--MinWidth: 0;
    --pf-c-table--cell--MaxWidth: none;
    --pf-c-table--cell--Overflow: visible;
    --pf-c-table--cell--TextOverflow: clip;
    --pf-c-table--cell--WhiteSpace: normal;
  }

  .pf-m-nowrap {
    --pf-c-table--cell--MinWidth: 0;
    --pf-c-table--cell--MaxWidth: none;
    --pf-c-table--cell--Overflow: visible;
    --pf-c-table--cell--TextOverflow: clip;
    --pf-c-table--cell--WhiteSpace: nowrap;
  }

  .pf-c-table__icon,
  .pf-m-fit-content {
    --pf-c-table--cell--MinWidth: fit-content;
    --pf-c-table--cell--MaxWidth: fit-content;
    --pf-c-table--cell--Width: 1%;
    --pf-c-table--cell--Overflow: visible;
    --pf-c-table--cell--TextOverflow: clip;
    --pf-c-table--cell--WhiteSpace: nowrap;
  }

  .pf-m-break-word {
    --pf-c-table--cell--WordBreak: break-word;
    --pf-c-table--cell--WhiteSpace: normal;
  }

  // stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
  &.pf-m-no-border-rows > tbody {
    > tr {
      border-bottom: 0;

      > :first-child::after {
        border-left: 0;
      }
    }

    &:not(.pf-m-expanded) .pf-c-table__compound-expansion-toggle .pf-c-table__button::before {
      display: none;
    }

    &.pf-m-expanded > .pf-c-table__control-row {
      border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
    }

    .pf-c-table__control-row > .pf-c-table__compound-expansion-toggle:first-child > ::before {
      border-left-width: 0;
    }
  }
  // stylelint-enable
}

// Text
.pf-c-table__text {
  // Allow __text child to inherit th/td modifier settings
  // reset --pf-c-table--cell--MaxWidth here for element and children
  --pf-c-table--cell--MaxWidth: 100%;

  position: relative;
  display: block;
  width: var(--pf-c-table--cell--Width);
  min-width: var(--pf-c-table--cell--MinWidth);
  max-width: var(--pf-c-table--cell--MaxWidth);
  overflow: var(--pf-c-table--cell--Overflow);
  text-overflow: var(--pf-c-table--cell--TextOverflow);
  word-break: var(--pf-c-table--cell--WordBreak);
  white-space: var(--pf-c-table--cell--WhiteSpace);

  // Only apply these settings if specifically modified
  &.pf-m-truncate {
    --pf-c-table--cell--MinWidth: 100%;

    > * {
      overflow: var(--pf-c-table--cell--Overflow);
      text-overflow: var(--pf-c-table--cell--TextOverflow);
      white-space: var(--pf-c-table--cell--WhiteSpace);
    }
  }
}

// Button
.pf-c-table__button {
  position: static;
  width: 100%;
  padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);
  font-size: inherit;
  font-weight: inherit;
  color: var(--pf-c-table__button--Color);
  text-align: left;
  white-space: inherit;
  user-select: text;
  background-color: var(--pf-c-table__button--BackgroundColor);
  border: 0;

  // Define clickable area with invisible ::before pseudo
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    content: "";
  }

  &:hover {
    color: var(--pf-c-table__button--hover--Color);
  }

  &:focus {
    color: var(--pf-c-table__button--focus--Color);
  }

  &:active {
    color: var(--pf-c-table__button--active--Color);
  }
}

// Focus styles
.pf-c-table__sort,
.pf-c-table__compound-expansion-toggle {
  // Pass properties to text
  .pf-c-table__text {
    display: block;
    width: auto;
    overflow: var(--pf-c-table--cell--Overflow);
    text-overflow: var(--pf-c-table--cell--TextOverflow);
    white-space: var(--pf-c-table--cell--WhiteSpace);
  }
}

.pf-c-table__sort .pf-c-table__text {
  --pf-c-table--cell--MinWidth: 0;
}

// Sort content
// display grid for buttons is not supported
.pf-c-table__button-content,
.pf-c-table__column-help {
  display: inline-grid;
  align-items: end;
  justify-content: start;
  grid-template-columns: auto max-content;

  .pf-c-table__text {
    min-width: auto;
  }

  // stylelint-disable
  .pf-c-table thead.pf-m-nowrap &,
  .pf-c-table tr.pf-m-nowrap &,
  .pf-c-table th.pf-m-nowrap & {
    grid-template-columns: min-content max-content;
  }

  .pf-c-table thead.pf-m-fit-content &,
  .pf-c-table tr.pf-m-fit-content &,
  .pf-c-table th.pf-m-fit-content & {
    grid-template-columns: fit-content max-content;
  }

  .pf-c-table thead.pf-m-wrap &,
  .pf-c-table tr.pf-m-wrap &,
  .pf-c-table th.pf-m-wrap &,
  .pf-c-table thead.pf-m-truncate &,
  .pf-c-table tr.pf-m-truncate &,
  .pf-c-table th.pf-m-truncate & {
    grid-template-columns: auto max-content;
  }
  // stylelint-enable
}

// Minimize padding
.pf-c-table .pf-c-table__toggle,
.pf-c-table .pf-c-table__action,
.pf-c-table .pf-c-table__inline-edit-action {
  --pf-c-table--cell--PaddingBottom: 0;
}

// stylelint-disable
// Minimize width
.pf-c-table .pf-c-table__check,
.pf-c-table .pf-c-table__toggle,
.pf-c-table .pf-c-table__action,
.pf-c-table .pf-c-table__favorite,
.pf-c-table th.pf-m-favorite,
.pf-c-table .pf-c-table__inline-edit-action {
  --pf-c-table--cell--MinWidth: 0;
  --pf-c-table--cell--Width: 1%;
}
// stylelint-enable

// Toggle table cell
.pf-c-table__toggle {
  --pf-c-table--cell--PaddingRight: 0;
  --pf-c-table--cell--PaddingLeft: 0;

  vertical-align: top;

  .pf-c-button {
    margin-top: var(--pf-c-table__toggle--c-button--MarginTop);

    &.pf-m-expanded {
      .pf-c-table__toggle-icon {
        transform: rotate(var(--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
      }
    }
  }

  .pf-c-table__toggle-icon {
    transition: var(--pf-c-table__toggle--c-button__toggle-icon--Transition);
    transform: rotate(var(--pf-c-table__toggle--c-button__toggle-icon--Rotate));
  }

  svg {
    pointer-events: none;
  }
}

// Check table cell
.pf-c-table__check {
  --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
}

// Favorite body cell
.pf-c-table__favorite {
  .pf-c-button {
    --pf-c-button--m-plain--Color: var(--pf-c-table__favorite--c-button--Color);
    --pf-c-button--FontSize: var(--pf-c-table__favorite--c-button--FontSize);

    margin: var(--pf-c-table__favorite--c-button--MarginTop) var(--pf-c-table__favorite--c-button--MarginRight) var(--pf-c-table__favorite--c-button--MarginBottom) var(--pf-c-table__favorite--c-button--MarginLeft);

    @at-root .pf-m-favorited#{&} {
      --pf-c-button--m-plain--Color: var(--pf-c-table__favorite--m-favorited--c-button--Color);
    }
  }
}

// Table action cell
.pf-c-table__action,
.pf-c-table__inline-edit-action {
  --pf-c-table--cell--PaddingTop: 0;
  --pf-c-table--cell--PaddingRight: var(--pf-c-table__action--PaddingRight);
  --pf-c-table--cell--PaddingBottom: 0;
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table__action--PaddingLeft);

  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}

// Inline edit
.pf-c-table__inline-edit-action {
  --pf-c-table--cell--PaddingLeft: 0;
  --pf-c-table--cell--PaddingRight: 0;

  text-align: right;
}

// Compound expansion toggle
.pf-c-table__compound-expansion-toggle {
  --pf-c-table__button--Color: var(--pf-c-table__compound-expansion-toggle__button--Color);
  --pf-c-table__button--hover--Color: var(--pf-c-table__compound-expansion-toggle__button--hover--Color);
  --pf-c-table__button--focus--Color: var(--pf-c-table__compound-expansion-toggle__button--focus--Color);
  --pf-c-table__button--active--Color: var(--pf-c-table__compound-expansion-toggle__button--active--Color);

  position: relative;

  // show left border, use __text to truncate content
  &.pf-m-truncate {
    overflow: visible;
  }

  .pf-c-table__button {
    min-width: 100%;
    overflow: hidden;

    // Remove outline and apply to parent td
    &:hover,
    &:focus,
    &:active {
      outline: 0;
    }
  }

  // Apply borders to button to avoid conflicts with expanded states
  .pf-c-table__button::before,
  .pf-c-table__button::after {
    position: absolute;
    right: 0;
    content: "";
    border-style: solid;
    border-width: 0;
  }

  .pf-c-table__button::before {
    top: 0;
    bottom: var(--pf-c-table__compound-expansion-toggle__button--before--Bottom);
    left: var(--pf-c-table__compound-expansion-toggle__button--before--Left);
    border-color: var(--pf-c-table__compound-expansion-toggle__button--before--BorderColor);
    border-right-width: var(--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth);
    border-left-width: var(--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);
  }

  .pf-c-table__button::after {
    // overlap previous row's border
    top: var(--pf-c-table__compound-expansion-toggle__button--after--Top);
    left: var(--pf-c-table__compound-expansion-toggle__button--after--Left);
    pointer-events: none;
    border-color: var(--pf-c-table__compound-expansion-toggle__button--after--BorderColor);
    border-top-width: var(--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth);
  }

  &:hover,
  &:focus-within,
  &.pf-m-expanded {
    --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
    --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
    --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-c-table__compound-expansion-toggle__button--after--border-width--base);
  }

  &:first-child {
    --pf-c-table__compound-expansion-toggle__button--before--Left: 0;
    --pf-c-table__compound-expansion-toggle__button--after--Left: 0;
  }

  &.pf-m-expanded {
    .pf-c-table__button::before {
      border-bottom: var(--pf-c-table--BackgroundColor) solid var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
    }

    &:first-child {
      --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
    }
  }

  &:focus-within {
    outline-offset: var(--pf-c-table__button--OutlineOffset);

    // stylelint-disable media-feature-name-no-vendor-prefix
    @media (-webkit-min-device-pixel-ratio: 0) {
      outline-style: auto;
      outline-color: -webkit-focus-ring-color;
    }
    // stylelint-enable
  }
}

.pf-c-table__column-help-action {
  margin-left: var(--pf-c-table__column-help--MarginLeft);
  transform: translateY(var(--pf-c-table__column-help--TranslateY));

  .pf-c-button {
    --pf-c-button--PaddingRight: var(--pf-c-table__column-help--c-button--PaddingRight);
    --pf-c-button--PaddingLeft: var(--pf-c-table__column-help--c-button--PaddingLeft);

    margin-top: var(--pf-c-table__column-help--c-button--MarginTop);
    margin-bottom: var(--pf-c-table__column-help--c-button--MarginBottom);
    font-size: inherit;
    line-height: 1;
  }
}

// Table sort
// ==================================================================
.pf-c-table__sort {
  .pf-c-table__button {
    --pf-c-table--cell--PaddingTop: var(--pf-c-table__sort__button--PaddingTop);
    --pf-c-table--cell--PaddingRight: var(--pf-c-table__sort__button--PaddingRight);
    --pf-c-table--cell--PaddingBottom: var(--pf-c-table__sort__button--PaddingBottom);
    --pf-c-table--cell--PaddingLeft: var(--pf-c-table__sort__button--PaddingLeft);

    display: flex;
    width: auto;
    margin-top: var(--pf-c-table__sort__button--MarginTop);
    margin-bottom: var(--pf-c-table__sort__button--MarginBottom);
    margin-left: var(--pf-c-table__sort__button--MarginLeft);

    &:hover {
      --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--hover__sort-indicator--Color);
    }

    &:focus {
      --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--focus__sort-indicator--Color);
    }

    &:active {
      --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--active__sort-indicator--Color);
    }
  }

  &.pf-m-selected .pf-c-table__button {
    --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort--m-selected__sort-indicator--Color);

    // override state colors on text
    color: var(--pf-c-table__sort--m-selected__button--Color);
  }

  &.pf-m-help {
    --pf-c-table--th--m-help--MinWidth: var(--pf-c-table__sort--m-help--MinWidth);
  }
}

// Sort indicator
.pf-c-table__sort-indicator {
  grid-column: 2;
  margin-left: var(--pf-c-table__sort-indicator--MarginLeft);
  color: var(--pf-c-table__sort-indicator--Color);
  pointer-events: none;
}

// Expandable row
// ==================================================================
.pf-c-table__expandable-row {
  --pf-c-table--cell--PaddingTop: 0;
  --pf-c-table--cell--PaddingBottom: 0;

  position: relative;
  border-bottom: 0 solid transparent;
  box-shadow: 0 0 0 0 transparent;
<commit_msg>fix(table): added var for sortable text, updated sortable favorite color (#3732)<commit_after>.pf-c-table {

  // stylelint-disable
  // ============================================================ //
  // Start non-conformant variables
  //
  // these variables do not conform to guidelines as styling targets individual elements
  // this is purposeful and necessary to avoid adding selectors to each td/th
  // ============================================================ //

  // Base
  --pf-c-table--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-table--BorderColor: var(--pf-global--BorderColor--100);
  --pf-c-table--border-width--base: var(--pf-global--BorderWidth--sm);

  // Caption
  --pf-c-table-caption--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-table-caption--Color: var(--pf-global--Color--200);
  --pf-c-table-caption--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-table-caption--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-table-caption--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-table-caption--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-table-caption--xl--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-table-caption--xl--PaddingLeft: var(--pf-global--spacer--md);

  @media screen and (max-width: $pf-global--breakpoint--xl) {
    --pf-c-table-caption--PaddingRight: var(--pf-c-table-caption--xl--PaddingRight);
    --pf-c-table-caption--PaddingLeft: var(--pf-c-table-caption--xl--PaddingLeft);
  }

  // Thead
  --pf-c-table--thead--cell--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-table--thead--cell--FontWeight: var(--pf-global--FontWeight--bold);

  // Tbody cell
  --pf-c-table--tbody--cell--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-table--tbody--cell--PaddingBottom: var(--pf-global--spacer--lg);

  // Th / td shared variables
  --pf-c-table--cell--FontSize: var(--pf-global--FontSize--md);
  --pf-c-table--cell--FontWeight: var(--pf-global--FontWeight--normal);
  --pf-c-table--cell--Color: var(--pf-global--Color--100);
  --pf-c-table--cell--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-table--cell--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-table--cell--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-table--cell--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-table--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-table--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg);

  // Default cell variables
  --pf-c-table--cell--MinWidth: 0;
  --pf-c-table--cell--MaxWidth: none;
  --pf-c-table--cell--Width: auto;
  --pf-c-table--cell--Overflow: visible;
  --pf-c-table--cell--TextOverflow: clip;
  --pf-c-table--cell--WhiteSpace: normal;
  --pf-c-table--cell--WordBreak: normal;

  // Help
  --pf-c-table--cell--m-help--MinWidth: 11ch;

  // Truncate
  --pf-c-table--m-truncate--cell--MaxWidth: 1px;
  --pf-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft));

  // Hidden visible
  --pf-c-table--cell--hidden-visible--Display: table-cell;
  // stylelint-enable

  // ============================================================ //
  // End non-conformant variables
  // ============================================================ //

  // Table cell - toggle
  --pf-c-table__toggle--c-button--MarginTop: calc(#{pf-size-prem(6px)} * -1);
  --pf-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
  --pf-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
  --pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;

  // Button
  --pf-c-table__button--BackgroundColor: transparent;
  --pf-c-table__button--Color: var(--pf-global--Color--100);
  --pf-c-table__button--hover--Color: var(--pf-global--Color--100);
  --pf-c-table__button--focus--Color: var(--pf-global--Color--100);
  --pf-c-table__button--active--Color: var(--pf-global--Color--100);
  --pf-c-table__button--OutlineOffset: calc(var(--pf-global--BorderWidth--lg) * -1);

  // Compact
  --pf-c-table--m-compact__toggle--PaddingTop: 0;
  --pf-c-table--m-compact__toggle--PaddingBottom: 0;

  // Check
  --pf-c-table__check--input--MarginTop: #{pf-size-prem(4px)};
  --pf-c-table__check--input--FontSize: var(--pf-global--FontSize--md);

  // Favorite
  --pf-c-table--cell--m-favorite--Color: var(--pf-global--Color--light-300);
  --pf-c-table__favorite--c-button--Color: var(--pf-global--Color--light-300);
  --pf-c-table__favorite--c-button--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-table__favorite--c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-table__favorite--c-button--MarginRight: calc(var(--pf-global--spacer--md) * -1);
  --pf-c-table__favorite--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-table__favorite--c-button--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
  --pf-c-table__favorite--m-favorited--c-button--Color: var(--pf-global--palette--gold-400);
  --pf-c-table__sort--m-favorite__button__text--Color: var(--pf-global--Color--200);
  --pf-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-global--Color--100);
  --pf-c-table__sort--m-favorite__button--focus__text--Color: var(--pf-global--Color--100);
  --pf-c-table__sort--m-favorite__button--active__text--Color: var(--pf-global--Color--100);

  // Action
  --pf-c-table__action--PaddingTop: 0;
  --pf-c-table__action--PaddingRight: 0;
  --pf-c-table__action--PaddingBottom: 0;
  --pf-c-table__action--PaddingLeft: 0;

  // Inline edit
  --pf-c-table__inline-edit-action--PaddingTop: 0;
  --pf-c-table__inline-edit-action--PaddingRight: 0;
  --pf-c-table__inline-edit-action--PaddingBottom: 0;
  --pf-c-table__inline-edit-action--PaddingLeft: 0;

  // Expandable row
  // hardcoding to match design spec
  --pf-c-table__expandable-row--Transition: var(--pf-global--Transition);
  --pf-c-table__expandable-row--MaxHeight: #{pf-size-prem(450px)};
  --pf-c-table__expandable-row-content--Transition: var(--pf-global--Transition);
  --pf-c-table__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-table__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);

  // ::before border
  --pf-c-table__expandable-row--after--Top: calc(var(--pf-c-table--border-width--base) * -1);
  --pf-c-table__expandable-row--after--Bottom: calc(var(--pf-c-table--border-width--base) * -1);
  --pf-c-table__expandable-row--after--border-width--base: var(--pf-global--BorderWidth--lg);
  --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
  --pf-c-table__expandable-row--after--BorderColor: var(--pf-global--active-color--100);

  // Icon inline
  --pf-c-table__icon-inline--MarginRight: var(--pf-global--spacer--sm);

  // Sort cell
  --pf-c-table__sort--MinWidth: calc(6ch + var(--pf-c-table--cell--PaddingRight) + var(--pf-c-table--cell--PaddingLeft) + var(--pf-c-table__sort-indicator--MarginLeft));

  // Sort button
  --pf-c-table__sort__button--PaddingTop: var(--pf-global--spacer--form-element);
  --pf-c-table__sort__button--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-table__sort__button--PaddingBottom: var(--pf-global--spacer--form-element);
  --pf-c-table__sort__button--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-table__sort__button--MarginTop: calc(var(--pf-c-table__sort__button--PaddingTop) * -1);
  --pf-c-table__sort__button--MarginBottom: calc(var(--pf-c-table__sort__button--PaddingBottom) * -1);
  --pf-c-table__sort__button--MarginLeft: calc(var(--pf-c-table__sort__button--PaddingLeft) * -1);
  --pf-c-table__sort__button--Color: var(--pf-global--Color--100);
  --pf-c-table__sort--m-selected__button--Color: var(--pf-global--active-color--100);
  --pf-c-table__sort--m-help--MinWidth: 15ch;

  // Sort text
  --pf-c-table__sort__button__text--Color: currentColor;
  --pf-c-table__sort__button--hover__text--Color: currentColor;
  --pf-c-table__sort__button--focus__text--Color: currentColor;
  --pf-c-table__sort__button--active__text--Color: currentColor;

  // Sort indicator
  --pf-c-table__sort-indicator--Color: var(--pf-global--disabled-color--200);
  --pf-c-table__sort-indicator--MarginLeft: var(--pf-global--spacer--md);
  --pf-c-table__sort--m-selected__sort-indicator--Color: var(--pf-global--active-color--100);
  --pf-c-table__sort__button--hover__sort-indicator--Color: var(--pf-global--Color--100);
  --pf-c-table__sort__button--active__sort-indicator--Color: var(--pf-global--Color--100);
  --pf-c-table__sort__button--focus__sort-indicator--Color: var(--pf-global--Color--100);

  // Help
  --pf-c-table--th--m-help--MinWidth: 11ch;

  // Table header popover
  --pf-c-table__column-help--MarginLeft: var(--pf-global--spacer--xs);
  --pf-c-table__column-help--TranslateY: #{pf-size-prem(2px)};
  --pf-c-table__column-help--c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-table__column-help--c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-table__column-help--c-button--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-table__column-help--c-button--PaddingLeft: var(--pf-global--spacer--sm);

  // Compound expansion toggle button
  --pf-c-table__compound-expansion-toggle__button--Color: var(--pf-global--active-color--100);
  --pf-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-global--link--Color--hover);
  --pf-c-table__compound-expansion-toggle__button--focus--Color: var(--pf-global--link--Color--hover);
  --pf-c-table__compound-expansion-toggle__button--active--Color: var(--pf-global--link--Color--hover);

  // ::before border treatment
  --pf-c-table__compound-expansion-toggle__button--before--border-width--base: var(--pf-global--BorderWidth--sm);
  --pf-c-table__compound-expansion-toggle__button--before--BorderColor: var(--pf-global--BorderColor--100);
  --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: 0;
  --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
  --pf-c-table__compound-expansion-toggle__button--before--Bottom: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
  --pf-c-table__compound-expansion-toggle__button--before--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);

  // ::before border treatment
  --pf-c-table__compound-expansion-toggle__button--after--border-width--base: var(--pf-global--BorderWidth--lg);
  --pf-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
  --pf-c-table__compound-expansion-toggle__button--after--Top: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);
  --pf-c-table__compound-expansion-toggle__button--after--Left: calc(var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base) * -1);

  // Compact table
  --pf-c-table--m-compact-th--PaddingTop: calc(var(--pf-global--spacer--sm) + var(--pf-global--spacer--xs));
  --pf-c-table--m-compact-th--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--cell--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--cell--PaddingRight: var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--cell--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--cell--PaddingLeft: var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--cell--first-last-child--PaddingLeft: var(--pf-global--spacer--md);
  --pf-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-table--m-compact--FontSize: var(--pf-global--FontSize--sm);
  --pf-c-table--m-compact__expandable-row-content--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
  --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);

  // Nested table
  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);

  // Modifier - expandable row expanded
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);

  @media screen and (min-width: $pf-global--breakpoint--xl) {
    --pf-c-table--cell--first-last-child--PaddingRight: var(--pf-c-table--cell--first-last-child--xl--PaddingRight);
    --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--cell--first-last-child--xl--PaddingLeft);
    --pf-c-table--m-compact--cell--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--xl--PaddingLeft);
    --pf-c-table--m-compact--cell--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--xl--PaddingRight);
  }

  @include pf-t-light; // This component always needs to be light

  // Base
  width: 100%;
  background-color: var(--pf-c-table--BackgroundColor);

  &.pf-m-fixed {
    table-layout: fixed;
  }

  &.pf-m-sticky-header {
    position: relative;

    > thead > tr {
      border-bottom: 0;

      > * {
        position: sticky;
        top: 0;
        z-index: var(--pf-global--ZIndex--xs);
        background: var(--pf-c-table--BackgroundColor);

        // stylelint-disable-next-line
        &::after {
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          content: "";
          border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
        }
      }
    }
  }

  // Standard table row (non-expandable)
  // exclude expandable rows
  tr:not(.pf-c-table__expandable-row) {
    border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
  }

  // Table cell
  tr > * {
    @include pf-hidden-visible(var(--pf-c-table--cell--hidden-visible--Display));

    // set position relative for ::before/::after borders
    position: relative;
    width: var(--pf-c-table--cell--Width);
    min-width: var(--pf-c-table--cell--MinWidth);
    max-width: var(--pf-c-table--cell--MaxWidth);
    padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);

    // default settings
    overflow: var(--pf-c-table--cell--Overflow);
    font-size: var(--pf-c-table--cell--FontSize);
    font-weight: var(--pf-c-table--cell--FontWeight);
    color: var(--pf-c-table--cell--Color);
    text-overflow: var(--pf-c-table--cell--TextOverflow);
    word-break: var(--pf-c-table--cell--WordBreak);
    white-space: var(--pf-c-table--cell--WhiteSpace);

    // First child padding left
    &:first-child {
      --pf-c-table--cell--PaddingLeft: var(--pf-c-table--cell--first-last-child--PaddingLeft);
    }

    // Last child padding right
    &:last-child {
      --pf-c-table--cell--PaddingRight: var(--pf-c-table--cell--first-last-child--PaddingRight);
    }

    &.pf-m-center {
      text-align: center;
    }

    &:empty {
      width: auto;
      min-width: 0;
      padding: 0;
    }

    &.pf-m-help {
      --pf-c-table--cell--MinWidth: var(--pf-c-table--cell--m-help--MinWidth);
    }

    &.pf-m-favorite {
      --pf-c-table__button--Color: var(--pf-c-table--cell--m-favorite--Color);
      --pf-c-table__sort--MinWidth: fit-content;
      --pf-c-table--cell--MaxWidth: fit-content;
      --pf-c-table--cell--Overflow: visible;
    }
  }

  // Table caption
  caption {
    padding-top: var(--pf-c-table-caption--PaddingTop);
    padding-bottom: var(--pf-c-table-caption--PaddingBottom);
    padding-left: var(--pf-c-table-caption--PaddingLeft);
    font-size: var(--pf-c-table-caption--FontSize);
    color: var(--pf-c-table-caption--Color);
    text-align: left;
    background-color: var(--pf-c-table--BackgroundColor);
  }

  // Table header cell
  thead {
    --pf-c-table--cell--FontSize: var(--pf-c-table--thead--cell--FontSize);
    --pf-c-table--cell--FontWeight: var(--pf-c-table--thead--cell--FontWeight);

    vertical-align: bottom;
  }

  // Table body cell
  // stylelint-disable
  tbody {
    --pf-c-table--cell--PaddingTop: var(--pf-c-table--tbody--cell--PaddingTop);
    --pf-c-table--cell--PaddingBottom: var(--pf-c-table--tbody--cell--PaddingBottom);

    > tr > * {
      overflow-wrap: break-word;
      vertical-align: baseline;
    }

    // Border treatment
    // using first child as row does not calculate height appropriately
    > tr > :first-child::after {
      position: absolute;

      // offset top to extend above tr border
      top: var(--pf-c-table__expandable-row--after--Top);
      bottom: var(--pf-c-table__expandable-row--after--Bottom);
      left: 0;
      content: "";

      // add border left
      background-color: transparent;
      border-left: var(--pf-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-c-table__expandable-row--after--BorderColor);
    }

    // Check table cell
    .pf-c-table__check {
      > input {
        margin-top: var(--pf-c-table__check--input--MarginTop);
        vertical-align: top;
      }
    }
  }
  // stylelint-enable

  // REMOVE PADDING FOR SPECIAL CELLS THAT CONTAIN BUTTONS
  // ==================================================================
  // unset padding, button adds appropriate padding
  // unset padding for these cells as the button within provides padding
  .pf-c-table__compound-expansion-toggle {
    &,
    &:first-child,
    &:last-child {
      // explicitly reset padding rather than css variable, as the button within uses the variable
      padding: 0;
    }
  }

  // set property here to increase specificity
  .pf-c-table__sort {
    min-width: var(--pf-c-table__sort--MinWidth);
  }

  .pf-m-help {
    min-width: var(--pf-c-table--th--m-help--MinWidth);
  }

  thead,
  .pf-m-truncate {
    --pf-c-table--cell--MinWidth: var(--pf-c-table--m-truncate--cell--MinWidth);
    --pf-c-table--cell--MaxWidth: var(--pf-c-table--m-truncate--cell--MaxWidth);
    --pf-c-table--cell--Overflow: hidden;
    --pf-c-table--cell--TextOverflow: ellipsis;
    --pf-c-table--cell--WhiteSpace: nowrap;
  }

  .pf-m-wrap {
    --pf-c-table--cell--MinWidth: 0;
    --pf-c-table--cell--MaxWidth: none;
    --pf-c-table--cell--Overflow: visible;
    --pf-c-table--cell--TextOverflow: clip;
    --pf-c-table--cell--WhiteSpace: normal;
  }

  .pf-m-nowrap {
    --pf-c-table--cell--MinWidth: 0;
    --pf-c-table--cell--MaxWidth: none;
    --pf-c-table--cell--Overflow: visible;
    --pf-c-table--cell--TextOverflow: clip;
    --pf-c-table--cell--WhiteSpace: nowrap;
  }

  .pf-c-table__icon,
  .pf-m-fit-content {
    --pf-c-table--cell--MinWidth: fit-content;
    --pf-c-table--cell--MaxWidth: fit-content;
    --pf-c-table--cell--Width: 1%;
    --pf-c-table--cell--Overflow: visible;
    --pf-c-table--cell--TextOverflow: clip;
    --pf-c-table--cell--WhiteSpace: nowrap;
  }

  .pf-m-break-word {
    --pf-c-table--cell--WordBreak: break-word;
    --pf-c-table--cell--WhiteSpace: normal;
  }

  // stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
  &.pf-m-no-border-rows > tbody {
    > tr {
      border-bottom: 0;

      > :first-child::after {
        border-left: 0;
      }
    }

    &:not(.pf-m-expanded) .pf-c-table__compound-expansion-toggle .pf-c-table__button::before {
      display: none;
    }

    &.pf-m-expanded > .pf-c-table__control-row {
      border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
    }

    .pf-c-table__control-row > .pf-c-table__compound-expansion-toggle:first-child > ::before {
      border-left-width: 0;
    }
  }
  // stylelint-enable
}

// Text
.pf-c-table__text {
  // Allow __text child to inherit th/td modifier settings
  // reset --pf-c-table--cell--MaxWidth here for element and children
  --pf-c-table--cell--MaxWidth: 100%;

  position: relative;
  display: block;
  width: var(--pf-c-table--cell--Width);
  min-width: var(--pf-c-table--cell--MinWidth);
  max-width: var(--pf-c-table--cell--MaxWidth);
  overflow: var(--pf-c-table--cell--Overflow);
  text-overflow: var(--pf-c-table--cell--TextOverflow);
  word-break: var(--pf-c-table--cell--WordBreak);
  white-space: var(--pf-c-table--cell--WhiteSpace);

  // Only apply these settings if specifically modified
  &.pf-m-truncate {
    --pf-c-table--cell--MinWidth: 100%;

    > * {
      overflow: var(--pf-c-table--cell--Overflow);
      text-overflow: var(--pf-c-table--cell--TextOverflow);
      white-space: var(--pf-c-table--cell--WhiteSpace);
    }
  }
}

// Button
.pf-c-table__button {
  position: static;
  width: 100%;
  padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);
  font-size: inherit;
  font-weight: inherit;
  color: var(--pf-c-table__button--Color);
  text-align: left;
  white-space: inherit;
  user-select: text;
  background-color: var(--pf-c-table__button--BackgroundColor);
  border: 0;

  // Define clickable area with invisible ::before pseudo
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    content: "";
  }

  &:hover {
    color: var(--pf-c-table__button--hover--Color);
  }

  &:focus {
    color: var(--pf-c-table__button--focus--Color);
  }

  &:active {
    color: var(--pf-c-table__button--active--Color);
  }
}

// Focus styles
.pf-c-table__sort,
.pf-c-table__compound-expansion-toggle {
  // Pass properties to text
  .pf-c-table__text {
    display: block;
    width: auto;
    overflow: var(--pf-c-table--cell--Overflow);
    text-overflow: var(--pf-c-table--cell--TextOverflow);
    white-space: var(--pf-c-table--cell--WhiteSpace);
  }
}

.pf-c-table__sort .pf-c-table__text {
  --pf-c-table--cell--MinWidth: 0;
}

// Sort content
// display grid for buttons is not supported
.pf-c-table__button-content,
.pf-c-table__column-help {
  display: inline-grid;
  align-items: end;
  justify-content: start;
  grid-template-columns: auto max-content;

  .pf-c-table__text {
    min-width: auto;
  }

  // stylelint-disable
  .pf-c-table thead.pf-m-nowrap &,
  .pf-c-table tr.pf-m-nowrap &,
  .pf-c-table th.pf-m-nowrap & {
    grid-template-columns: min-content max-content;
  }

  .pf-c-table thead.pf-m-fit-content &,
  .pf-c-table tr.pf-m-fit-content &,
  .pf-c-table th.pf-m-fit-content & {
    grid-template-columns: fit-content max-content;
  }

  .pf-c-table thead.pf-m-wrap &,
  .pf-c-table tr.pf-m-wrap &,
  .pf-c-table th.pf-m-wrap &,
  .pf-c-table thead.pf-m-truncate &,
  .pf-c-table tr.pf-m-truncate &,
  .pf-c-table th.pf-m-truncate & {
    grid-template-columns: auto max-content;
  }
  // stylelint-enable
}

// Minimize padding
.pf-c-table .pf-c-table__toggle,
.pf-c-table .pf-c-table__action,
.pf-c-table .pf-c-table__inline-edit-action {
  --pf-c-table--cell--PaddingBottom: 0;
}

// stylelint-disable
// Minimize width
.pf-c-table .pf-c-table__check,
.pf-c-table .pf-c-table__toggle,
.pf-c-table .pf-c-table__action,
.pf-c-table .pf-c-table__favorite,
.pf-c-table th.pf-m-favorite,
.pf-c-table .pf-c-table__inline-edit-action {
  --pf-c-table--cell--MinWidth: 0;
  --pf-c-table--cell--Width: 1%;
}
// stylelint-enable

// Toggle table cell
.pf-c-table__toggle {
  --pf-c-table--cell--PaddingRight: 0;
  --pf-c-table--cell--PaddingLeft: 0;

  vertical-align: top;

  .pf-c-button {
    margin-top: var(--pf-c-table__toggle--c-button--MarginTop);

    &.pf-m-expanded {
      .pf-c-table__toggle-icon {
        transform: rotate(var(--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
      }
    }
  }

  .pf-c-table__toggle-icon {
    transition: var(--pf-c-table__toggle--c-button__toggle-icon--Transition);
    transform: rotate(var(--pf-c-table__toggle--c-button__toggle-icon--Rotate));
  }

  svg {
    pointer-events: none;
  }
}

// Check table cell
.pf-c-table__check {
  --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
}

// Favorite body cell
.pf-c-table__favorite {
  .pf-c-button {
    --pf-c-button--m-plain--Color: var(--pf-c-table__favorite--c-button--Color);
    --pf-c-button--FontSize: var(--pf-c-table__favorite--c-button--FontSize);

    margin: var(--pf-c-table__favorite--c-button--MarginTop) var(--pf-c-table__favorite--c-button--MarginRight) var(--pf-c-table__favorite--c-button--MarginBottom) var(--pf-c-table__favorite--c-button--MarginLeft);

    @at-root .pf-m-favorited#{&} {
      --pf-c-button--m-plain--Color: var(--pf-c-table__favorite--m-favorited--c-button--Color);
    }
  }
}

// Table action cell
.pf-c-table__action,
.pf-c-table__inline-edit-action {
  --pf-c-table--cell--PaddingTop: 0;
  --pf-c-table--cell--PaddingRight: var(--pf-c-table__action--PaddingRight);
  --pf-c-table--cell--PaddingBottom: 0;
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table__action--PaddingLeft);

  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}

// Inline edit
.pf-c-table__inline-edit-action {
  --pf-c-table--cell--PaddingLeft: 0;
  --pf-c-table--cell--PaddingRight: 0;

  text-align: right;
}

// Compound expansion toggle
.pf-c-table__compound-expansion-toggle {
  --pf-c-table__button--Color: var(--pf-c-table__compound-expansion-toggle__button--Color);
  --pf-c-table__button--hover--Color: var(--pf-c-table__compound-expansion-toggle__button--hover--Color);
  --pf-c-table__button--focus--Color: var(--pf-c-table__compound-expansion-toggle__button--focus--Color);
  --pf-c-table__button--active--Color: var(--pf-c-table__compound-expansion-toggle__button--active--Color);

  position: relative;

  // show left border, use __text to truncate content
  &.pf-m-truncate {
    overflow: visible;
  }

  .pf-c-table__button {
    min-width: 100%;
    overflow: hidden;

    // Remove outline and apply to parent td
    &:hover,
    &:focus,
    &:active {
      outline: 0;
    }
  }

  // Apply borders to button to avoid conflicts with expanded states
  .pf-c-table__button::before,
  .pf-c-table__button::after {
    position: absolute;
    right: 0;
    content: "";
    border-style: solid;
    border-width: 0;
  }

  .pf-c-table__button::before {
    top: 0;
    bottom: var(--pf-c-table__compound-expansion-toggle__button--before--Bottom);
    left: var(--pf-c-table__compound-expansion-toggle__button--before--Left);
    border-color: var(--pf-c-table__compound-expansion-toggle__button--before--BorderColor);
    border-right-width: var(--pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth);
    border-left-width: var(--pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);
  }

  .pf-c-table__button::after {
    // overlap previous row's border
    top: var(--pf-c-table__compound-expansion-toggle__button--after--Top);
    left: var(--pf-c-table__compound-expansion-toggle__button--after--Left);
    pointer-events: none;
    border-color: var(--pf-c-table__compound-expansion-toggle__button--after--BorderColor);
    border-top-width: var(--pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth);
  }

  &:hover,
  &:focus-within,
  &.pf-m-expanded {
    --pf-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
    --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
    --pf-c-table__compound-expansion-toggle__button--after--BorderTopWidth: var(--pf-c-table__compound-expansion-toggle__button--after--border-width--base);
  }

  &:first-child {
    --pf-c-table__compound-expansion-toggle__button--before--Left: 0;
    --pf-c-table__compound-expansion-toggle__button--after--Left: 0;
  }

  &.pf-m-expanded {
    .pf-c-table__button::before {
      border-bottom: var(--pf-c-table--BackgroundColor) solid var(--pf-c-table__compound-expansion-toggle__button--before--border-width--base);
    }

    &:first-child {
      --pf-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
    }
  }

  &:focus-within {
    outline-offset: var(--pf-c-table__button--OutlineOffset);

    // stylelint-disable media-feature-name-no-vendor-prefix
    @media (-webkit-min-device-pixel-ratio: 0) {
      outline-style: auto;
      outline-color: -webkit-focus-ring-color;
    }
    // stylelint-enable
  }
}

.pf-c-table__column-help-action {
  margin-left: var(--pf-c-table__column-help--MarginLeft);
  transform: translateY(var(--pf-c-table__column-help--TranslateY));

  .pf-c-button {
    --pf-c-button--PaddingRight: var(--pf-c-table__column-help--c-button--PaddingRight);
    --pf-c-button--PaddingLeft: var(--pf-c-table__column-help--c-button--PaddingLeft);

    margin-top: var(--pf-c-table__column-help--c-button--MarginTop);
    margin-bottom: var(--pf-c-table__column-help--c-button--MarginBottom);
    font-size: inherit;
    line-height: 1;
  }
}

// Table sort
// ==================================================================
.pf-c-table__sort {
  .pf-c-table__button {
    --pf-c-table--cell--PaddingTop: var(--pf-c-table__sort__button--PaddingTop);
    --pf-c-table--cell--PaddingRight: var(--pf-c-table__sort__button--PaddingRight);
    --pf-c-table--cell--PaddingBottom: var(--pf-c-table__sort__button--PaddingBottom);
    --pf-c-table--cell--PaddingLeft: var(--pf-c-table__sort__button--PaddingLeft);

    display: flex;
    width: auto;
    margin-top: var(--pf-c-table__sort__button--MarginTop);
    margin-bottom: var(--pf-c-table__sort__button--MarginBottom);
    margin-left: var(--pf-c-table__sort__button--MarginLeft);

    &:hover {
      --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--hover__sort-indicator--Color);
      --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort__button--hover__text--Color);
    }

    &:focus {
      --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--focus__sort-indicator--Color);
      --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort__button--focus__text--Color);
    }

    &:active {
      --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort__button--active__sort-indicator--Color);
      --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort__button--active__text--Color);
    }

    .pf-c-table__text {
      color: var(--pf-c-table__sort__button__text--Color);
    }
  }

  &.pf-m-selected .pf-c-table__button {
    --pf-c-table__sort-indicator--Color: var(--pf-c-table__sort--m-selected__sort-indicator--Color);
    --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort--m-selected__button__text--Color);

    // override state colors on text
    color: var(--pf-c-table__sort--m-selected__button--Color);
  }

  &.pf-m-help {
    --pf-c-table--th--m-help--MinWidth: var(--pf-c-table__sort--m-help--MinWidth);
  }

  &.pf-m-favorite {
    --pf-c-table__sort__button__text--Color: var(--pf-c-table__sort--m-favorite__button__text--Color);
    --pf-c-table__sort__button--hover__text--Color: var(--pf-c-table__sort--m-favorite__button--hover__text--Color);
    --pf-c-table__sort__button--focus__text--Color: var(--pf-c-table__sort--m-favorite__button--focus__text--Color);
    --pf-c-table__sort__button--active__text--Color: var(--pf-c-table__sort--m-favorite__button--active__text--Color);
    --pf-c-table__sort--m-selected__button__text--Color: currentColor;
  }
}

// Sort indicator
.pf-c-table__sort-indicator {
  grid-column: 2;
  margin-left: var(--pf-c-table__sort-indicator--MarginLeft);
  color: var(--pf-c-table__sort-indicator--Color);
  pointer-events: none;
}

// Expandable row
// ==================================================================
.pf-c-table__expandable-row {
  --pf-c-table--cell--PaddingTop: 0;
  --pf-c-table--cell--PaddingBottom: 0;

  position: relative;
  border-bottom: 0 solid transparent;
  box-shadow: 0 0 0 0 transparent;

{'fraction_non_alphanumeric': 0.21831841785438072, 'fraction_numerical': 0.006250295942042711, 'mean_word_length': 2.7027643036643094, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 35, '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': '1073058', 'n_tokens_mistral': 23782, 'n_tokens_neox': 23140, 'n_words': 2640}