@layer addon {
    .splide {
        .splide__pagination {
            li {
                .splide__pagination__page {
                    width: var(--padding);
                    height: var(--padding);
                    background: transparent;
                    border-radius: 100%;
                    margin: 0;
                    &:after {
                        content: "";
                        display: block;
                        width: 8px;
                        height: 8px;

                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);

                        border-radius: 50%;
                        background: var(--color2);
                    }
                    &.is-active {
                        background: var(--gradient);
                        transform: scale(1.1);
                        &:after {
                            background: var(--color-light);
                        }
                    }
                    @media (max-width: 56em) {
                        width: calc(var(--padding) * 1.25);
                        height: calc(var(--padding) * 1.25);
                        &.is-active {
                            transform: scale(1);
                        }
                    }
                    @media (--max-fablet) {
                        width: calc(var(--padding) * 1.25);
                        height: calc(var(--padding) * 1.25);
                        &.is-active {
                            transform: scale(1);
                        }
                    }
                }
            }
        }
        .splide__track {
            overflow: initial;
            @media (max-width: 56em) {
                padding-right: var(--section) !important;
                .themeColor2 & {
                    padding-left: var(--gutter) !important;
                }
            }
            @media (--max-fablet) {
                padding-right: var(--section) !important;
                .themeColor2 & {
                    padding-left: var(--gutter) !important;
                }
            }
        }
        .splide__arrows {
            @media (max-width: 56em) {
                display: none;
            }
            @media (--max-fablet) {
                display: none;
            }
        }
        .splide__arrow {
            background-color: var(--color-light);
            .icon {
                color: var(--color1);
                transition: var(--transition);
                padding: 5px;
            }
            &:hover:not(:disabled) {
                @media (hover: hover) {
                    background-color: var(--color2);
                    .icon {
                        color: var(--color-light);
                    }
                }
            }
        }
    }
}