@scope([data-example]){[data-slot=scroll-area]{box-sizing:border-box;border-radius:var(--radius-surface);background:var(--surface-1);width:20rem;max-width:100%;height:16rem;box-shadow:var(--shadow-1);position:relative;overflow:hidden}[data-slot=row]>[data-slot=stack]>[data-slot=scroll-area]{width:12rem}[data-slot=scroll-area]>:is([data-slot=top-fade],[data-slot=bottom-fade],div:not([data-slot])){--scroll-area-overflow-y-start:inherit;--scroll-area-overflow-y-end:inherit;inset-inline:0;height:min(2rem, var(--scroll-area-overflow-y-start));background:linear-gradient(var(--surface-1), transparent);pointer-events:none;position:absolute;top:0}[data-slot=scroll-area]>:is([data-slot=bottom-fade],div:not([data-slot])+div:not([data-slot])){height:min(2rem, var(--scroll-area-overflow-y-end));background:linear-gradient(transparent, var(--surface-1));top:auto;bottom:0}[data-slot=stack]:has(>[data-slot=scroll-area]){max-width:100%}[data-slot=scroll-area-viewport]{border-radius:inherit;outline-offset:-3px;width:100%;height:100%}[data-slot=scroll-area-content]{padding:var(--space-3) var(--space-4);font-size:var(--text-sm)}[data-slot=scroll-area-content]>h3{margin-bottom:var(--space-1)}[data-slot=scroll-area-content]>ul{font-variant-numeric:tabular-nums;gap:0}[data-slot=scroll-area-content]>ul>li{padding-block:6px}[data-slot=scroll-area-content]>ul>li+li{border-top:1px solid var(--line-faint)}[data-slot=scroll-area-content]>ul>li:has(>[data-slot=hint]){padding-block:var(--space-2);flex-direction:column;font-weight:500;display:flex}[data-slot=scroll-area-content]>ul>li:has(>[data-slot=hint])>[data-slot=hint]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[data-slot=scroll-area-content]>article+article{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line-faint)}[data-slot=scroll-area-content]>article>h3{margin-bottom:var(--space-1);justify-content:space-between;align-items:baseline;display:flex}[data-slot=scroll-area-content]>article>h3>[data-slot=hint]{font-size:var(--text-xs)}[data-slot=scroll-area-content]:has(>figure){gap:var(--space-4);width:max-content;display:flex}[data-slot=scroll-area-content]>figure{margin:0}[data-slot=scroll-area-content]>figure>div{box-sizing:border-box;border-radius:var(--radius-control);background:var(--tint);width:8rem;height:10rem;box-shadow:inset 0 0 0 1px var(--line-faint)}[data-slot=scroll-area-content]>figure>figcaption{padding-top:var(--space-2);color:var(--muted);font-size:var(--text-xs)}[data-slot=scroll-area-content]:has(>table){padding:0}[data-slot=scroll-area-content]>table{white-space:nowrap;font-variant-numeric:tabular-nums}[data-slot=scroll-area-content]>table thead th{background:var(--surface-1);box-shadow:inset 0 -1px var(--line-faint);border-bottom:0;position:sticky;top:0}[data-slot=scroll-area-content]>table tbody th{color:var(--ink)}[data-slot=scroll-area-content]>table tr:last-child>*{border-bottom:0}[data-slot=scroll-area-scrollbar]{box-sizing:border-box;opacity:0;transition:opacity var(--duration);padding:2px;display:flex}[data-slot=scroll-area-scrollbar][data-orientation=vertical]{width:10px;margin-block:var(--space-1);flex-direction:column}[data-slot=scroll-area-scrollbar][data-orientation=horizontal]{height:10px;margin-inline:var(--space-1)}[data-slot=scroll-area-scrollbar][data-visible]{opacity:1}[data-slot=scroll-area-thumb]{background:var(--line-faint);border-radius:999px;position:relative}:is([data-scrolling],[data-hovering])>[data-slot=scroll-area-thumb]{background:var(--line)}[data-slot=scroll-area-thumb][data-dragging]{background:var(--muted)}[data-slot=scroll-area-corner]{background:0 0}[data-slot=scroll-area]>[data-slot=hint]{inset-inline:0;padding-block:var(--space-2);background:linear-gradient(transparent, var(--surface-1) 40%);font-size:var(--text-xs);text-align:center;pointer-events:none;position:absolute;bottom:0}[data-slot=scroll-area]:is([data-at-end],:not([data-overflow-x],[data-overflow-y]))>:is([data-slot=scroll-area]>[data-slot=hint]),[data-slot=scroll-area][data-at-start]>:is([data-slot=scroll-area]>[data-slot=hint])>[data-show=more],[data-slot=scroll-area]:not([data-at-start])>:is([data-slot=scroll-area]>[data-slot=hint])>[data-show=start]{display:none}:scope[data-example=scroll-area\/horizontal] [data-slot=scroll-area]{height:auto;container-type:inline-size}:scope[data-example=scroll-area\/horizontal] [data-slot=scroll-area] [data-slot=scroll-area-content]{padding:var(--space-3) var(--space-3) 22px}:scope[data-example=scroll-area\/horizontal] [data-slot=scroll-area] ul{gap:var(--space-3);flex-direction:row;width:max-content}:scope[data-example=scroll-area\/horizontal] [data-slot=scroll-area] li{width:calc((100cqi - 5 * var(--space-3)) / 4);color:var(--muted);font-size:var(--text-xs);border-top:0;flex-direction:column;gap:6px;padding:0;display:flex}:scope[data-example=scroll-area\/horizontal] [data-slot=scroll-area] [data-slot=swatch]{aspect-ratio:1;border-radius:var(--radius-control);width:100%;height:auto}:scope:is([data-example=scroll-area\/type],[data-example=scroll-area\/hide-delay]) [data-slot=grid]{align-items:end;gap:var(--space-3);width:26rem;max-width:100%}:scope:is([data-example=scroll-area\/type],[data-example=scroll-area\/hide-delay]) [data-slot=stack]{align-items:stretch;gap:var(--space-2);min-width:0}:scope:is([data-example=scroll-area\/type],[data-example=scroll-area\/hide-delay]) [data-slot=scroll-area]{width:100%;height:10rem}:scope:is([data-example=scroll-area\/type],[data-example=scroll-area\/hide-delay]) code{color:var(--muted);font-family:var(--mono);font-size:var(--text-xs)}}