chromium/chrome/browser/resources/webui_gallery/demos/scroll_view/scroll_view_demo.css

/* Copyright 2024 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=../demo.css.js
 * #import=//resources/cr_elements/cr_shared_vars.css.js
 * #scheme=relative
 * #include=demo
 * #css_wrapper_metadata_end */

/* Parent of #container for CrContainerShadowMixin needs to be flex column. */
#layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#container {
  max-height: 300px;
  overflow: auto;
  position: relative;
  width: 100%;
}

.item {
  padding: 16px;
  text-align: center;
}

.item:focus {
  background-color: var(--cr-focused-item-color);
  outline: none;
}

.can-scroll-log,
.scrolled-to-top-log,
.scrolled-to-bottom-log {
  display: none;
}

.can-scroll ~ .can-scroll-log,
.scrolled-to-top ~ .scrolled-to-top-log,
.scrolled-to-bottom ~ .scrolled-to-bottom-log {
  display: block;
}

#sliderContainer {
  align-items: center;
  display: flex;
  gap: 12px;
}

#itemsLengthSlider {
  width: 200px;
}