.daui-Scroll {
  --daui-Scroll-background-lightness: calc(
    var(--daui-background-lightness) - 4%
  );
  --daui-Scroll-background-opaque: hsl(
    var(--daui-background-hue),
    var(--daui-background-saturation),
    var(--daui-Scroll-background-lightness)
  );
  --daui-Scroll-shadow-width: 1rem;
  --daui-Scroll-fade-width: 4rem;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: flex-start;
  grid-gap: var(--daui-spacing);
  padding: var(--daui-spacing) 0;
  background-color: var(--daui-Scroll-background-opaque);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
}

@supports (overscroll-behavior-x: contain) and
  (not (-webkit-overflow-scrolling: touch)) {
  .daui-Scroll {
    --daui-Scroll-background-transparent: hsla(
      var(--daui-background-hue),
      var(--daui-background-saturation),
      var(--daui-Scroll-background-lightness),
      0
    );

    background-image: linear-gradient(
        90deg,
        var(--daui-Scroll-background-opaque),
        var(--daui-Scroll-background-transparent) var(--daui-Scroll-fade-width),
        var(--daui-Scroll-background-transparent)
          calc(100% - var(--daui-Scroll-fade-width)),
        var(--daui-Scroll-background-opaque)
      ),
      radial-gradient(
        var(--daui-Scroll-shadow-width) 50% at left center,
        hsla(0, 0%, 0%, var(--daui-shadow-opacity)),
        hsla(0, 0%, 0%, 0)
      ),
      radial-gradient(
        var(--daui-Scroll-shadow-width) 50% at right center,
        hsla(0, 0%, 0%, var(--daui-shadow-opacity)),
        hsla(0, 0%, 0%, 0)
      );
    background-attachment: local, scroll, scroll;
  }
}

/* Some browsers (e.g. Firefox) make scrollable elements focusable. */
.daui-Scroll:focus {
  --daui-Scroll-background-lightness: calc(
    var(--daui-background-lightness) - 8%
  );

  outline: 0;
}

.daui-Scroll::before,
.daui-Scroll::after {
  content: "";
  align-self: stretch;
}

/* If the last grid item has 0 width it doesn’t render. */
.daui-Scroll::after {
  width: 1px;
  margin-left: -1px;
}