.component-cta {
    --color: var(--primary-800);
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;

    padding-left: .88rem;

    line-height: .75rem;

    border-radius: 1.25rem;
    border: .088rem solid var(--color);
    background-color: transparent;
    color: var(--color);
}

.component-cta--secondary {
    --color: var(--secondary);
}

.component-cta--prev {
    direction: rtl;
    padding-right: .88rem;
    padding-left: 0;
}

.component-cta--prev svg {
    transform: rotateZ(180deg);
}

.component-cta svg {
    display: inline-block;

    width: 2.5rem;
    height: 2.5rem;

    overflow: hidden;
}

.component-cta circle {
    fill: var(--color);
}

.component-cta path {
    transform-origin: center;
    fill: var(--backgroundColor, white);
}

.component-cta:hover path {
    animation: arrowToAndFro calc(var(--transition-time) * 5) infinite;
}

@keyframes arrowToAndFro {
    10% {
        transform: translateX(-.25rem);
    }
    20% {
        transform: translateX(-.25rem);
    }
    60% {
        transform: translateX(2em);
        opacity: 1;
    }
    61% {
        transform: translateX(2em);
        opacity: 0;
    }
    62% {
        transform: translateX(-2em);
        opacity: 0;
    }
    63% {
        transform: translateX(-2em);
        opacity: 1;
    }
}