.call-to-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 22px 15px;
    margin: 0;
    font-family: var(--font-display);
    font-weight: bold;
    font-size: var(--text-base);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: var(--white);
    background-color: transparent;
    border: 2px solid var(--white);
    box-shadow: none;
    transition:
        color var(--transition-appendix),
        background-color var(--transition-appendix),
        box-shadow var(--transition-appendix);
}

.call-to-action .icon {
    position: relative;
    display: block;
    width: 16px;
    aspect-ratio: 1;
    flex-shrink: 0;
}

.call-to-action .icon::before,
.call-to-action .icon::after {
    position: absolute;
    inset: 0;
    display: block;
    content: '';
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: opacity var(--transition-appendix);
}

.call-to-action .icon::before {
    background-image: url('/includes/public/assets/shared/arrow-white-sm.svg');
    opacity: 1;
}

.call-to-action .icon::after {
    background-image: url('/includes/public/assets/shared/arrow-blue-sm.svg');
    opacity: 0;
}

/*----- inside mobile nav -----*/

.menu-container .call-to-action {
    padding: 12px 15px;
}

/*----- microsite (black) theme -----*/

.theme-microsite .call-to-action .icon::after {
    background-image: url('/includes/public/assets/shared/arrow-black-sm.svg');
}

.theme-microsite .menu-container .call-to-action {
    background-color: var(--black);
    border-color: var(--black);
}

/*----- lavender theme -----*/

.theme-lavender .call-to-action .icon::after {
    background-image: url('/includes/public/assets/shared/arrow-lavender-sm.svg');
}

/*----- media queries -----*/

@media (hover: hover) {
    .call-to-action:hover {
        color: var(--blue-mid-dark);
        background-color: var(--white);
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    }

    .call-to-action:hover .icon::before {
        opacity: 0;
    }
    
    .call-to-action:hover .icon::after {
        opacity: 1;
    }

    /* microsite (black) theme */

    .theme-microsite .call-to-action:hover {
        color: var(--black);
    }

    .theme-microsite .menu-container .call-to-action:hover {
        background-color: transparent;
    }

    /* lavender theme */

    .theme-lavender .call-to-action:hover {
        color: var(--lavender-dark);
    }
}

@media (min-width: 64em) {
    .call-to-action,
    .menu-container .call-to-action {
        padding: 25px 20px;
        font-size: var(--text-lg);
    }

    .call-to-action .icon {
        width: 18px;
    }

    /* microsite (black) theme */

    .theme-microsite .menu-container .call-to-action {
        color: var(--black);
        background-color: transparent;
    }

    .theme-microsite .menu-container .call-to-action .icon::before {
        background-image: url('/includes/public/assets/shared/arrow-black-sm.svg');
    }
    
    .theme-microsite .menu-container .call-to-action .icon::after {
        background-image: url('/includes/public/assets/shared/arrow-white-sm.svg');
    }

    @media (hover: hover) {
        .theme-microsite .menu-container .call-to-action:hover {
            color: var(--white);
            background-color: var(--black);
        }
    }
}