.pf-c-data-list {
  --pf-c-data-list--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
  --pf-c-data-list--BorderTopWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--spacer--sm);
  --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--300);
  --pf-c-data-list--BorderBottomColor: var(--pf-global--BorderColor--100); // Remove at breaking change
  --pf-c-data-list--BorderBottomWidth: 0; // Remove at breaking change

  @media screen and (max-width: $pf-global--breakpoint--sm) {
    --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
    --pf-c-data-list--BorderTopWidth: var(--pf-c-data-list--sm--BorderTopWidth);
  }

  // Item
  --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
  --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
  --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
  --pf-c-data-list__item--m-selectable--OutlineOffset: #{pf-size-prem(-4px)};
  --pf-c-data-list__item--m-selectable--hover--ZIndex: var(--pf-global--ZIndex--xs);
  --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
  --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
  --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
  --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
  --pf-c-data-list__item-item--BorderTopColor: var(--pf-global--BorderColor--100); // at breaking change switch var to BorderBottom
  --pf-c-data-list__item-item--BorderTopWidth: var(--pf-global--BorderWidth--sm); // at breaking change switch var to BorderBottom
  --pf-c-data-list__item--hover--item--BorderTopColor: var(--pf-c-data-list__item-item--BorderTopColor);
  --pf-c-data-list__item--hover--item--BorderTopWidth: var(--pf-c-data-list__item-item--BorderTopWidth);
  --pf-c-data-list__item-item--sm--BorderTopWidth: #{pf-size-prem(8px)}; // at breaking change switch var to BorderBottom
  --pf-c-data-list__item-item--sm--BorderTopColor: var(--pf-global--BorderColor--300); // at breaking change switch var to BorderBottom

  @media screen and (max-width: $pf-global--breakpoint--sm) {
    --pf-c-data-list__item-item--BorderTopWidth: var(--pf-c-data-list__item-item--sm--BorderTopWidth);
    --pf-c-data-list__item-item--BorderTopColor: var(--pf-c-data-list__item-item--sm--BorderTopColor);
  }

  // List item border left
  --pf-c-data-list__item--before--BackgroundColor: transparent;
  --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
  --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
  --pf-c-data-list__item--before--ZIndex: var(--pf-global--ZIndex--xl);
  --pf-c-data-list__item--before--Top: 0;
  --pf-c-data-list__item--before--Bottom: 0;
  --pf-c-data-list__item--before--Height: initial; // remove after breaking change
  --pf-c-data-list__item-item--before--Top: calc(var(--pf-c-data-list__item-item--BorderTopWidth) * -1);
  --pf-c-data-list__item-item--before--Height: initial; // remove after breaking change

  // Data list item row
  --pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-data-list__item-row--md--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-data-list__item-row--md--PaddingLeft: var(--pf-global--spacer--md);

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

  // Data list item content
  --pf-c-data-list__item-content--PaddingBottom: var(--pf-global--spacer--lg);

  // Cell
  --pf-c-data-list__cell--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-data-list__cell--PaddingBottom: var(--pf-global--spacer--lg);
  --pf-c-data-list__cell--md--PaddingBottom: 0;
  --pf-c-data-list__cell--m-icon--MarginRight: var(--pf-global--spacer--md);
  --pf-c-data-list__cell-cell--PaddingTop: 0;
  --pf-c-data-list__cell-cell--md--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-data-list__cell-cell--MarginRight: var(--pf-global--spacer--xl);

  @media screen and (min-width: $pf-global--breakpoint--md) {
    --pf-c-data-list__cell-cell--PaddingTop: var(--pf-c-data-list__cell-cell--md--PaddingTop);
    --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list__cell--md--PaddingBottom);
  }

  // Toggle
  --pf-c-data-list__toggle--MarginLeft: calc(var(--pf-global--spacer--sm) * -1); // offset toggle to align left
  --pf-c-data-list__toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
  --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
  --pf-c-data-list__item--m-expanded__toggle--c-button-icon--Transform: rotate(90deg);

  // Controls
  --pf-c-data-list__item-control--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-data-list__item-control--PaddingBottom: var(--pf-global--spacer--lg);
  --pf-c-data-list__item-control--MarginRight: var(--pf-global--spacer--xl);
  --pf-c-data-list__item-control--md--MarginRight: var(--pf-global--spacer--md);
  --pf-c-data-list__item-control--not-last-child--MarginRight: var(--pf-global--spacer--md);

  @media screen and (max-width: $pf-global--breakpoint--md) {
    --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list__item-control--md--MarginRight);
  }

  // Actions
  --pf-c-data-list__item-action--Display: flex;
  --pf-c-data-list__item-action--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-data-list__item-action--PaddingBottom: var(--pf-global--spacer--lg);
  --pf-c-data-list__item-action--MarginLeft: var(--pf-global--spacer--xl);
  --pf-c-data-list__item-action--md--MarginLeft: var(--pf-global--spacer--md);
  --pf-c-data-list__item-action--not-last-child--MarginRight: var(--pf-global--spacer--md);
  --pf-c-data-list__item-action--not-last-child--lg--MarginBottom: var(--pf-global--spacer--md);
  --pf-c-data-list__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);

  @media screen and (max-width: $pf-global--breakpoint--md) {
    --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list__item-action--md--MarginLeft);
  }

  // Expandable content
  --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
  --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
  --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
  --pf-c-data-list__expandable-content--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
  --pf-c-data-list__expandable-content--md--MaxHeight: #{pf-size-prem(600px)};
  --pf-c-data-list__expandable-content--before--Top: calc(var(--pf-c-data-list__item-item--BorderTopWidth) * -1);
  --pf-c-data-list__item--m-expanded__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
  --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-global--spacer--lg);
  --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-data-list__expandable-content-body--md--PaddingTop: var(--pf-global--spacer--md);
  --pf-c-data-list__expandable-content-body--md--PaddingRight: var(--pf-global--spacer--md);
  --pf-c-data-list__expandable-content-body--md--PaddingBottom: var(--pf-global--spacer--md);
  --pf-c-data-list__expandable-content-body--md--PaddingLeft: var(--pf-global--spacer--md);

  @media screen and (max-width: $pf-global--breakpoint--md) {
    --pf-c-data-list__expandable-content-body--PaddingTop: var(--pf-c-data-list__expandable-content-body--md--PaddingTop);
    --pf-c-data-list__expandable-content-body--PaddingRight: var(--pf-c-data-list__expandable-content-body--md--PaddingRight);
    --pf-c-data-list__expandable-content-body--PaddingBottom: var(--pf-c-data-list__expandable-content-body--md--PaddingBottom);
    --pf-c-data-list__expandable-content-body--PaddingLeft: var(--pf-c-data-list__expandable-content-body--md--PaddingLeft);
  }

  // Compact
  --pf-c-data-list--m-compact__cell--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-data-list--m-compact__cell--md--PaddingBottom: 0;
  --pf-c-data-list--m-compact__cell-cell--PaddingTop: 0;
  --pf-c-data-list--m-compact__cell-cell--md--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-data-list--m-compact__cell-cell--MarginRight: var(--pf-global--spacer--md);
  --pf-c-data-list--m-compact__item-control--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-data-list--m-compact__item-control--PaddingBottom: 0;
  --pf-c-data-list--m-compact__item-control--MarginRight: var(--pf-global--spacer--md);
  --pf-c-data-list--m-compact__item-action--PaddingTop: var(--pf-global--spacer--sm);
  --pf-c-data-list--m-compact__item-action--PaddingBottom: var(--pf-global--spacer--sm);
  --pf-c-data-list--m-compact__item-action--MarginLeft: var(--pf-global--spacer--md);
  --pf-c-data-list--m-compact__item-content--PaddingBottom: var(--pf-global--spacer--sm);

  @media screen and (min-width: $pf-global--breakpoint--md) {
    --pf-c-data-list--m-compact__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--md--PaddingBottom);
    --pf-c-data-list--m-compact__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--md--PaddingTop);
  }

  @include pf-t-light;

  list-style-type: disc;
  border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
  border-bottom: var(--pf-c-data-list--BorderBottomWidth) solid var(--pf-c-data-list--BorderBottomColor);

  &.pf-m-compact {
    --pf-c-data-list__cell--PaddingTop: var(--pf-c-data-list--m-compact__cell--PaddingTop);
    --pf-c-data-list__cell--PaddingBottom: var(--pf-c-data-list--m-compact__cell--PaddingBottom);
    --pf-c-data-list__cell-cell--MarginRight: var(--pf-c-data-list--m-compact__cell-cell--MarginRight);
    --pf-c-data-list__cell-cell--PaddingTop: var(--pf-c-data-list--m-compact__cell-cell--PaddingTop);
    --pf-c-data-list__item-action--MarginLeft: var(--pf-c-data-list--m-compact__item-action--MarginLeft);
    --pf-c-data-list__item-action--PaddingTop: var(--pf-c-data-list--m-compact__item-action--PaddingTop);
    --pf-c-data-list__item-action--PaddingBottom: var(--pf-c-data-list--m-compact__item-action--PaddingBottom);
    --pf-c-data-list__item-control--MarginRight: var(--pf-c-data-list--m-compact__item-control--MarginRight);
    --pf-c-data-list__item-control--PaddingTop: var(--pf-c-data-list--m-compact__item-control--PaddingTop);
    --pf-c-data-list__item-control--PaddingBottom: var(--pf-c-data-list--m-compact__item-control--PaddingBottom);
    --pf-c-data-list__item-content--PaddingBottom: var(--pf-c-data-list--m-compact__item-content--PaddingBottom);
  }
}

