.animated-border {
    --animated-border-size: var(--margin-xs);
    --animated-border-position-max: calc(100% - var(--animated-border-size));
    --animated-border-duration: 10;

    position: relative;
}

.animated-border-stroke {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.animated-border img {
    position: relative;
    padding: var(--animated-border-size);
    z-index: 1;
}

.animated-border-stroke > * {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    width: 100%;
    height: var(--animated-border-size);
    animation-name: border-stroke;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.animated-border-stroke .play {
    animation-play-state: running;
}

.animated-border-stroke .pause {
    animation-play-state: paused;
}

.animated-border-stroke > *:nth-child(2) {
    animation-delay: calc(var(--animated-border-duration) / 6 * -1s);
    z-index: 1;
}
.animated-border-stroke > *:nth-child(3) {
    animation-delay: calc(var(--animated-border-duration) / 6 * 2 * -1s);
}
.animated-border-stroke > *:nth-child(4) {
    animation-delay: calc(var(--animated-border-duration) / 6 * 3 * -1s);
}
.animated-border-stroke > *:nth-child(5) {
    animation-delay: calc(var(--animated-border-duration) / 6 * 4 * -1s);
    z-index: 1;
}
.animated-border-stroke > *:nth-child(6) {
    animation-delay: calc(var(--animated-border-duration) / 6 * 5 * -1s);
}
.animated-border-stroke > *:nth-child(7) {
    animation-delay: calc(var(--animated-border-duration) / 6 * -1s);
}

@keyframes border-stroke {
    0% {
        width: 100%;
        height: var(--animated-border-size);
        top: 0;
        left: 0;
    }
    25% {
        width: var(--animated-border-size);
        height: 100%;
        top: 0;
        left: var(--animated-border-position-max);
    }
    50% {
        width: 100%;
        height: var(--animated-border-size);
        top: var(--animated-border-position-max);
        left: 0;
    }
    75% {
        width: var(--animated-border-size);
        height: 100%;
        top: 0;
        left: 0;
    }
    100% {
        width: 100%;
        height: var(--animated-border-size);
        top: 0;
        left: 0;
    }
}