@charset "UTF-8";

main {

    .content {

        .content-body {

            .carousel.navigate {

                &.products {
                    anchor-name: --carousel-products;
                }
            }

            .carousel.navigate {

                &.products::scroll-button(*) {
                    position-anchor: --carousel-products;
                }
            }

            .carousel.navigate {

                &.products::scroll-button(left) {
                    right: calc(anchor(left) - 16px);
                    top: calc(anchor(top) + 30px);
                }

                &.products::scroll-button(right) {
                    left: calc(anchor(right) - 16px);
                    top: calc(anchor(top) + 30px);
                }
            }

            .carousel.navigate {

                &.products::scroll-marker-group {
                    position-anchor: --carousel-products;
                    top: calc(anchor(top) + 34px);
                }
            }
        }
    }
}