

.pf-c-data-list {
  /* stylelint-disable */
  --pf-c-data-list--BackgroundColor:                      var(--pf-global--BackgroundColor--light-100);
  
  // Item
  --pf-c-data-list__item--PaddingTop:                     var(--pf-global--spacer--xl);
  --pf-c-data-list__item--PaddingRight:                   var(--pf-global--spacer--xl);
  --pf-c-data-list__item--PaddingBottom:                  var(--pf-global--spacer--xl);
  --pf-c-data-list__item--PaddingLeft:                    var(--pf-global--spacer--xl);
  --pf-c-data-list__item--MarginLeft:                     var(--pf-global--spacer--xl);
  --pf-c-data-list__item--BorderColor:                    var(--pf-global--Color--light-200);
  --pf-c-data-list__item--BorderWidth:                    var(--pf-global--BorderWidth--sm);

  // Toggle
  --pf-c-data-list__toggle--MarginRight:                  var(--pf-global--spacer--md);

  // offset toggle to align left
  --pf-c-data-list__toggle--MarginLeft:                   calc(var(--pf-global--spacer--sm) * -1);
  --pf-c-data-list__toggle--Transition:                   var(--pf-global--Transition);

  // Check
  --pf-c-data-list__check--MarginRight:                   var(--pf-global--spacer--xl);

  // Actions
  --pf-c-data-list__action--MarginLeft:                   var(--pf-global--spacer--lg);

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

  // Expandable content
  --pf-c-data-list__expandable-content--PaddingTop:       var(--pf-global--spacer--xl);
  --pf-c-data-list__expandable-content--PaddingBottom:    var(--pf-global--spacer--xl);
  --pf-c-data-list__expandable-content--MaxHeight:        #{pf-size-prem(600px)};
  --pf-c-data-list__expandable-content--Transition:       var(--pf-global--Transition);
  --pf-c-data-list__expandable-content--BorderTopColor:   var(--pf-global--Color--light-200);
  --pf-c-data-list__expandable-content--BorderTopWidth:   var(--pf-global--BorderWidth--sm);

  // Expanded modifier
  --pf-c-data-list--m-expanded--BoxShadow:                var(--pf-global--BoxShadow--md);
  --pf-c-data-list--m-expanded--TransitionDuration:       var(--pf-global--TransitionDuration);
  --pf-c-data-list__item--m-expanded--before--BackgroundColor:  var(--pf-global--active-color--100);

  // spacers are a bit large on mobile view
  // reduce spacer values for up to 380px
  @media screen and (max-width: 380px) {
    --pf-c-data-list__item--PaddingRight:                 var(--pf-global--spacer--lg);
    --pf-c-data-list__item--PaddingLeft:                  var(--pf-global--spacer--lg);
    --pf-c-data-list__toggle--MarginRight:                var(--pf-global--spacer--sm);
    --pf-c-data-list__check--MarginRight:                 var(--pf-global--spacer--md);
    --pf-c-data-list__action--MarginLeft:                var(--pf-global--spacer--sm);
  }

  /* stylelint-enable */

  list-style-type: disc;
  background-color: var(--pf-c-data-list--BackgroundColor);
}

// li
.pf-c-data-list__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding-right: var(--pf-c-data-list__item--PaddingRight);
  padding-left: var(--pf-c-data-list__item--PaddingLeft);

  // add border top to subsequent li's
  & + & {
    border-top: var(--pf-c-data-list__item--BorderWidth) solid var(--pf-c-data-list__item--BorderColor);
  }

  // left border treatment base
  // color is transparent by default
  &::before {
    position: absolute;

    // offset border positioning by parent border width
    top: calc(var(--pf-c-data-list__item--BorderWidth) * -1);
    left: 0;
    z-index: var(--pf-c-data-list__item--before--ZIndex);
    width: var(--pf-c-data-list__item--before--Width);
    height: calc(100% + var(--pf-c-data-list__item--BorderWidth));
    content: "";
    background-color: var(--pf-c-data-list__item--before--BackgroundColor);
    transition: var(--pf-c-data-list__item--before--Transition);
  }

  // expanded border treatment color
  &.pf-m-expanded::before {
    background-color: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
  }
}

// non-textual items
.pf-c-data-list__toggle,
.pf-c-data-list__check,
.pf-c-data-list__action {
  flex: none;
}

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

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

    .pf-m-expanded & {
      transform: rotate(90deg);
    }
  }
}

// Checkbox
.pf-c-data-list__check {
  display: flex;
  margin-right: var(--pf-c-data-list__check--MarginRight);
}


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

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

    @media screen and (min-width: $pf-global--breakpoint--md) {
      flex: 1;
      order: initial;
      padding-top: var(--pf-c-data-list__item--PaddingTop);
      margin-left: var(--pf-c-data-list__item--MarginLeft);
    }
  }

  &.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; }
}

// Action
.pf-c-data-list__action {
  margin-left: var(--pf-c-data-list__action--MarginLeft);
}


// add keyframes to prevent flicker when expandable content scrolls
@keyframes pf-c-data-list--expandable-content--in {
  0% { overflow: hidden; }
  99% { overflow-y: hidden; }
  100% { overflow-y: auto; }
}

// Expandable content
.pf-c-data-list__expandable-content {
  flex: 1 0 100%;
  align-self: flex-start;
  order: 2;
  max-height: 0;

  // reset li padding on expandable content
  padding-right: var(--pf-c-data-list__item--PaddingRight);
  padding-left: var(--pf-c-data-list__item--PaddingLeft);

  // offset for li padding for border to extend to li edges
  margin-right: calc(var(--pf-c-data-list__item--PaddingRight) * -1);
  margin-left: calc(var(--pf-c-data-list__item--PaddingLeft) * -1);
  overflow: hidden;
  border-top: 0 solid var(--pf-c-data-list__expandable-content--BorderTopColor);
  opacity: 0;
  transition: var(--pf-c-data-list__expandable-content--Transition);

  .pf-m-expanded & {
    max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
    padding-top: var(--pf-c-data-list__expandable-content--PaddingTop);
    padding-bottom: var(--pf-c-data-list__expandable-content--PaddingBottom);
    border-top-width: var(--pf-c-data-list__expandable-content--BorderTopWidth);
    box-shadow: var(--pf-global--BoxShadow--md-bottom);
    opacity: 1;

    // use animation to control overflow value to prevent flicker if content scrolls
    animation: var(--pf-c-data-list--m-expanded--TransitionDuration) pf-c-data-list--expandable-content--in forwards;
  }
}
