@layer design-system.components{.vds-scroll-area-root{--scroll-area-scrollbar-size:var(--vds-space-2-5,.625rem);--scroll-area-scrollbar-padding:2px;--scroll-area-track-inset:var(--vds-space-1,4px);--scroll-area-track-bg:transparent;--scroll-area-track-bg-hover:var(--vds-color-bg-subtle,#0000000a);--scroll-area-thumb-bg:var(--vds-color-border-muted,#d4d4d8);--scroll-area-thumb-bg-hover:var(--vds-color-border-strong,#a1a1aa);--scroll-area-thumb-bg-active:var(--vds-color-border-interactive,#71717a);--scroll-area-thumb-radius:var(--vds-radius-scrollbar-thumb,6px);--scroll-area-transition-duration:var(--vds-duration-fast,.15s);--scroll-area-transition-ease:var(--vds-ease-out,cubic-bezier(0, 0, .2, 1));--scroll-area-mask-size:40px;--scroll-area-mask-inline-start:transparent;--scroll-area-mask-inline-end:transparent;--scroll-area-mask-block-start:transparent;--scroll-area-mask-block-end:transparent;--scroll-area-marquee-duration:30s;--scroll-area-marquee-direction:normal;--scroll-area-marquee-gap:var(--vds-space-3,.75rem);--scroll-area-arrow-size:var(--vds-size-sm,2rem);--scroll-area-arrow-icon-size:1rem;--scroll-area-arrow-bg:var(--vds-color-surface,#fff);--scroll-area-arrow-bg-hover:var(--vds-color-surface-hover,#f9fafb);--scroll-area-arrow-bg-active:var(--vds-color-bg-muted,#f3f4f6);--scroll-area-arrow-color:var(--vds-color-text,#111827);--scroll-area-arrow-color-disabled:var(--vds-color-text-muted,#9ca3af);--scroll-area-arrow-border-color:var(--vds-color-border,#d1d5db);--scroll-area-arrow-radius:var(--vds-radius-action,var(--vds-radius-element,.5rem));--scroll-area-arrow-shadow:var(--vds-shadow-sm,0 1px 2px 0 #0000000d);--scroll-area-arrow-gap:var(--vds-space-1,.25rem);--scroll-area-drag-cursor:grab;--scroll-area-drag-cursor-active:grabbing}.vds-scroll-area-root[data-size=sm]{--scroll-area-scrollbar-size:var(--vds-space-2,.5rem)}.vds-scroll-area-root[data-size=lg]{--scroll-area-scrollbar-size:var(--vds-space-3,.75rem)}}
@layer design-system.components{.vds-scroll-area-root{gap:var(--scroll-area-arrow-gap);min-block-size:0;min-inline-size:0;display:flex;position:relative}.vds-scroll-area-root[data-orientation=vertical]{flex-direction:column}.vds-scroll-area-root[data-orientation=horizontal],.vds-scroll-area-root[data-orientation=both]{flex-direction:row}.vds-scroll-area-root:not([data-arrows=true]){gap:0}.vds-scroll-area-root[data-arrow-placement=inner]{gap:0;display:block}.vds-scroll-area{border-radius:inherit;flex:auto;min-block-size:0;min-inline-size:0;position:relative;overflow:hidden}.vds-scroll-area-root[data-arrow-placement=inner] .vds-scroll-area{block-size:100%;inline-size:100%}.vds-scroll-area-viewport{border-radius:inherit;overscroll-behavior:contain;block-size:100%;inline-size:100%}.vds-scroll-area-viewport:focus-visible{outline:2px solid var(--vds-color-border-focus,Highlight);outline-offset:-2px}.vds-scroll-area-root[data-drag=true] .vds-scroll-area-viewport{cursor:var(--scroll-area-drag-cursor)}.vds-scroll-area-root[data-drag=true][data-dragging=true] .vds-scroll-area-viewport{cursor:var(--scroll-area-drag-cursor-active);-webkit-user-select:none;user-select:none}.vds-scroll-area-root[data-dragging=true] .vds-scroll-area-viewport *{pointer-events:none}.vds-scroll-area-root[data-mask=true][data-orientation=horizontal] .vds-scroll-area{-webkit-mask-image:linear-gradient(to right, var(--scroll-area-mask-inline-start) 0, color-mix(in srgb, var(--scroll-area-mask-inline-start), black 55%) calc(var(--scroll-area-mask-size) * .35), color-mix(in srgb, var(--scroll-area-mask-inline-start), black 85%) calc(var(--scroll-area-mask-size) * .7), black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 85%) calc(100% - var(--scroll-area-mask-size) * .7), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 55%) calc(100% - var(--scroll-area-mask-size) * .35), var(--scroll-area-mask-inline-end) 100%);mask-image:linear-gradient(to right, var(--scroll-area-mask-inline-start) 0, color-mix(in srgb, var(--scroll-area-mask-inline-start), black 55%) calc(var(--scroll-area-mask-size) * .35), color-mix(in srgb, var(--scroll-area-mask-inline-start), black 85%) calc(var(--scroll-area-mask-size) * .7), black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 85%) calc(100% - var(--scroll-area-mask-size) * .7), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 55%) calc(100% - var(--scroll-area-mask-size) * .35), var(--scroll-area-mask-inline-end) 100%);-webkit-mask-image:linear-gradient(to right, var(--scroll-area-mask-inline-start) 0, color-mix(in srgb, var(--scroll-area-mask-inline-start), black 55%) calc(var(--scroll-area-mask-size) * .35), color-mix(in srgb, var(--scroll-area-mask-inline-start), black 85%) calc(var(--scroll-area-mask-size) * .7), black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 85%) calc(100% - var(--scroll-area-mask-size) * .7), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 55%) calc(100% - var(--scroll-area-mask-size) * .35), var(--scroll-area-mask-inline-end) 100%)}:is(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)).vds-scroll-area-root[data-mask=true][data-orientation=horizontal] .vds-scroll-area,:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .vds-scroll-area-root[data-mask=true][data-orientation=horizontal] .vds-scroll-area){-webkit-mask-image:linear-gradient(to left, var(--scroll-area-mask-inline-start) 0, color-mix(in srgb, var(--scroll-area-mask-inline-start), black 55%) calc(var(--scroll-area-mask-size) * .35), color-mix(in srgb, var(--scroll-area-mask-inline-start), black 85%) calc(var(--scroll-area-mask-size) * .7), black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 85%) calc(100% - var(--scroll-area-mask-size) * .7), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 55%) calc(100% - var(--scroll-area-mask-size) * .35), var(--scroll-area-mask-inline-end) 100%);mask-image:linear-gradient(to left, var(--scroll-area-mask-inline-start) 0, color-mix(in srgb, var(--scroll-area-mask-inline-start), black 55%) calc(var(--scroll-area-mask-size) * .35), color-mix(in srgb, var(--scroll-area-mask-inline-start), black 85%) calc(var(--scroll-area-mask-size) * .7), black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 85%) calc(100% - var(--scroll-area-mask-size) * .7), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 55%) calc(100% - var(--scroll-area-mask-size) * .35), var(--scroll-area-mask-inline-end) 100%);-webkit-mask-image:linear-gradient(to left, var(--scroll-area-mask-inline-start) 0, color-mix(in srgb, var(--scroll-area-mask-inline-start), black 55%) calc(var(--scroll-area-mask-size) * .35), color-mix(in srgb, var(--scroll-area-mask-inline-start), black 85%) calc(var(--scroll-area-mask-size) * .7), black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 85%) calc(100% - var(--scroll-area-mask-size) * .7), color-mix(in srgb, var(--scroll-area-mask-inline-end), black 55%) calc(100% - var(--scroll-area-mask-size) * .35), var(--scroll-area-mask-inline-end) 100%)}.vds-scroll-area-root[data-mask=true][data-orientation=vertical] .vds-scroll-area{-webkit-mask-image:linear-gradient(to bottom, var(--scroll-area-mask-block-start) 0, color-mix(in srgb, var(--scroll-area-mask-block-start), black 55%) calc(var(--scroll-area-mask-size) * .35), color-mix(in srgb, var(--scroll-area-mask-block-start), black 85%) calc(var(--scroll-area-mask-size) * .7), black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), color-mix(in srgb, var(--scroll-area-mask-block-end), black 85%) calc(100% - var(--scroll-area-mask-size) * .7), color-mix(in srgb, var(--scroll-area-mask-block-end), black 55%) calc(100% - var(--scroll-area-mask-size) * .35), var(--scroll-area-mask-block-end) 100%);mask-image:linear-gradient(to bottom, var(--scroll-area-mask-block-start) 0, color-mix(in srgb, var(--scroll-area-mask-block-start), black 55%) calc(var(--scroll-area-mask-size) * .35), color-mix(in srgb, var(--scroll-area-mask-block-start), black 85%) calc(var(--scroll-area-mask-size) * .7), black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), color-mix(in srgb, var(--scroll-area-mask-block-end), black 85%) calc(100% - var(--scroll-area-mask-size) * .7), color-mix(in srgb, var(--scroll-area-mask-block-end), black 55%) calc(100% - var(--scroll-area-mask-size) * .35), var(--scroll-area-mask-block-end) 100%);-webkit-mask-image:linear-gradient(to bottom, var(--scroll-area-mask-block-start) 0, color-mix(in srgb, var(--scroll-area-mask-block-start), black 55%) calc(var(--scroll-area-mask-size) * .35), color-mix(in srgb, var(--scroll-area-mask-block-start), black 85%) calc(var(--scroll-area-mask-size) * .7), black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), color-mix(in srgb, var(--scroll-area-mask-block-end), black 85%) calc(100% - var(--scroll-area-mask-size) * .7), color-mix(in srgb, var(--scroll-area-mask-block-end), black 55%) calc(100% - var(--scroll-area-mask-size) * .35), var(--scroll-area-mask-block-end) 100%)}.vds-scroll-area-root[data-mask=true][data-orientation=both] .vds-scroll-area{-webkit-mask-image:linear-gradient(to right, var(--scroll-area-mask-inline-start) 0, black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), var(--scroll-area-mask-inline-end) 100%), linear-gradient(to bottom, var(--scroll-area-mask-block-start) 0, black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), var(--scroll-area-mask-block-end) 100%);mask-image:linear-gradient(to right, var(--scroll-area-mask-inline-start) 0, black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), var(--scroll-area-mask-inline-end) 100%), linear-gradient(to bottom, var(--scroll-area-mask-block-start) 0, black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), var(--scroll-area-mask-block-end) 100%);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-image:linear-gradient(to right, var(--scroll-area-mask-inline-start) 0, black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), var(--scroll-area-mask-inline-end) 100%), linear-gradient(to bottom, var(--scroll-area-mask-block-start) 0, black var(--scroll-area-mask-size), black calc(100% - var(--scroll-area-mask-size)), var(--scroll-area-mask-block-end) 100%);-webkit-mask-composite:source-in}.vds-scrollbar{touch-action:none;-webkit-user-select:none;user-select:none;padding:var(--scroll-area-scrollbar-padding);background-color:var(--scroll-area-track-bg);border-radius:var(--scroll-area-thumb-radius);transition:background-color var(--scroll-area-transition-duration) var(--scroll-area-transition-ease), opacity var(--scroll-area-transition-duration) var(--scroll-area-transition-ease);display:flex}.vds-scrollbar:hover{background-color:var(--scroll-area-track-bg-hover)}.vds-scrollbar[data-orientation=vertical]{inline-size:var(--scroll-area-scrollbar-size);margin-block:var(--scroll-area-track-inset)}.vds-scrollbar[data-orientation=horizontal]{block-size:var(--scroll-area-scrollbar-size);margin-inline:var(--scroll-area-track-inset);flex-direction:column}.vds-scroll-area-root[data-scrollbar-type=smart]>.vds-scroll-area>.vds-scrollbar{opacity:0;pointer-events:none}.vds-scroll-area-root[data-scrollbar-type=smart]:is([data-scrolling=true],:focus-within)>.vds-scroll-area>.vds-scrollbar{opacity:1;pointer-events:auto}@media (hover:hover){.vds-scroll-area-root[data-scrollbar-type=smart]:hover>.vds-scroll-area>.vds-scrollbar{opacity:1;pointer-events:auto}}@media (forced-colors:active){.vds-scroll-area-root[data-scrollbar-type=smart]>.vds-scroll-area>.vds-scrollbar{opacity:1;pointer-events:auto}.vds-scrollbar-thumb{background-color:canvastext}}.vds-scroll-area-root[data-drag=true] .vds-scrollbar,.vds-scroll-area-root[data-arrows=true] .vds-scrollbar,.vds-scroll-area-root[data-marquee=true] .vds-scrollbar,.vds-scroll-area-root[data-hide-scrollbar=true] .vds-scrollbar{display:none}.vds-scrollbar-thumb{border-radius:var(--scroll-area-thumb-radius);background-color:var(--scroll-area-thumb-bg);transition:background-color var(--scroll-area-transition-duration) var(--scroll-area-transition-ease);flex:1;position:relative}.vds-scrollbar-thumb:hover{background-color:var(--scroll-area-thumb-bg-hover)}.vds-scrollbar-thumb[data-state=visible]:active{background-color:var(--scroll-area-thumb-bg-active)}.vds-scrollbar-thumb:before{content:"";min-block-size:44px;min-inline-size:44px;position:absolute;inset:-6px}.vds-scroll-area-corner{background-color:var(--scroll-area-track-bg)}.vds-scroll-area-arrow{inline-size:var(--scroll-area-arrow-size);block-size:var(--scroll-area-arrow-size);color:var(--scroll-area-arrow-color);background-color:var(--scroll-area-arrow-bg);border:1px solid var(--scroll-area-arrow-border-color);border-radius:var(--scroll-area-arrow-radius);box-shadow:var(--scroll-area-arrow-shadow);cursor:pointer;appearance:none;transition:background-color var(--scroll-area-transition-duration) var(--scroll-area-transition-ease), color var(--scroll-area-transition-duration) var(--scroll-area-transition-ease), opacity var(--scroll-area-transition-duration) var(--scroll-area-transition-ease), transform var(--scroll-area-transition-duration) var(--scroll-area-transition-ease);flex:none;justify-content:center;align-self:center;align-items:center;padding:0;display:inline-flex}.vds-scroll-area-arrow:hover:not(:disabled){background-color:var(--scroll-area-arrow-bg-hover)}.vds-scroll-area-arrow:active:not(:disabled){background-color:var(--scroll-area-arrow-bg-active)}.vds-scroll-area-arrow:disabled{color:var(--scroll-area-arrow-color-disabled);cursor:not-allowed;opacity:var(--vds-opacity-disabled,.5)}.vds-scroll-area-arrow:focus-visible{outline:2px solid var(--vds-color-ring,#6366f1);outline-offset:2px}.vds-scroll-area-arrow svg{inline-size:var(--scroll-area-arrow-icon-size);block-size:var(--scroll-area-arrow-icon-size);display:block}.vds-scroll-area-root[data-arrow-placement=inner] .vds-scroll-area-arrow{z-index:2;position:absolute}.vds-scroll-area-root[data-arrow-placement=inner][data-orientation=horizontal] .vds-scroll-area-arrow{inset-block-start:50%;transform:translateY(-50%)}.vds-scroll-area-root[data-arrow-placement=inner][data-orientation=horizontal] .vds-scroll-area-arrow[data-side=start]{inset-inline-start:var(--scroll-area-arrow-inset,.5rem)}.vds-scroll-area-root[data-arrow-placement=inner][data-orientation=horizontal] .vds-scroll-area-arrow[data-side=end]{inset-inline-end:var(--scroll-area-arrow-inset,.5rem)}.vds-scroll-area-root[data-arrow-placement=inner][data-orientation=vertical] .vds-scroll-area-arrow{inset-inline-start:50%;transform:translate(-50%)}.vds-scroll-area-root[data-arrow-placement=inner][data-orientation=vertical] .vds-scroll-area-arrow[data-side=start]{inset-block-start:var(--scroll-area-arrow-inset,.5rem)}.vds-scroll-area-root[data-arrow-placement=inner][data-orientation=vertical] .vds-scroll-area-arrow[data-side=end]{inset-block-end:var(--scroll-area-arrow-inset,.5rem)}.vds-scroll-area-root[data-arrow-appearance=hover] .vds-scroll-area-arrow{opacity:0;pointer-events:none}.vds-scroll-area-root[data-arrow-appearance=hover]:hover .vds-scroll-area-arrow,.vds-scroll-area-root[data-arrow-appearance=hover]:focus-within .vds-scroll-area-arrow{opacity:1;pointer-events:auto}:is(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .vds-scroll-area-arrow[data-side=start] svg,:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .vds-scroll-area-arrow[data-side=end] svg){transform:scaleX(-1)}.vds-scroll-area-root[data-orientation=vertical] .vds-scroll-area-arrow svg{transform:none!important}.vds-scroll-area-marquee{align-items:center;gap:var(--scroll-area-marquee-gap);inline-size:max-content;animation:vds-scroll-area-marquee-x var(--scroll-area-marquee-duration,30s) linear infinite;animation-direction:var(--scroll-area-marquee-direction,normal);will-change:transform;padding-inline-end:var(--scroll-area-marquee-gap);display:flex}.vds-scroll-area-marquee-item{flex:none;align-items:center;display:flex}.vds-scroll-area-root[data-orientation=vertical] .vds-scroll-area-marquee{block-size:max-content;inline-size:100%;flex-direction:column;padding-block-end:var(--scroll-area-marquee-gap);padding-inline-end:0;animation-name:vds-scroll-area-marquee-y}:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .vds-scroll-area-root[data-orientation=horizontal] .vds-scroll-area-marquee{animation-direction:reverse}.vds-scroll-area-root[data-marquee=true][data-marquee-pause-on-hover=true]:hover .vds-scroll-area-marquee,.vds-scroll-area-root[data-marquee=true][data-marquee-pause-on-hover=true]:focus-within .vds-scroll-area-marquee{animation-play-state:paused}@keyframes vds-scroll-area-marquee-x{0%{transform:translate(0,0)}to{transform:translate(-50%)}}@keyframes vds-scroll-area-marquee-y{0%{transform:translate(0,0)}to{transform:translateY(-50%)}}.vds-scroll-area-sentinel{pointer-events:none;opacity:0;flex:none;block-size:1px;inline-size:1px}@media (prefers-reduced-motion:reduce){.vds-scroll-area-arrow,.vds-scrollbar,.vds-scrollbar-thumb{transition:none}.vds-scroll-area-marquee{animation:none}}}