// li
.pf-c-data-list__item {
  display: flex;
  flex-direction: column;
  background-color: var(--pf-c-data-list--BackgroundColor);

  @media (min-width: $pf-global--breakpoint--sm) {
    --pf-c-data-list__item--before--Top: var(--pf-c-data-list__item-item--before--Top);
  }

  // add border top to subsequent li's
  &:not(.pf-m-expanded) {
    border-bottom: var(--pf-c-data-list__item-item--BorderTopWidth) solid var(--pf-c-data-list__item-item--BorderTopColor);

    &:not(.pf-m-selected):not(:last-child).pf-m-selectable:hover {
      --pf-c-data-list__item-item--BorderTopWidth: 0;

      + .pf-c-data-list__item {
        border-top: var(--pf-c-data-list__item--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--hover--item--BorderTopColor);
      }
    }
  }

  &.pf-m-selectable {
    cursor: pointer;
    outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);

    &:hover,
    &:focus {
      position: relative;
      z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
    }

    &:hover {
      box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
    }

    &:focus {
      box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
    }

    &:active {
      box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
    }
  }

  &.pf-m-selected {
    --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);

    position: relative;
    box-shadow: var(--pf-c-data-list__item--m-selected--BoxShadow);
  }

  &.pf-m-expanded {
    --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);

    &.pf-m-selectable:not(.pf-m-selected) {
      --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
    }
  }
}

