.ct-listing-panel {
  &-head {
    background: linear-gradient(to top,
      var(--pf-global--BorderColor--100) 0,
      var(--pf-global--BorderColor--100) 1px,
      transparent 1px
    );
    display: flex;
    align-items: flex-end;

    .pf-c-nav {
      margin-left: var(--pf-global--spacer--xs);
    }

    .pf-c-nav__item {
      --pf-c-nav__list-item--MarginRight: 0;
      cursor: pointer;
    }

    // For now, let's use tertiary until PF4 tab is reworked
    // meanwhile, let's force restyle the tertiary to look like the upcoming tabs.
    // See https://patternfly-next-pr-2757.surge.sh/documentation/core/components/tabs/
    // Setting padding height to be 1/2, however for being embedded in the list.
    .pf-c-nav .pf-c-nav__list {
      flex-wrap: wrap;

      .pf-c-nav__link {
        --pf-c-nav__link--PaddingTop: var(--pf-global--spacer--sm);
        --pf-c-nav__link--PaddingBottom: var(--pf-global--spacer--sm);
        --pf-c-nav__link--PaddingLeft: var(--pf-global--spacer--md);
        --pf-c-nav__link--PaddingRight: var(--pf-global--spacer--md);
        padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);

        &:hover {
          --pf-c-nav__link--Color: inherit;

          &::after {
            --pf-c-nav__link--hover--after--BackgroundColor: var(--pf-global--BorderColor--light-100);
          }
        }
      }
    }

    .dropdown, .btn-group, .pf-c-button, input, select {
      margin-left: var(--pf-global--spacer--xs);
    }
  }

  // Support action buttons on the right
  &-actions {
    display: flex;
    flex: auto;
    justify-content: flex-end;
    margin: var(--pf-global--spacer--sm) var(--pf-global--spacer--sm);
    row-gap: var(--pf-global--spacer--sm);
    column-gap: var(--pf-global--spacer--sm);
  }

  // Tabless mode, with just action buttons
  &-simplebody-actions {
    padding: var(--pf-global--spacer--xs) var(--pf-global--spacer--md) var(--pf-global--spacer--xs) 0;
    float: right;
  }

  &-body {
    // Don't let PF4 automatically add a border in tables inside the body
    --pf-c-table__expandable-row--after--BorderLeftWidth: 0;
    --pf-c-table--border-width--base: 0;

    // Add some sizing to the body
    padding: var(--pf-global--spacer--md) var(--pf-global--spacer--lg);
    width: 100%;

    // Containing hack part 1
    float: left;

    &::after {
      // Containing hack part 2: Clearfix CSS hack,
      // to allow children content to float fine without setting overflow
      content: "";
      clear: both;
      display: table;
    }
  }

  &-simplebody-actions + &-body {
    // Containing hack part 3: Unset float for simplebody actions
    float: none;
  }
}

.ct-table {
  > tbody > .pf-c-table__expandable-row {
    // Don't scroll table's expanded contents vertically.
    // Instead, rely on page scrolling.
    // Important for mobile; also useful for desktop.
    overflow-y: visible !important;
    max-height: unset !important;
  }
}

// PF4 upstream issue to adopt expand animation:
// https://github.com/patternfly/patternfly-design/issues/899

@media not all and (prefers-reduced-motion: reduce) {
  // Add expansion animations when prefers-reduced isn't enabled
  .ct-table .pf-c-table__expandable-row-content {
    // Animation ends at or before 2/3 in most cases; so we extend by 1.5 to compensate
    animation: ctListingPanelShow calc(var(--pf-global--TransitionDuration) * 1.5) var(--pf-global--TimingFunction);
  }
}

@keyframes ctListingPanelShow {
  0% {
    // The animation needs to flow downward to feel natural
    transform-origin: top;
    // Overflow will revert when done (but should be hidden during animation)
    overflow: hidden;
    max-height: 0;
    // Padding should 'tween between 0 and the actual padding (unstated)
    padding-top: 0;
    padding-bottom: 0;
  }
  67% {
    // Max height is tricky in animations, as auto doesn't work
    // 100vh makes sense, but would cause different speeds on different devices
    // Screens are almost all =< 12000px; data is almost always smaller
    // we'll relax it to to 100vh at 100%, just in case.
    max-height: 1200px;
  }
  100% {
    // Allow content to extend to the height of the screen (just in case)
    max-height: 100vh;
  }
}
