.apd-lottie {
    --apd-lottie-color: #000000;
    --apd-lottie-stroke: 100;
    display: flex;
    justify-content: center;
}

.apd-lottie .apd-lottie-artwork {
    display: block;
    height: auto;
    max-width: none;
    flex-shrink: 0;
    color: var(--apd-lottie-color);
    overflow: visible;
}

.apd-lottie--text-circle .apd-lottie-artwork { width: 120px; }
.apd-lottie--circle-arrow .apd-lottie-artwork { width: 80px; }
.apd-lottie--chevrons .apd-lottie-artwork { width: 60px; }

.apd-lottie .apd-lottie-stroke {
    stroke: currentColor;
    stroke-width: calc(var(--apd-stroke-base) * var(--apd-lottie-stroke) * 0.01px);
}

/* Source transforms use the SVG coordinate origin, not each shape's bounding box. */
.apd-lottie .apd-lottie-artwork g {
    transform-origin: 0 0;
}

.apd-lottie .apd-lottie-indicator {
    --apd-lottie-color: #000000;
    width: 24px;
    height: 54px;
    border: 1.5px solid var(--apd-lottie-color);
    border-radius: 999px;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
}

.apd-lottie-indicator .apd-lottie-line {
    position: absolute;
    display: block;
    width: 1.5px;
    height: 14px;
    left: 50%;
    bottom: 7px;
    transform: translateX(-50%);
    background: var(--apd-lottie-color);
    border-radius: 999px;
    animation: apd-lottie-scroll-indicator 1.8s ease-in-out infinite;
}

@keyframes apd-lottie-scroll-indicator {
    0% {
        transform: translateX(-50%) translateY(-8px);
        opacity: 0;
    }
    30%, 70% {
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(2px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apd-lottie-indicator .apd-lottie-line {
        animation: none;
        opacity: 1;
    }
}