.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--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-table--FontWeight: var(--pf-global--FontWeight--normal);

  // 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--md--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-table-caption--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-table-caption--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-table-caption--md--PaddingLeft: var(--pf-global--spacer--md);

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

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

  // Thead cell
  --pf-c-table-thead-cell--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-table-thead-cell--PaddingBottom: var(--pf-global--spacer--md);

  // Cell
  --pf-c-table-cell--hidden-visible--Display: table-cell;

  // Td
  --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
  // Padding vars must be individual as they are contextually reset
  --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--FontSize: var(--pf-global--FontSize--md);
  --pf-c-table-cell--first-last-child--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-table-cell--first-last-child--PaddingRight: var(--pf-global--spacer--lg);

  // ============================================================ //
  // 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--Transform: 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--Transform: rotate(360deg);
  --pf-c-table--m-compact__toggle--PaddingTop: 0;
  --pf-c-table--m-compact__toggle--PaddingBottom: 0;

  // Table cell - check
  --pf-c-table__check--input--MarginTop: #{pf-size-prem(3px)};
  --pf-c-table__check--input--FontSize: var(--pf-global--FontSize--md);

  // Table cell - 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;

  // Table cell - action
  --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--before--Width: var(--pf-global--BorderWidth--lg);
  --pf-c-table__expandable-row--before--BackgroundColor: var(--pf-global--active-color--100);
  --pf-c-table__expandable-row--before--ZIndex: var(--pf-global--ZIndex--sm);
  --pf-c-table__expandable-row--before--Top: calc(var(--pf-c-table--BorderWidth) * -1);
  --pf-c-table__expandable-row--before--Bottom: calc(var(--pf-c-table--BorderWidth) * -1);
  --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);

  // Sort indicator
  --pf-c-table__sort-indicator--MarginLeft: var(--pf-global--spacer--md);
  --pf-c-table__sort-indicator--Color: var(--pf-global--disabled-color--200);
  --pf-c-table__sort-indicator--hover--Color: var(--pf-global--Color--100);
  --pf-c-table__sort--c-button--Color: var(--pf-global--Color--100);
  --pf-c-table__sort-indicator--LineHeight: var(--pf-c-button--LineHeight);

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

  // 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);

  // ============================================================ //
  // Modifiers
  // ============================================================ //

  // Modifier - compact table
  --pf-c-table--m-compact-th--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-table--m-compact-th--PaddingBottom: var(--pf-global--spacer--md);
  --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--lg);
  --pf-c-table--m-compact-cell--first-last-child--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);

  // Modifier - compound expansion toggle
  --pf-c-table__compound-expansion-toggle--BorderTop--BorderWidth: var(--pf-global--BorderWidth--lg);
  --pf-c-table__compound-expansion-toggle--BorderTop--BorderColor: var(--pf-global--primary-color--100);
  --pf-c-table__compound-expansion-toggle--BorderRight--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-table__compound-expansion-toggle--BorderLeft--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-table__compound-expansion-toggle--BorderRight--BorderColor: var(--pf-global--BorderColor--100);
  --pf-c-table__compound-expansion-toggle--BorderLeft--BorderColor: var(--pf-global--BorderColor--100);
  --pf-c-table__compound-expansion-toggle--BorderBottom--BorderWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-table__compound-expansion-toggle--BorderBottom--BorderColor: var(--pf-global--BackgroundColor--light-100);

  // Modifier - expandable row expanded
  --pf-c-table__expandable-row--m-expanded--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BackgroundColor--light-100);

  // Modifier - sort
  --pf-c-table__sort--sorted--Color: var(--pf-global--active-color--100);

  // stylelint-enable

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

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

  td {
    word-break: break-word;
  }

  // Standard table row (non-expandable)
  // exclude expandable rows
  tr:not(.pf-c-table__expandable-row) {
    // hack: buttons inside table cells will not occupy full height of parent when adjacent cells'
    // content wraps. for those special cases, there must be an explicit height set on tr and table cell
    // for button height: 100% to work
    height: 1px;
    border-bottom: var(--pf-c-table--BorderWidth) solid var(--pf-c-table--BorderColor);

    // stylelint-disable-next-line
    &.pf-m-height-auto {
      height: auto;
    }
  }

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

    // set position relative for ::before borders
    position: relative;

    // hack: set table cell height to inherit, then buttons within to height: 100%
    height: inherit;

    // each value must be set individually as each of these values may be reset contextually
    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: var(--pf-c-table-cell--FontSize);
    font-weight: var(--pf-c-table--FontWeight);
    vertical-align: baseline;

    // 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;
    }
  }

  // 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--PaddingTop: var(--pf-c-table-thead-cell--PaddingTop);
    --pf-c-table-cell--PaddingBottom: var(--pf-c-table-thead-cell--PaddingBottom);
    --pf-c-table-cell--FontSize: var(--pf-c-table-thead--FontSize);
    --pf-c-table--FontWeight: var(--pf-c-table-thead--FontWeight);

    white-space: nowrap;
    vertical-align: top;
  }

  // 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);

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

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

      // add border left
      background-color: transparent;
    }

    // add background color when active
    &.pf-m-expanded > tr > :not(th):first-child::before {
      background-color: var(--pf-c-table__expandable-row--before--BackgroundColor);
    }
  }
  // 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__sort,
  .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;
    }

    .pf-c-button {
      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;
      text-align: left;
    }
  }
}

