.snap-opus-svg-draw {
    --snap-svg-stroke: #176b61;
    --snap-svg-fill: currentColor;
    position: relative;
    width: 100%;
}

.snap-opus-svg-draw > .snap-opus-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.snap-opus-svg-draw__canvas {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 160px;
    overflow: hidden;
    background: #f4f7f6;
    box-sizing: border-box;
}

.snap-opus-svg-draw__canvas svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: visible;
}

.snap-opus-svg-draw[data-stroke="custom"] .snap-opus-svg-draw__path {
    stroke: var(--snap-svg-stroke);
}

.snap-opus-svg-draw[data-stroke="custom"] .snap-opus-svg-draw__path {
    stroke-width: var(--snap-svg-stroke-width, 8);
}

.snap-opus-svg-draw[data-linecap="round"] .snap-opus-svg-draw__path { stroke-linecap: round; }
.snap-opus-svg-draw[data-linecap="square"] .snap-opus-svg-draw__path { stroke-linecap: square; }
.snap-opus-svg-draw[data-linecap="butt"] .snap-opus-svg-draw__path { stroke-linecap: butt; }
.snap-opus-svg-draw[data-fill="none"] .snap-opus-svg-draw__path { fill: none; }
.snap-opus-svg-draw[data-fill="fade"] .snap-opus-svg-draw__path { fill: var(--snap-svg-fill); }

/* Static SVG is the default. JavaScript opts into the hidden start state only
   after every measurable path has been prepared. */
.snap-opus-svg-draw[data-snap-svg-ready] .snap-opus-svg-draw__path[data-snap-svg-measured] {
    stroke-dasharray: var(--snap-svg-length) var(--snap-svg-length);
    stroke-dashoffset: var(--snap-svg-offset);
    will-change: stroke-dashoffset, fill-opacity;
}

.snap-opus-svg-draw[data-snap-svg-ready][data-mode="entry"] .snap-opus-svg-draw__path[data-snap-svg-measured] {
    transition-property: stroke-dashoffset, fill-opacity;
    transition-duration: var(--snap-svg-duration), 260ms;
    transition-delay: var(--snap-svg-delay), var(--snap-svg-fill-delay);
    transition-timing-function: cubic-bezier(.22, .74, .18, 1), ease-out;
}

.snap-opus-svg-draw[data-snap-svg-ready][data-fill="fade"] .snap-opus-svg-draw__path[data-snap-svg-measured] {
    fill-opacity: 0;
}

.snap-opus-svg-draw[data-snap-svg-ready].is-drawn .snap-opus-svg-draw__path[data-snap-svg-measured],
.snap-opus-svg-draw[data-snap-svg-ready][data-mode="scroll"] .snap-opus-svg-draw__path[data-snap-svg-measured] {
    stroke-dashoffset: var(--snap-svg-current-offset, 0);
}

.snap-opus-svg-draw[data-snap-svg-ready].is-drawn[data-fill="fade"] .snap-opus-svg-draw__path[data-snap-svg-measured],
.snap-opus-svg-draw[data-snap-svg-ready][data-mode="scroll"].is-fill-visible .snap-opus-svg-draw__path[data-snap-svg-measured] {
    fill-opacity: 1;
}

.snap-opus-svg-draw-empty {
    padding: 20px 22px;
    border: 1px dashed #aaaeb4;
    border-radius: 12px;
    color: #555a61;
    background: #f7f7f8;
    font-size: 14px;
    line-height: 1.5;
}

.snap-opus-svg-draw__fallback {
    margin: 12px 0 0;
    color: currentColor;
    font-size: 1rem;
    line-height: 1.55;
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
    .snap-opus-svg-draw[data-snap-svg-ready] .snap-opus-svg-draw__path[data-snap-svg-measured] {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        fill-opacity: 1;
        transition: none;
        will-change: auto;
    }
}