.pf-c-data-list__item-row {
  display: flex;
  flex-wrap: nowrap;
  padding-right: var(--pf-c-data-list__item-row--PaddingRight);
  padding-left: var(--pf-c-data-list__item-row--PaddingLeft);
}

.pf-c-data-list__item-control {
  display: flex;
  flex-wrap: nowrap;
  padding-top: var(--pf-c-data-list__item-control--PaddingTop);
  padding-bottom: var(--pf-c-data-list__item-control--PaddingBottom);
  margin-right: var(--pf-c-data-list__item-control--MarginRight);

  > *:not(:last-child) {
    margin-right: var(--pf-c-data-list__item-control--not-last-child--MarginRight);
  }
}

.pf-c-data-list__item-action {
  @include pf-hidden-visible(var(--pf-c-data-list__item-action--Display));

  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  padding-top: var(--pf-c-data-list__item-action--PaddingTop);
  padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
  margin-left: var(--pf-c-data-list__item-action--MarginLeft);

  > *:not(:last-child) {
    margin-right: var(--pf-c-data-list__item-action--not-last-child--MarginRight);

    @media screen and (max-width: $pf-global--breakpoint--lg) {
      margin-bottom: var(--pf-c-data-list__item-action--not-last-child--lg--MarginBottom);
    }
  }

  @media screen and (max-width: $pf-global--breakpoint--lg) {
    flex-wrap: wrap;
  }

  // Offset action button
  .pf-c-data-list__action {
    margin-top: var(--pf-c-data-list__action--MarginTop);
  }
}