// Toggle, check, action - minimize width and padding.
.pf-c-table .pf-c-table__toggle,
.pf-c-table .pf-c-table__check,
.pf-c-table .pf-c-table__action,
.pf-c-table .pf-c-table__inline-edit-action {
  --pf-c-table-cell--PaddingBottom: 0;

  width: 1%;
}

// 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);

    > * {
      transition: var(--pf-c-table__toggle--c-button__toggle-icon--Transition);
      transform: var(--pf-c-table__toggle--c-button__toggle-icon--Transform);
    }

    &.pf-m-expanded {
      > * {
        transform: var(--pf-c-table__toggle--c-button--m-expanded__toggle-icon--Transform);
      }
    }
  }

  svg {
    pointer-events: none;
  }
}

// Check table cell
// ==================================================================
.pf-c-table__check {
  vertical-align: top;

  --pf-c-table-cell--FontSize: var(--pf-c-table__check--input--FontSize);

  > * {
    margin-top: var(--pf-c-table__check--input--MarginTop);
    vertical-align: top;
  }
}

// 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;
}

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

  text-align: right;
}

// Table toggle compount expansion
// using this method because the button may not always be full height of the parent cell if siblings wrap
// ==================================================================
.pf-c-table__compound-expansion-toggle {
  position: relative;

  &.pf-m-expanded {
    border-bottom: var(--pf-c-table__compound-expansion-toggle--BorderBottom--BorderWidth) solid var(--pf-c-table__compound-expansion-toggle--BorderBottom--BorderColor);
  }

  &.pf-m-expanded,
  &:hover {
    .pf-c-button::before {
      position: absolute;
      top: calc(var(--pf-c-table--BorderWidth) * -1);
      right: 0;
      left: 0;
      content: "";
      border-top: var(--pf-c-table__compound-expansion-toggle--BorderTop--BorderWidth) solid var(--pf-c-table__compound-expansion-toggle--BorderTop--BorderColor);
    }

    .pf-c-button::after {
      bottom: calc(var(--pf-c-table--BorderWidth) * -1);
      border-right: var(--pf-c-table__compound-expansion-toggle--BorderRight--BorderWidth) solid var(--pf-c-table__compound-expansion-toggle--BorderRight--BorderColor);
      border-left: var(--pf-c-table__compound-expansion-toggle--BorderLeft--BorderWidth) solid var(--pf-c-table__compound-expansion-toggle--BorderLeft--BorderColor);
    }
  }

  .pf-c-button {
    --pf-c-button--BorderRadius: 0;

    // hack: firefox doesn't respect height: 100%. borders are set with ::before & ::after which are
    // relative to the parent when setting button position: static
    position: static;
  }
}

// Table sort
// ==================================================================
.pf-c-table__sort {
  // override pf-m-plain color
  .pf-c-button {
    // stylelint-disable
    &.pf-m-plain {
      color: var(--pf-c-table__sort--c-button--Color);
    }
  }
  // stylelint-enable

  &.pf-m-wrap {
    .pf-c-button {
      display: flex;
      white-space: normal;
    }
  }

  &.pf-m-selected {
    // set button and indicator color
    .pf-c-button,
    .pf-c-table__sort-indicator {
      color: var(--pf-c-table__sort--sorted--Color);
    }
  }

  &:not(.pf-m-selected) {
    &:hover {
      .pf-c-table__sort-indicator {
        color: var(--pf-c-table__sort-indicator--hover--Color);
      }
    }
  }
}

// Sort indicator
.pf-c-table__sort-indicator {
  align-self: flex-start;
  margin-left: var(--pf-c-table__sort-indicator--MarginLeft);
  line-height: var(--pf-c-table__sort-indicator--LineHeight);
  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;

  &,
  td:first-child::before {
    transition: var(--pf-c-table__expandable-row--Transition);
  }

  // stylelint-disable
  td {
    &.pf-m-no-padding {
      padding: 0 0 0 var(--pf-c-table__expandable-row--before--Width); // set padding-left to adjust for left border.

      .pf-c-table__expandable-row-content {
        padding: 0;
      }
    }
  }
  // stylelint-enable

  .pf-c-table__expandable-row-content {
    padding-top: var(--pf-c-table__expandable-row-content--PaddingTop);
    padding-bottom: var(--pf-c-table__expandable-row-content--PaddingBottom);
  }

  // Modifier - Expanded tr
  &.pf-m-expanded {
    border-bottom-color: var(--pf-c-table__expandable-row--m-expanded--BorderBottomColor);
    border-bottom-width: var(--pf-c-table--BorderWidth);
    box-shadow: var(--pf-c-table__expandable-row--m-expanded--BoxShadow);
  }

  &:not(.pf-m-expanded) {
    display: none;
    visibility: hidden;
  }
}


