@layer components{[data-ui=scroll-area]{border-radius:var(--radius-md);width:100%;max-width:100%;height:auto;position:relative}[data-ui=scroll-area] [data-ui=scroll-area-viewport]{border-radius:inherit;outline:none;width:100%;height:100%;overflow:hidden}[data-ui=scroll-area] [data-ui=scroll-area-viewport][data-scroll-fade=true]:before,[data-ui=scroll-area] [data-ui=scroll-area-viewport][data-scroll-fade=true]:after{content:"";pointer-events:none;width:100%;transition:opacity var(--transition-standard-default-effects);display:block;position:absolute;left:0}[data-ui=scroll-area] [data-ui=scroll-area-viewport][data-scroll-fade=true]:before{--scroll-area-overflow-y-start:inherit;height:min(30px, var(--scroll-area-overflow-y-start));background:linear-gradient(to bottom, color-mix(in srgb, var(--color-surface) 80%, transparent), transparent);top:0}[data-ui=scroll-area] [data-ui=scroll-area-viewport][data-scroll-fade=true]:after{--scroll-area-overflow-y-end:inherit;height:min(30px, var(--scroll-area-overflow-y-end,30px));background:linear-gradient(to top, color-mix(in srgb, var(--color-surface) 80%, transparent), transparent);bottom:0}[data-ui=scroll-area-scrollbar]{border-radius:var(--radius-md);margin:var(--spacing-8);opacity:0;transition:opacity var(--transition-standard-fast-effects);pointer-events:none;z-index:10;display:flex;position:absolute}[data-ui=scroll-area-scrollbar][data-scrolling]{transition:none}[data-ui=scroll-area-scrollbar][data-hovering],[data-ui=scroll-area-scrollbar][data-scrolling]{opacity:1;pointer-events:auto}[data-ui=scroll-area-scrollbar][data-orientation=vertical]{width:var(--spacing-4);flex-direction:column;top:0;bottom:0;right:0}[data-ui=scroll-area-scrollbar][data-orientation=vertical]:before{content:"";width:var(--spacing-16);height:100%;position:absolute;left:50%;transform:translate(-50%)}[data-ui=scroll-area-scrollbar][data-orientation=horizontal]{height:var(--spacing-4);flex-direction:row;bottom:0;left:0;right:0}[data-ui=scroll-area-scrollbar][data-orientation=horizontal]:before{content:"";width:100%;height:var(--spacing-16);left:0;right:0;bottom:calc(var(--spacing-4) * -1);position:absolute}[data-ui=scroll-area-thumb]{border-radius:inherit;background-color:var(--color-surface-variant);width:100%}}