.ct-listing-panel {
  display: flex;
  flex-wrap: wrap;

  &-actions {
    order: 2;
    flex-grow: 1;
    padding-block: var(--pf-v5-global--spacer--sm);
    padding-inline: var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg);
  }

  &-caption {
    margin-inline-start: auto;
  }

  &-tabs {
    flex-grow: 1;
    order: 1;
  }

  .pf-v5-c-tab-content {
    order: 3;
    flex-basis: 100%;
  }

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

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

    // Containing hack part 1
    float: inline-start;

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

.ct-table {
  > tbody > .pf-v5-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-block: visible !important;
    max-block-size: 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-v5-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-v5-global--TransitionDuration) * 1.5) var(--pf-v5-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-block-size: 0;
    // Padding should 'tween between 0 and the actual padding (unstated)
    padding-block: 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-block-size: 1200px;
  }

  100% {
    // Allow content to extend to the height of the screen (just in case)
    max-block-size: 100vh;
  }
}