/*
 * SVG Line Draw widget.
 *
 * The drawing is a dash as long as the line itself, moved from one end to the
 * other. How long each line actually is can only be measured in the browser, so
 * the handler writes that in; until it does, the shape simply sits there drawn.
 */
.ekl-line-draw-wrap {
    @apply flex w-full;
}

.ekl-line-draw {
    --ekl-draw-duration: 2000ms;
    --ekl-draw-delay: 0ms;

    @apply block;

    svg {
        @apply block h-auto w-full overflow-visible;
    }
}

/* Only once the handler has measured the lines does any of this apply. */
.ekl-line-draw.is-ready svg * {
    stroke-dasharray: var(--ekl-draw-length);
    stroke-dashoffset: var(--ekl-draw-length);
    transition: stroke-dashoffset var(--ekl-draw-duration) ease-in-out var(--ekl-draw-delay);
}

.ekl-line-draw.is-ready.is-drawn svg * {
    stroke-dashoffset: 0;
}

.ekl-line-draw.is-ready[data-trigger='hover']:hover svg * {
    stroke-dashoffset: 0;
}

.ekl-line-draw.is-ready[data-trigger='loop'] svg * {
    @apply transition-none;

    animation: ekl-line-draw var(--ekl-draw-duration) ease-in-out var(--ekl-draw-delay) infinite;
}

@keyframes ekl-line-draw {
    0% { stroke-dashoffset: var(--ekl-draw-length); }
    70%, 100% { stroke-dashoffset: 0; }
}

/* A reader who asked for less motion is given the finished drawing. */
@media (prefers-reduced-motion: reduce) {
    .ekl-line-draw.is-ready svg * {
        @apply transition-none;

        stroke-dasharray: none;
        stroke-dashoffset: 0;
        animation: none;
    }
}