@layer addon {
    .splide {
        .splide__arrow {
            background-color: transparent;
            box-shadow: inset 0 0 0 1px var(--color1);
            height: 48px;
            width: 48px;
            color: var(--color1);
            .icon {
                width: 20px;
                height: 20px;
            }
        }

        .splide__pagination {
            margin-top: calc(var(--gutter) * 1.4);
            li .splide__pagination__page {
                width: 6px;
                height: 6px;
                opacity: 0.5;
                background: var(--color1);

                &.is-active {
                    width: 48px;
                    opacity: 1;
                }
            }
        }
        .themeColor2 & {
            .splide__arrow {
                box-shadow: inset 0 0 0 1px var(--color4);
                color: var(--color4);
            }
            .splide__pagination li .splide__pagination__page {
                background: var(--color4);
            }
        }

        &:has(.splide__track--ttb) {
            .splide__arrow {
                left: auto;
                right: var(--gutter);

                &.splide__arrow--prev {
                    top: calc(50% - var(--section) / 2);
                    transform: translateY(-50%) rotate(90deg);
                }
                &.splide__arrow--next {
                    top: calc(50% + var(--section) / 2);
                    transform: translateY(-50%) rotate(90deg);
                }
            }
            .splide__pagination {
                top: 50%;
                right: calc(var(--gutter) + 13px);
                transform: translateY(-50%);
                flex-direction: column;
                li .splide__pagination__page {
                    &.is-active {
                        width: 6px;
                        height: 48px;
                    }
                }
            }
        }

        .templateGallery & {
            .splide__arrow {
                top: unset;
                transform: unset;
                margin-top: var(--gutter);
                &.splide__arrow--prev {
                    right: calc(var(--spacer) + var(--gutter) * 2);
                    left: unset;
                }
                &.splide__arrow--next {
                    right: var(--spacer);
                }
                @media (max-width: 56em) {
                    margin-top: calc(var(--gutter) / 2);
                    &.splide__arrow--prev {
                        right: calc(var(--spacer) + var(--gutter) * 2.5);
                    }
                }
                @media (--max-fablet) {
                    margin-top: calc(var(--gutter) / 2);
                    &.splide__arrow--prev {
                        right: calc(var(--spacer) + var(--gutter) * 2.5);
                    }
                }
            }
            .splide__pagination {
                justify-content: flex-start;
            }
        }
    }
}