@layer component.base {
  :root {
    container-type: scroll-state;
  }
}

@layer component.state {
  .top--shy {
    transition: transform 0.25s;
  }

  @container scroll-state(scrolled: bottom) {
    .top--shy:not(:focus-within) {
      transform: translateY(-100%);
    }
  }

  /* legacy code. Delete when scroll state is supported */
  @supports not (container-type: scroll-state) {
    .top--shy.top--scrolled-up:not(:focus-within) {
      transform: translateY(-100%);
    }
  }
}