

/* stylelint-disable */
@mixin pf-mobile-layout {
  .pf-m-grid { @content; }

  .pf-m-grid-md {
    @media screen and (max-width: $pf-global--breakpoint--md) {
      @content;
    }
  }

  .pf-m-grid-lg {
    @media screen and (max-width: $pf-global--breakpoint--lg) {
      @content;
    }
  }
}
/* stylelint-enable */
$pf-c-table-standard-row: "tr:not(.pf-c-table__expandable-row)";
$pf-c-table-standard-td: "td:not(.pf-c-table__toggle):not(.pf-c-table__check):not(.pf-c-table__action)";
$pf-c-table-standard-th: "th:not(.pf-c-table__toggle):not(.pf-c-table__check):not(.pf-c-table__action):not(.pf-c-table__sort)";
$pf-c-table-xs-breakpoint: 380px;

.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
  // ============================================================ //

  // Responsive vars
  // ==================================================================

  // Body
  --pf-c-table-tbody--responsive--MarginTop:                  var(--pf-global--spacer--sm);

  // Row
  --pf-c-table-tr--responsive--GridColumnGap:                 var(--pf-global--spacer--md);
  --pf-c-table-tr--responsive--Padding:                       var(--pf-global--spacer--xl);
  --pf-c-table-tr--responsive--MarginTop:                     var(--pf-global--spacer--sm);

  // Td
  --pf-c-table-td--responsive--MarginTop:                     var(--pf-global--spacer--sm);
  --pf-c-table-td--responsive--MarginBottom:                  var(--pf-global--spacer--sm);
  --pf-c-table-td--responsive--GridColumnGap:                 var(--pf-global--spacer--md);

  // Expandable row content  
  --pf-c-table__expandable-row-content--responsive--PaddingRight:         var(--pf-global--spacer--xl);
  --pf-c-table__expandable-row-content--responsive--PaddingLeft:          var(--pf-global--spacer--xl);

  // Table check 
  --pf-c-table__check--responsive--MarginLeft:                            var(--pf-global--spacer--sm);
  --pf-c-table__check--responsive--MarginTop:                             var(--pf-global--spacer--xs);

  // Table action
  --pf-c-table__action--responsive--MarginLeft:                           var(--pf-global--spacer--xl);

  // End responsive vars
  // ==================================================================

  // Base
  --pf-c-table--BackgroundColor:                              var(--pf-global--BackgroundColor--light-100);
  --pf-c-table--BorderColor:                                  var(--pf-global--BorderColor--light-200);
  --pf-c-table--BorderWidth:                                  var(--pf-global--BorderWidth--sm);
  --pf-c-table--FontWeight:                                   var(--pf-global--FontWeight--normal);

  // Th
  --pf-c-table-th--FontSize:                                  var(--pf-global--FontSize--sm);
  --pf-c-table-th--FontFamily:                                var(--pf-global--FontFamily--sans-serif);
  --pf-c-table-th--LineHeight:                                var(--pf-global--LineHeight--md);
  --pf-c-table-th--PaddingTop:                                var(--pf-global--spacer--md);
  --pf-c-table-th--PaddingBottom:                             var(--pf-global--spacer--md);

  // Td
  --pf-c-table-td--FontSize:                                  var(--pf-global--FontSize--md);
  --pf-c-table-td--PaddingTop:                                var(--pf-global--spacer--xl);
  --pf-c-table-td--PaddingBottom:                             var(--pf-global--spacer--xl);

  // Th button
  --pf-c-table-th-button--PaddingTop:                         var(--pf-global--spacer--md);
  --pf-c-table-th-button--PaddingRight:                       var(--pf-global--spacer--md);
  --pf-c-table-th-button--PaddingBottom:                      var(--pf-global--spacer--md);
  --pf-c-table-th-button--PaddingLeft:                        var(--pf-global--spacer--md);

  // Th / td shared variables
  --pf-c-table-cell--PaddingRight:                            var(--pf-global--spacer--md);
  --pf-c-table-cell--PaddingLeft:                             var(--pf-global--spacer--md);
  --pf-c-table-cell--first-child--PaddingLeft:                var(--pf-global--spacer--xl);
  --pf-c-table-cell--last-child--PaddingRight:                var(--pf-global--spacer--xl);  

  // ============================================================ //
  // End non-conformant variables
  // ============================================================ //
  
  // Table cell - toggle
  --pf-c-table__toggle--PaddingTop:                           #{pf-size-prem(22px)};
  --pf-c-table__toggle--PaddingRight:                         var(--pf-global--spacer--sm);

  // Table cell - check
  --pf-c-table__check--PaddingTop:                            #{pf-size-prem(30px)};
  --pf-c-table__check--PaddingRight:                          var(--pf-global--spacer--md);
  --pf-c-table__check--PaddingLeft:                           var(--pf-global--spacer--md);

  // Table cell - action
  --pf-c-table__action--PaddingLeft:                          var(--pf-global--spacer--sm);

  // Expandable row
  // hardcoding to match design spec
  --pf-c-table__expandable-row--Transition:                   var(--pf-global--Transition);

  // hardcoding to match design spec
  --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);

  // Table rows
  --pf-c-table__expandable-row-content--PaddingTop:           var(--pf-global--spacer--xl);
  --pf-c-table__expandable-row-content--PaddingBottom:        var(--pf-global--spacer--xl);
  --pf-c-table__expandable-row-content--MaxHeight:            #{pf-size-prem(600px)};

  // Expandable row content
  --pf-c-table__expandable-row-content--Transition:           var(--pf-global--Transition);

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

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

  // ============================================================ //
  // 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--PaddingTop:                        var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--PaddingRight:                      var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--PaddingBottom:                     var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--PaddingLeft:                       var(--pf-global--spacer--sm);
  --pf-c-table--m-compact--FontSize:                          var(--pf-global--FontSize--sm);

  // Modifier - Toggle
  --pf-c-table--m-toggle--Transition:                         var(--pf-global--Transition);

  // Modifier - Fit content
  --pf-c-table--m-fit-content--PaddingRight:                  var(--pf-global--spacer--sm);
  --pf-c-table--m-fit-content--PaddingLeft:                   var(--pf-global--spacer--sm);

  // Modifier - Expandable row expanded
  --pf-c-table__expandable-row--m-expanded--BoxShadow:        var(--pf-global--BoxShadow--md);

  // Modifier - Sort descending
  --pf-c-table__sort--sorted--Color:                          var(--pf-global--active-color--100);
  --pf-c-table__sort--sorted--BorderColor:                    var(--pf-global--active-color--100);
  --pf-c-table__sort--sorted--BorderWidth:                    var(--pf-global--BorderWidth--md);

  /* stylelint-enable */

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

  // Table row
  tr {
    background-color: transparent;
  }

  // Standard table row (non-expandable)
  // exclude expandable rows
  #{$pf-c-table-standard-row} {
    // set position relative for absolutely positioned elements in responsive view
    position: relative;
    border-bottom: var(--pf-c-table--BorderWidth) solid var(--pf-c-table--BorderColor);
  }

  // Table header cell
  thead {
    th {
      font-size: var(--pf-c-table-th--FontSize);
      white-space: nowrap;
      vertical-align: top;

      // ignore table sort and special cells, apply padding to the nested button
      &:not(.pf-c-table__sort) {
        padding-top: var(--pf-c-table-th--PaddingTop);
        padding-bottom: var(--pf-c-table-th--PaddingBottom);
      }
    }

    td,
    .pf-c-table__toggle,
    .pf-c-table__check,
    .pf-c-table__action {
      padding-top: 0;
      padding-bottom: 0;
      vertical-align: middle;
    }
  }

  // Table cell
  tbody #{$pf-c-table-standard-row} #{$pf-c-table-standard-td},
  tbody #{$pf-c-table-standard-row} th {
    padding-top: var(--pf-c-table-td--PaddingTop);
    padding-bottom: var(--pf-c-table-td--PaddingBottom);
    font-size: var(--pf-c-table-td--FontSize);
    font-weight: var(--pf-c-table--FontWeight);
    word-break: break-word;
  }

  // Table cell and cell shared styling
  th,
  td {
    padding-right: var(--pf-c-table-cell--PaddingRight);
    padding-left: var(--pf-c-table-cell--PaddingLeft);
    font-weight: var(--pf-c-table--FontWeight);

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

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

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

// Expandable row
.pf-c-table__expandable-row {
  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);
  }

  // Td
  td {
    position: relative;
  }

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

    // offset top to extend above tr border
    top: calc(var(--pf-c-table__expandable-row--before--Width) / 2 * -1);
    left: calc(var(--pf-c-table--BorderWidth) * -1);
    width: var(--pf-c-table__expandable-row--before--Width);

    // offset height to extend above tr border
    height: calc(100% + calc(var(--pf-c-table__expandable-row--before--Width) / 2));
    content: "";
    background-color: transparent;
  }

  // Modifier - Expanded tr
  &.pf-m-expanded {
    // reset borders to default values
    border-bottom-color: var(--pf-c-table--BorderColor);
    border-bottom-width: var(--pf-c-table--BorderWidth);
    box-shadow: var(--pf-c-table__expandable-row--m-expanded--BoxShadow);

    td:first-child::before {
      background-color: var(--pf-c-table__expandable-row--before--BackgroundColor);
    }
  }
}

