.scrollable-container[component]{display:block}.scrollable-container[component] .scroll-container{scroll-behavior:var(--scroll-behavior-smooth);-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto}.scrollable-container[component] .scroll-container::-webkit-scrollbar{display:none}.scrollable-container[component] .scroll-container.fade-out-inline-start{-webkit-mask-image:linear-gradient(90deg,#0000,#0000 17px,#000 65px);mask-image:linear-gradient(90deg,#0000,#0000 17px,#000 65px)}.scrollable-container[component] .scroll-container.fade-out-inline-end{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 65px),#0000 calc(100% - 17px),#0000);mask-image:linear-gradient(90deg,#000 calc(100% - 65px),#0000 calc(100% - 17px),#0000)}.scrollable-container[component] .scroll-container.fade-out-inline-start.fade-out-inline-end{-webkit-mask-image:linear-gradient(90deg,#0000,#0000 17px,#000 65px calc(100% - 65px),#0000 calc(100% - 17px),#0000);mask-image:linear-gradient(90deg,#0000,#0000 17px,#000 65px calc(100% - 65px),#0000 calc(100% - 17px),#0000)}.scrollable-container[component] .previous-button,.scrollable-container[component] .next-button{opacity:1;transition:opacity var(--transition-duration-normal) ease-in-out, translate var(--transition-duration-normal) ease-in-out;position:absolute;top:50%;translate:0 -50%}.scrollable-container[component] .previous-button{left:0}@starting-style{.scrollable-container[component] .previous-button{opacity:0;translate:-50% -50%}}.scrollable-container[component] .next-button{right:0}@starting-style{.scrollable-container[component] .next-button{opacity:0;translate:50% -50%}}