:host {
  bottom: 0;
  min-height: 17px; /* based on https://codepen.io/sambible/post/browser-scrollbar-widths (fixes #3) */
  overflow: auto;
  position: fixed;
}

.strut {
  height: 1px;
  overflow: hidden;
  pointer-events: none;

  &::before {
    content: "\A0"; /* fixes Amphiluke/floating-scroll#6 */
  }
}

:host,
.strut {
  font-size: 1px;
  line-height: 0;
  margin: 0;
  padding: 0;
}

:host(:state(latent)) {
  clip-path: inset(100%);

  .strut::before {
    content: "\A0\A0"; /* changing content fixes eventual bug with widget re-rendering in Chrome */
  }
}

:host([viewport]:not([hidden])) {
  display: block;
}

:host([viewport]:not(:state(latent))) {
  position: sticky;
}