.container {
  overflow: clip;

  background-color: var(--color--background-light);
  border: var(--border--light);
}

.container--dark {
  background-color: var(--color--background-inverse);
  color: var(--color--text-inverse);
}

.container--small {
  max-width: var(--container--small);
  margin-inline: auto;
}

.container__inner {
  padding: var(--space--medium);

  .container:not(.container--dark) &:not(:last-child) {
    border-bottom: var(--border--light);
  }

  /*
    Remove border-bottom if the next sibling is a sticky bottom container
    Used on the test page when the restart button is sticky at the bottom and
    the second to last container__inner acts like it's the last item.
  */
  .container:not(.container--dark) &:has(+ .container__sticky--bottom) {
    border-bottom: none;
  }
}

@media screen and (min-width: 820px) {
  .container__inner {
    padding: var(--space--large);
  }
}

.container__inner--tight {
  padding-block: var(--space--base);
}

.container__inner--x-tight {
  padding: var(--space--base);
}

.container__sticky {
  position: sticky;
  top: 0;
  z-index: 800;

  background-color: var(--color--background-light);
}

.container__sticky--bottom {
  top: auto;
  bottom: 0;

  border-top: var(--border--light);
}

@media screen and (min-width: 600px) {
  .layout__split-main .container__sticky {
    /* Account for space around the main content when positioning sticky content */
    top: calc(-1 * var(--space--page-margin-block));
  }

  .layout__split-main .container__sticky--bottom {
    /* Account for space around the main content when positioning sticky content */
    bottom: calc(-1 * var(--space--page-margin-block));
  }
}