.scroll-fade-arrow{z-index:1;border:1px solid var(--ui-border);background:var(--ui-bg);width:1.75rem;height:1.75rem;color:var(--ui-text-highlighted);border-radius:9999px;justify-content:center;align-items:center;display:none;position:absolute;top:50%;translate:0 -50%;box-shadow:0 1px 4px #0000001f}.scroll-fade-arrow:hover{background:var(--ui-bg-elevated)}@media (hover:hover) and (pointer:fine){.scroll-fade-arrow{display:flex}}.scroll-fade{scrollbar-width:none;--fade-start:var(--fade-start-size);--fade-end:var(--fade-end-size);-webkit-mask-image:linear-gradient(to right,transparent var(--fade-inset),#000 calc(var(--fade-inset) + var(--fade-start)),#000 calc(100% - var(--fade-inset) - var(--fade-end)),transparent calc(100% - var(--fade-inset)));-webkit-mask-image:linear-gradient(to right,transparent var(--fade-inset),#000 calc(var(--fade-inset) + var(--fade-start)),#000 calc(100% - var(--fade-inset) - var(--fade-end)),transparent calc(100% - var(--fade-inset)));mask-image:linear-gradient(to right,transparent var(--fade-inset),#000 calc(var(--fade-inset) + var(--fade-start)),#000 calc(100% - var(--fade-inset) - var(--fade-end)),transparent calc(100% - var(--fade-inset)))}.scroll-fade::-webkit-scrollbar{display:none}.scroll-fade.at-start{--fade-start:0px}.scroll-fade.at-end{--fade-end:0px}.scroll-fade-peek{container-type:inline-size}.scroll-fade-peek button{--peek:3.5;--gaps:3;flex:0 0 calc((100cqw - var(--gaps) * .5rem) / var(--peek));min-width:0;padding-inline:.25rem}.scroll-fade-peek button>span{text-overflow:ellipsis;max-width:100%;overflow:hidden}@container (width>=21.25rem){.scroll-fade-peek button{--peek:4.3;--gaps:4}}@container (width>=26.25rem){.scroll-fade-peek button{--peek:4.5;--gaps:4}}@container (width>=30rem){.scroll-fade-peek button{--peek:5.5;--gaps:5}}@container (width>=35.5rem){.scroll-fade-peek button{--peek:6.5;--gaps:6}}@container (width>=41rem){.scroll-fade-peek button{--peek:7.5;--gaps:7}}