.animated-border {
    position: relative;
    background-color: var(--bulma-body-background-color);
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.animated-border {
  position: relative;
  border-radius: 12px;
  background: transparent;
}

.animated-border::before,
.animated-border::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--angle),
        transparent 50%,
        var(--bulma-primary)
    );
    animation: spin 3s linear infinite;
    z-index: 0;
    padding: 2px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.animated-border::before {
    filter: blur(6px);
    opacity: 0.45;
}

.animated-border > * {
    position: relative;
    z-index: 1;
}

@keyframes spin {
    from { --angle: 0deg; }
    to   { --angle: 360deg; }
}

.progress::-webkit-progress-value {
    transition: inline-size 1s ease;
}

.is-loading-custom::after {
    animation-duration: 1.5s !important;
    width: 100px !important;
    height: 100px !important;
    top: 0 !important;
    inset-inline-end: 0 !important;
    border: 2px solid white !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
}