/* See ./sticky-container.md#sticky-containerruntimecss for the runtime
 * chrome contract, the display: contents / body-lift interaction, the
 * :root variables published by sticky-container.js, and the
 * selector-ordering rationale. */

/* 1. Block root + sub-sections */
.sticky-container {
  display: contents;
}

.sticky-container__released {
  display: block;
  width: 100%;
}

.sticky-container__pinned {
  display: block;
  width: 100%;
  z-index: 100;
}

/* 2. Edge variants - __pinned sticks to whichever edge the modifier names. */
.sticky-container--top > .sticky-container__pinned {
  position: sticky;
  top: 0;
}

.sticky-container--bottom > .sticky-container__pinned {
  position: sticky;
  bottom: 0;
}