// Toggle
.pf-c-data-list__toggle {
  margin-top: var(--pf-c-data-list__toggle--MarginTop);
  margin-left: var(--pf-c-data-list__toggle--MarginLeft);

  // rotate icon
  .pf-c-button > * {
    pointer-events: none;
    transition: var(--pf-c-data-list__toggle-icon--Transition);

    .pf-c-data-list__item.pf-m-expanded & {
      transform: var(--pf-c-data-list__item--m-expanded__toggle--c-button-icon--Transform);
    }
  }
}

.pf-c-data-list__item-row,
.pf-c-data-list__expandable-content {
  position: relative;

  // left border treatment base
  &::before {
    --pf-c-data-list__item--before--Height: var(--pf-c-data-list__item-item--before--Height); // remove after breaking change

    position: absolute;
    top: var(--pf-c-data-list__item--before--Top);
    bottom: var(--pf-c-data-list__item--before--Bottom);
    left: 0;
    width: var(--pf-c-data-list__item--before--Width);
    height: var(--pf-c-data-list__item--before--Height); // remove after breaking change period
    content: "";
    background-color: var(--pf-c-data-list__item--before--BackgroundColor); // color is transparent by default
    transition: var(--pf-c-data-list__item--before--Transition);
  }
}

.pf-c-data-list__item-content {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  padding-bottom: var(--pf-c-data-list__item-content--PaddingBottom);

  @media screen and (max-width: $pf-global--breakpoint--md) {
    display: grid;
    width: 100%;
    grid-template-columns: auto 1fr;
    padding-bottom: 0;
  }
}

// Content cells
.pf-c-data-list__cell {
  flex: 1;
  padding-top: var(--pf-c-data-list__cell--PaddingTop);
  grid-column: 1 / -1;
  padding-bottom: var(--pf-c-data-list__cell--PaddingBottom);

  @media screen and (min-width: $pf-global--breakpoint--md) {
    &:not(:last-child) {
      margin-right: var(--pf-c-data-list__cell-cell--MarginRight);
    }
  }

  // for all subsequent .pf-c-data-list__cell's, set to full width
  & + & {
    flex: 1 0 100%;
    order: 1;
    padding-top: var(--pf-c-data-list__cell-cell--PaddingTop);

    @media screen and (min-width: $pf-global--breakpoint--md) {
      flex: 1;
      order: initial;
    }
  }

  &.pf-m-icon {
    flex-grow: 0;
    margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
    grid-column: 1 / 2;
  }

  &.pf-m-no-fill {
    flex-grow: 0;
  }

  &.pf-m-align-right {
    margin-left: auto;

    @media screen and (max-width: $pf-global--breakpoint--md) {
      margin-left: 0;
    }
  }

  &.pf-m-icon + & {
    grid-column: 2 / 3;
    padding-top: var(--pf-c-data-list__cell--PaddingTop);
  }

  &.pf-m-flex-2 { flex-grow: 2; }
  &.pf-m-flex-3 { flex-grow: 3; }
  &.pf-m-flex-4 { flex-grow: 4; }
  &.pf-m-flex-5 { flex-grow: 5; }
}

// Expandable content
.pf-c-data-list__expandable-content {
  box-shadow: var(--pf-c-data-list__expandable-content--BoxShadow);

  .pf-c-data-list__expandable-content-body {
    padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
    border-top: var(--pf-c-data-list__item--m-expanded__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);

    &.pf-m-no-padding {
      padding: 0;
    }
  }

  @media screen and (max-width: $pf-global--breakpoint--md) {
    max-height: var(--pf-c-data-list__expandable-content--md--MaxHeight);
    overflow-y: auto;
  }
}
