.horizontal-rail{position:relative;width:100%;--rail-gap:12px;--rail-pad-top:0px;--rail-pad-bottom:10px;--rail-pad-inline:4px;--rail-focus-space:4px}.horizontal-rail:after,.horizontal-rail:before{content:"";position:absolute;top:var(--rail-pad-top);bottom:var(--rail-pad-bottom);width:64px;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s ease}.horizontal-rail:before{left:0;background:linear-gradient(90deg,var(--background-color,#000) 0,rgba(0,0,0,0) 100%)}.horizontal-rail:after{right:0;background:linear-gradient(270deg,var(--background-color,#000) 0,rgba(0,0,0,0) 100%)}.horizontal-rail.can-left:before,.horizontal-rail.can-right:after{opacity:1}.horizontal-rail .rail-track{display:flex;gap:var(--rail-gap);overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;margin-top:calc(var(--rail-focus-space)*-1);padding-top:calc(var(--rail-pad-top) + var(--rail-focus-space));padding-bottom:var(--rail-pad-bottom);padding-inline:var(--rail-pad-inline);scroll-padding-inline:var(--rail-pad-inline)}.horizontal-rail .rail-track::-webkit-scrollbar{display:none}.horizontal-rail .rail-arrow{position:absolute;top:0;height:100%;z-index:3;width:50px;display:flex;align-items:center;justify-content:center;padding:0;border:none;cursor:pointer;background:rgba(0,0,0,0);color:var(--text-color);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease,background .3s ease}.horizontal-rail .rail-arrow svg{font-size:var(--font-size-llg)}.horizontal-rail .rail-arrow.left{left:0}.horizontal-rail .rail-arrow.right{right:0}.horizontal-rail:focus-within .rail-arrow,.horizontal-rail:hover .rail-arrow{opacity:1;visibility:visible}.horizontal-rail .rail-arrow.left:hover{background:linear-gradient(90deg,rgba(0,0,0,.58) 25.41%,rgba(0,0,0,0))}.horizontal-rail .rail-arrow.right:hover{background:linear-gradient(270deg,rgba(0,0,0,.58) 25.41%,rgba(0,0,0,0))}@media(hover:none){.horizontal-rail .rail-arrow{display:none}}