// Expandable table row
.pf-c-table__expandable-row-content {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  word-break: break-word;
  border-top-color: transparent;
  border-top-width: 0;
  transition: var(--pf-c-table__expandable-row-content--Transition);

  // Modifier on td- Expanded
  .pf-m-expanded & {
    max-height: var(--pf-c-table__expandable-row-content--MaxHeight);
    padding-top: var(--pf-c-table__expandable-row-content--PaddingTop);
    padding-bottom: var(--pf-c-table__expandable-row-content--PaddingBottom);
    overflow-y: auto;
  }

  /* stylelint-disable */
  &::-webkit-scrollbar { 
    display: none; 
  }
  /* stylelint-enable */

  // Td
  // remove padding top/bottom from expandable rows and apply it later to content
  td {
    padding-top: 0;
    padding-bottom: 0;
  }
}

// Toggle, check, action - shrink width and padding.
.pf-c-table .pf-c-table__toggle,
.pf-c-table .pf-c-table__check,
.pf-c-table .pf-c-table__action {
  width: 1%;
}

// Toggle table cell
.pf-c-table .pf-c-table__toggle {
  padding-top: var(--pf-c-table__toggle--PaddingTop);
  padding-right: 0;
  vertical-align: baseline;

  // Toggle button icon
  .pf-c-button > * {
    transition: var(--pf-c-table--m-toggle--Transition);
    transform: rotate(-90deg);
  }

  // Rotate toggle button icon
  .pf-c-button.pf-m-expanded > * {
    transform: rotate(0deg);
  }

  svg {
    pointer-events: none;
  }
}