// Nested table
// ==================================================================
.pf-c-table .pf-c-table {
  tr > * {
    // First child padding left
    &:first-child {
      --pf-c-table-cell--PaddingLeft: var(--pf-c-table--nested--first-last-child--PaddingLeft);
    }

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

// Compact table
// ==================================================================
.pf-c-table.pf-m-compact {
  --pf-c-table-cell--FontSize: var(--pf-c-table--m-compact--FontSize);

  &.pf-m-no-border-rows:not(.pf-m-expandable) {
    tbody {
      --pf-c-table--BorderWidth: 0;
      --pf-c-table--BorderColor: transparent;

      tr:first-child > * {
        --pf-c-table-cell--PaddingTop: calc(var(--pf-c-table--m-compact-cell--PaddingTop) * 2);
      }

      tr:last-child > * {
        --pf-c-table-cell--PaddingBottom: calc(var(--pf-c-table--m-compact-cell--PaddingBottom) * 2);
      }
    }
  }

  tr {
    --pf-c-table-cell--PaddingLeft: var(--pf-c-table--m-compact-cell--PaddingLeft);
    --pf-c-table-cell--PaddingRight: var(--pf-c-table--m-compact-cell--PaddingRight);

    &:not(.pf-c-table__expandable-row) {
      --pf-c-table-cell--FontSize: var(--pf-c-table--m-compact--FontSize);
      --pf-c-table-cell--PaddingTop: var(--pf-c-table--m-compact-cell--PaddingTop);
      --pf-c-table-cell--PaddingBottom: var(--pf-c-table--m-compact-cell--PaddingBottom);

      // stylelint-disable
      > * {
        &:first-child {
          --pf-c-table-cell--PaddingLeft: var(--pf-c-table--m-compact-cell--first-last-child--PaddingLeft);
        }

        &:last-child {
          --pf-c-table-cell--PaddingRight: var(--pf-c-table--m-compact-cell--first-last-child--PaddingRight);
        }
      }
      // stylelint-enable
    }
  }

  // Thead only
  thead {
    --pf-c-table--m-compact-cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
    --pf-c-table--m-compact-cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
  }

  .pf-c-table__action {
    --pf-c-table-cell--PaddingTop: var(--pf-c-table__action--PaddingTop);
    --pf-c-table-cell--PaddingBottom: var(--pf-c-table__action--PaddingBottom);
    --pf-c-table-cell--PaddingLeft: var(--pf-c-table__action--PaddingLeft);
  }

  .pf-c-table__toggle {
    --pf-c-table-cell--PaddingTop: var(--pf-c-table--m-compact__toggle--PaddingTop);
    --pf-c-table-cell--PaddingBottom: var(--pf-c-table--m-compact__toggle--PaddingBottom);
  }

  .pf-c-table__icon {
    text-align: center;
  }

  // nested tables
  .pf-c-table & tr > * {
    &:first-child {
      --pf-c-table-cell--PaddingLeft: var(--pf-c-table--nested--first-last-child--PaddingLeft);
    }

    &:last-child {
      --pf-c-table-cell--PaddingRight: var(--pf-c-table--nested--first-last-child--PaddingRight);
    }
  }

  .pf-c-table__expandable-row-content {
    --pf-c-table__expandable-row-content--PaddingTop: var(--pf-c-table--m-compact__expandable-row-content--PaddingTop);
    --pf-c-table__expandable-row-content--PaddingBottom: var(--pf-c-table--m-compact__expandable-row-content--PaddingBottom);
  }
}

// Icon inline
// replace this when inline text with icon is in place
.pf-c-table__icon-inline {
  display: flex;
  align-items: center;

  > :not(:last-child) {
    margin-right: var(--pf-c-table__icon-inline--MarginRight);
  }
}

// Modifier - fit-content
.pf-c-table .pf-m-fit-content {
  // limit width and padding, fit contents of cell
  width: 1%;
  white-space: nowrap;
}

// Modifier - Wrap
.pf-c-table .pf-m-wrap {
  white-space: normal;
  vertical-align: top;
}

// Modifier - Width
// stylelint-disable
.pf-c-table [class*="pf-m-width-"] {
  table-layout: fixed;
}

.pf-c-table .pf-m-width-10 {
  width: 10%;
}

.pf-c-table .pf-m-width-15 {
  width: 15%;
}

.pf-c-table .pf-m-width-20 {
  width: 20%;
}

.pf-c-table .pf-m-width-25 {
  width: 25%;
}

.pf-c-table .pf-m-width-30 {
  width: 30%;
}

.pf-c-table .pf-m-width-35 {
  width: 35%;
}

.pf-c-table .pf-m-width-40 {
  width: 40%;
}

.pf-c-table .pf-m-width-45 {
  width: 45%;
}

.pf-c-table .pf-m-width-50 {
  width: 50%;
}

.pf-c-table .pf-m-width-60 {
  width: 60%;
}

.pf-c-table .pf-m-width-70 {
  width: 70%;
}

.pf-c-table .pf-m-width-80 {
  width: 80%;
}

.pf-c-table .pf-m-width-90 {
  width: 90%;
}

.pf-c-table .pf-m-width-max {
  width: 100%;
}
