/* Animated Drawing — reusable SVG stroke-draw block */
.animatedDrawing {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.animatedDrawing--align-left {
    justify-content: flex-start;
}

.animatedDrawing--align-center {
    justify-content: center;
}

.animatedDrawing--align-right {
    justify-content: flex-end;
}

.animatedDrawing--max-full .animatedDrawing__canvas {
    width: 100%;
    max-width: 100%;
}

.animatedDrawing--max-large .animatedDrawing__canvas {
    width: 100%;
    max-width: 36rem;
}

.animatedDrawing--max-medium .animatedDrawing__canvas {
    width: 100%;
    max-width: 24rem;
}

.animatedDrawing--max-small .animatedDrawing__canvas {
    width: 100%;
    max-width: 16rem;
}

.animatedDrawing__canvas {
    line-height: 0;
}

.animatedDrawing__canvas svg,
.animatedDrawing__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.animatedDrawing__canvas path,
.animatedDrawing__canvas line,
.animatedDrawing__canvas polyline,
.animatedDrawing__canvas polygon,
.animatedDrawing__canvas circle,
.animatedDrawing__canvas ellipse,
.animatedDrawing__canvas rect {
    fill: none;
    stroke: var(--ad-stroke, currentColor);
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    .animatedDrawing__canvas path,
    .animatedDrawing__canvas line,
    .animatedDrawing__canvas polyline,
    .animatedDrawing__canvas polygon,
    .animatedDrawing__canvas circle,
    .animatedDrawing__canvas ellipse,
    .animatedDrawing__canvas rect {
        transition: none !important;
        stroke-dashoffset: 0 !important;
    }
}