.tab-content {
  // Workaround for pkgdown's CSS to make tab-pane all a consistent height
  // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L342-L355
  >.tab-pane.html-fill-container {
    display: none;
  }

  // Take precedence over Bootstrap's `display:block` rule
  >.active.html-fill-container {
    display: flex;
  }

  // Another workaround for pkgdown adding extra padding we didn't ask for
  // https://github.com/r-lib/pkgdown/blob/956f07/inst/BS5/assets/pkgdown.scss#L335-L337
  &.html-fill-container {
    padding: 0;
  }
}


.bslib-page-fill {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: $spacer;
  gap: $spacer;
}

.bslib-page-title {
  background-color: $bslib-page-title-bg;
  color: $bslib-page-title-color;
  font-size: $h4-font-size;
  font-weight: 300;
  padding: $spacer;
  padding-left: $bslib-sidebar-padding;
  margin-bottom: 0;
}

@include media-breakpoint-down(sm) {
  .bslib-page-fill {
    height: var(--bslib-page-fill-mobile-height, auto);
  }
}

// Some things like card(), p(), inputs, etc. want some margin-bottom by default
// so you can plop them anywhere and you get spacing between rows. However, now
// that we have layout utilities like page_fillable(), layout_columns(),
// layout_sidebar(), etc. where we can control the gap between rows/columns, we
// need a way to reset those margin-bottom to 0 in those special contexts
:root {
  --bslib-mb-spacer: #{$spacer};
}

// Our own utility class that we add to our components, like card().
.bslib-mb-spacer {
  margin-bottom: var(--bslib-mb-spacer);
}

// Our own utility class that we add to our layout utilities, like page_fillable().
.bslib-gap-spacing {
  gap: var(--bslib-mb-spacer);
  > .bslib-mb-spacer, > .form-group, > p, > pre {
    margin-bottom: 0;
  }
}
