@supports selector(&::scroll-button(*)){
    .scroll-x.scroll-snap{
        anchor-name: --scroll-snap;
        
        &::scroll-button(*) {
            position:absolute;
            z-index: 9;
            width: var(--scroll-button-size);
            height: var(--scroll-button-size);
            margin: auto;
            border: 1px solid rgba(0,0,0,.13);
            border-radius: 50%;
            font-size: 1em;
            background: rgba(255,255,255,1);
            transition: all .5s linear;
            box-shadow:0 0 1ch var(--shadow-light),0 .146ch .236ch var(--shadow-light),.146ch .236ch .382ch var(--shadow-light),.236ch .382ch .618ch var(--shadow-light);
            background: no-repeat center / 1em #fff;
            cursor:pointer;
            position-anchor: --scroll-snap;
            position-visibility: always;
            position-area:end;
            &:hover{
                filter: brightness(1)!important;
            }
        }
        
        &::scroll-button(*):disabled{
            opacity: 0;
            cursor: not-allowed;
            pointer-events: none;
        }
        
        &::scroll-button(right) {
            margin-right: 1em;
            content: '';
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000'><path d='m560-240-56-58 142-142H160v-80h486L504-662l56-58 240 240-240 240Z'/></svg>");
        }

        &::scroll-button(left) {
            margin-right: calc(var(--scroll-button-size) + 2em);
            content: '';
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23000'><path d='M400-240 160-480l240-240 56 58-142 142h486v80H314l142 142-56 58Z'/></svg>");
        }
    }
    
    .carousel .scroll-x.scroll-snap{
        &::scroll-button(*) {
            margin-inline: 1ch;
            position-area:unset;
            top: calc((var(--carousel-height) - var(--scroll-button-size))/2);
        }
        
        &::scroll-button(right) {right: 2ch}
        &::scroll-button(left) {left: 1ch}
    }
}