// Check table cell
.pf-c-table .pf-c-table__check {
  padding-top: var(--pf-c-table__check--PaddingTop);
  padding-right: var(--pf-c-table__check--PaddingRight);
  padding-left: var(--pf-c-table__check--PaddingLeft);
  vertical-align: top;
}

// Action table cell
.pf-c-table .pf-c-table__action {
  padding-left: var(--pf-c-table__action--PaddingLeft);
  vertical-align: middle;
}

// Table sort padding
// unset padding, button adds appropriate padding
.pf-c-table .pf-c-table__sort,
.pf-c-table .pf-c-table__sort:first-child,
.pf-c-table .pf-c-table__sort:last-child {
  padding-right: 0;
  padding-left: 0;
}

// Table sort
.pf-c-table__sort {
  &.pf-m-ascending,
  &.pf-m-descending {
    border-bottom: var(--pf-c-table__sort--sorted--BorderWidth) solid var(--pf-c-table__sort--sorted--BorderColor);

    button,
    .pf-c-table__sort-indicator {
      color: var(--pf-c-table__sort--sorted--Color);
    }
  }

  // sorted ascending
  &.pf-m-ascending .pf-c-table__sort-indicator {
    transform: rotate(0deg);
  }

  // sorted descending
  &.pf-m-descending button .pf-c-table__sort-indicator {
    transform: rotate(180deg);
  }

  /* stylelint-disable */
  button {
    display: flex;
    align-items: baseline;
    width: 100%;
    padding-top: var(--pf-c-table-th-button--PaddingTop);
    padding-right: var(--pf-c-table-th-button--PaddingRight);
    padding-bottom: var(--pf-c-table-th-button--PaddingBottom);
    padding-left: var(--pf-c-table-th-button--PaddingLeft);
    font-family: var(--pf-c-table-th--FontFamily);
    font-size: var(--pf-c-table-th--FontSize);
    line-height: var(--pf-c-table-th--LineHeight);
    vertical-align: baseline;
    cursor: pointer;
    background-color: transparent;
    border: none;

  }
  /* stylelint-enable */

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

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

// Sort indicator
.pf-c-table__sort-indicator {
  margin-left: var(--pf-c-table__sort-indicator--MarginLeft);

  // set line-height to 1 so it does not adjust height of button
  line-height: 1;
  color: var(--pf-c-table__sort-indicator--Color);
  pointer-events: none;
}


// Compact table
// ==================================================================

.pf-c-table.pf-m-compact {
  thead #{$pf-c-table-standard-th} {
    padding:
      var(--pf-c-table--m-compact-th--PaddingTop)
      var(--pf-c-table--m-compact--PaddingRight)
      var(--pf-c-table--m-compact-th--PaddingBottom)
      var(--pf-c-table--m-compact--PaddingLeft);
  }

  tbody #{$pf-c-table-standard-row} #{$pf-c-table-standard-td},
  tbody #{$pf-c-table-standard-row} th {
    padding:
      var(--pf-c-table--m-compact--PaddingTop)
      var(--pf-c-table--m-compact--PaddingRight)
      var(--pf-c-table--m-compact--PaddingBottom)
      var(--pf-c-table--m-compact--PaddingLeft);
    font-size: var(--pf-c-table--m-compact--FontSize);
  }

  // First row has 2x padding as subsequent rows
  tbody tr:first-child {
    #{$pf-c-table-standard-th},
    #{$pf-c-table-standard-td} {
      padding-top: calc(var(--pf-c-table--m-compact--PaddingTop) * 2);
    }

    .pf-c-table__toggle,
    .pf-c-table__check,
    .pf-c-table__action {
      padding-top: var(--pf-c-table--m-compact--PaddingTop);
    }
  }

  // Last row has 2x padding as subsequent rows
  tbody tr:last-child {
    #{$pf-c-table-standard-th},
    #{$pf-c-table-standard-td} {
      padding-bottom: calc(var(--pf-c-table--m-compact--PaddingBottom) * 3);
    }

    .pf-c-table__toggle,
    .pf-c-table__check,
    .pf-c-table__action {
      padding-bottom: calc(var(--pf-c-table--m-compact--PaddingBottom) * 2);
    }
  }

  tbody #{$pf-c-table-standard-row} {
    border: none;
  }

  .pf-c-table__toggle,
  .pf-c-table__check,
  .pf-c-table__action {
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
  }

  .pf-c-table__check {
    padding-right: var(--pf-c-table--m-compact--PaddingRight);
  }
}

