@charset "UTF-8";

main {

    .content {

        .content-body {

            .carousel.navigate {

                &.recipe-dough {
                    anchor-name: --carousel-recipe-dough;
                }

                &.recipe-filling {
                    anchor-name: --carousel-recipe-filling;
                }

                &.recipe-melon {
                    anchor-name: --carousel-recipe-melon;
                }

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

            .carousel.navigate {

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

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

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

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

            .carousel.navigate {

                &.recipe-dough::scroll-button(left),
                &.recipe-filling::scroll-button(left),
                &.recipe-melon::scroll-button(left),
                &.recipe::scroll-button(left) {
                    right: calc(anchor(left) - 16px);
                    top: calc(anchor(top) + 30px);
                }

                &.recipe-dough::scroll-button(right),
                &.recipe-filling::scroll-button(right),
                &.recipe-melon::scroll-button(right),
                &.recipe::scroll-button(right) {
                    left: calc(anchor(right) - 16px);
                    top: calc(anchor(top) + 30px);
                }
            }

            .carousel.navigate {

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

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

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

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