/* Default vars */
.angie-animated-border-gradient-spin,
.angie-animated-border-dash-move {
    --angie-ab-color-1: #ff0000;
    --angie-ab-color-2: #0000ff;
    --angie-ab-width: 4px;
    position: relative;
    z-index: 1;
}

/* Gradient Spin */
.angie-animated-border-gradient-spin::before {
    content: "";
    position: absolute;
    inset: calc( -1 * var(--angie-ab-width) );
    border-radius: inherit;
    padding: var(--angie-ab-width);
    background: conic-gradient(from 0deg, var(--angie-ab-color-1), var(--angie-ab-color-2), var(--angie-ab-color-1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: angie-spin 3s linear infinite;
}

@keyframes angie-spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Moving Dashes */
.angie-animated-border-dash-move::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: var(--angie-ab-width) dashed var(--angie-ab-color-1);
    background: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--angie-ab-color-2) 10px, var(--angie-ab-color-2) 20px);
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: angie-dash 5s linear infinite;
}

@keyframes angie-dash {
    to {
        background-position: 50px 50px;
    }
}