godaddy-wordpress/go

/*! Modern: CoBlocks Carousel */
.wp-block-coblocks-gallery-carousel {

    & .flickity-button {
        background-color: transparent !important;
        border: 2px solid var(--go--color--white) !important;
        border-radius: 0;

        &::after {
            background-image: url(../../../dist/images/design-styles/modern/carousel-arrow.svg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 100%;
            content: "";
            display: inline-block;
            height: 8px;
            left: 13px;
            position: absolute;
            top: calc(50% - 4px);
            transition: transform 200ms cubic-bezier(0.7, 0, 0.3, 1);
            width: 48px;
        }

        &.next,
        &.previous {
            height: 37px;
            width: 48px;

            &::after {
                height: 8px;
                width: 48px;
            }
        }

        &.previous {
            left: 18px;

            @include media(medium) {
                left: 25px;
            }

            &::after {
                background-color: transparent;
                left: 13px;
                -webkit-mask-image: unset;
                right: auto;
                transform: rotate(180deg);
            }

            &:active::after,
            &:focus::after,
            &:hover::after {
                transform: translateX(-29px) rotate(180deg);
            }
        }

        &.next {
            right: 18px;

            @include media(medium) {
                right: 25px;
            }

            &::after {
                background-color: transparent;
                left: auto;
                -webkit-mask-image: unset;
                right: 13px;
            }

            &:active::after,
            &:focus::after,
            &:hover::after {
                transform: translateX(29px);
            }
        }
    }

}

.has-aligned-cells {

    & .flickity-button::before {
        background: var(--go-button--color--background, var(--go--color--primary));
        bottom: 0;
        content: "";
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        z-index: -1;
    }
}