// 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 - Wrap
.pf-c-table .pf-m-wrap {
  white-space: normal;
}

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

// Check table cell
@include pf-mobile-layout {
  display: grid;
  background-color: transparent;
  border: none;

  // Thead
  thead {
    display: none;
  }

  // Tbody
  tbody {
    display: block;

    & + tbody {
      margin-top: var(--pf-c-table-tbody--responsive--MarginTop);
    }
  }

  // Table row
  // using background color on tr as they are presented as block level elements for responsive view
  tr {
    background-color: var(--pf-c-table--BackgroundColor);
  }

  // Reset td padding
  td,
  tbody th {
    &,
    &:first-child,
    &:last-child {
      padding: 0;
    }
  }

  // Reset compact table padding
  &.pf-m-compact {
    td,
    tbody th {
      padding: 0;
    }

    tbody tr,
    tbody tr:first-child,
    tbody tr:last-child {
      #{$pf-c-table-standard-th},
      #{$pf-c-table-standard-td} {
        padding: 0;
      }
    }

    tbody tr,
    tbody tr:first-child,
    tbody tr:last-child {
      .pf-c-table__toggle,
      .pf-c-table__check,
      .pf-c-table__action {
        padding: 0;
      }
    }
  }


  // Reset first/last child td, th padding
  > *:first-child,
  > *:last-child {
    padding-right: 0;
    padding-left: 0;
  }

  // Standard table row (non-expandable)
  // exclude expandable rows
  #{$pf-c-table-standard-row} {
    display: grid;
    grid-template-columns: 1fr;

    // set subsequent auto column width to max-content
    grid-auto-columns: max-content;
    grid-column-gap: var(--pf-c-table-tr--responsive--GridColumnGap);
    padding: var(--pf-c-table-tr--responsive--Padding);
    border-bottom: none;
  }

  #{$pf-c-table-standard-row} + #{$pf-c-table-standard-row} {
    margin-top: var(--pf-c-table-tr--responsive--MarginTop);
  }

  // Standard td, in standard row (non-expandable)
  // exclude specifically styled tds, as they are placed explicitly within grid
  #{$pf-c-table-standard-row} #{$pf-c-table-standard-th},
  #{$pf-c-table-standard-row} #{$pf-c-table-standard-td} {
    // responsive layout, set td to two column grid
    display: grid;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: var(--pf-c-table-td--responsive--MarginTop);
    margin-bottom: var(--pf-c-table-td--responsive--MarginBottom);
    grid-column: 1;
    grid-column-gap: var(--pf-c-table-td--responsive--GridColumnGap);

    // @mobile, breakpoint small
    @media screen and (min-width: $pf-c-table-xs-breakpoint) {
      grid-template-columns: 1fr 1.5fr;
      grid-column: 1;
    }

    // set contents of td to start at column two of td grid
    * {
      @media screen and (min-width: $pf-c-table-xs-breakpoint) {
        grid-column: 2;
      }
    }

    // @mobile only
    // set contents of ::before pseudo element to start at column one of td grid
    &::before {
      font-weight: bold;
      text-align: left;
      content: attr(data-label);


      @media screen and (min-width: $pf-c-table-xs-breakpoint) {
        font-weight: normal;
        // set ::before to span all rows, up to 100
        grid-row: 1 / 100;
      }
    }
  }

  // Expandable row
  .pf-c-table__expandable-row {
    display: block;
    border-top: var(--pf-c-table--BorderWidth) solid transparent;
    border-bottom: none;
    box-shadow: none;

    // Td
    td {
      position: static;
      display: block;
    }

    // Modifier - Expanded tr
    &.pf-m-expanded {
      border-top-color: var(--pf-c-table--BorderColor);
    }
  }

  // Expandable table row content
  .pf-c-table__expandable-row-content {
    padding-right: var(--pf-c-table__expandable-row-content--responsive--PaddingRight);
    padding-left: var(--pf-c-table__expandable-row-content--responsive--PaddingLeft);

    td {
      display: block;
    }
  }

  // Set defaults
  .pf-c-table__toggle,
  .pf-c-table__check,
  .pf-c-table__action {
    width: auto;
    padding-right: 0;
    padding-left: 0;
  }

  .pf-c-table__toggle {
    grid-row-start: 20;
    grid-column: -1;
    justify-self: end;
    padding-right: 0;
  }

  // Check table cell
  .pf-c-table__check {
    padding-top: 0;
    margin-top: var(--pf-c-table__check--responsive--MarginTop);
    margin-left: var(--pf-c-table__check--responsive--MarginLeft);
    grid-row-start: 1;
    grid-column-start: 2;

    // if action is present, add margin left to accommodate checkbox
    & ~ .pf-c-table__action {
      margin-left: var(--pf-c-table__action--responsive--MarginLeft);
    }    
  }

  // Action cell
  .pf-c-table__action {
    grid-row-start: 1;
    grid-column-start: 2;

    // @smallest breakpoint
    @media screen and (max-width: $pf-global--breakpoint--sm) {
      grid-row-start: 1;
      grid-column-start: 2;
      margin-left: 0;
    }
  }

  // Toggles
  .pf-c-table__toggle {
    .pf-c-button > * {
      transform: rotate(0deg);
    }

    .pf-c-button.pf-m-expanded > * {
      transform: rotate(180deg);
    }
  }

  // Fit content
  .pf-m-fit-content {
    width: auto;
    white-space: normal;
  }
}
