/* Lógica para los bordes animados con gradientes cónicos */

/* Registramos la variable --angle para poder animarla con keyframes */
@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Contenedor base para los elementos con borde animado */
[class*="animated-border-"] {
    z-index: 0;
    position: relative;
    --border-padding: 0px;
    --border-radius: 0px;
}

/* Creamos el efecto de borde usando pseudo-elementos ::before y ::after */
[class*="animated-border-"]::after,
[class*="animated-border-"]::before {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;

    padding: var(--border-padding);
    border-radius: var(--border-radius);

    /* Gradiente circular que gira usando la variable --angle */
    background: conic-gradient(from var(--angle) in hsl shorter hue, var(--accent-700), var(--accent-600), var(--accent-500), var(--accent-400), var(--accent-300), var(--accent-200), var(--accent-100), var(--accent-700), var(--accent-600), var(--accent-500), var(--accent-400), var(--accent-300), var(--accent-200), var(--accent-100), var(--accent-700));
    animation: spinning-border 4s linear infinite;

    /* Usamos máscaras para mostrar solo el borde y no el fondo del gradiente */
    --mask: linear-gradient(#000000 0 0);
    -webkit-mask: var(--mask) content-box, var(--mask);
    mask: var(--mask) content-box, var(--mask);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* El pseudo-elemento ::after se usa para el efecto de brillo (glow) */
[class*="animated-border-"]::after {
    filter: blur(1rem);
}

/* Configuraciones de grosor y redondeado */
.animated-border-2 {
    --border-padding: 2px;
    --border-radius: 24px;
}

.animated-border-5 {
    --border-padding: 5px;
    --border-radius: 24px;
}

/* Variantes para bordes en un solo lado */
.animated-border-top-2 {
    --border-padding: 2px 0 0 0;
}

.animated-border-top-5 {
    --border-padding: 5px 0 0 0;
}

.animated-border-right-2 {
    --border-padding: 0 2px 0 0;
}

.animated-border-right-5 {
    --border-padding: 0 5px 0 0;
}

.animated-border-bottom-2 {
    --border-padding: 0 0 2px 0;
}

.animated-border-bottom-5 {
    --border-padding: 0 0 5px 0;
}

.animated-border-left-2 {
    --border-padding: 0 0 0 2px;
}

.animated-border-left-5 {
    --border-padding: 0 0 0 5px;
}

/* Animación que hace rotar el ángulo del gradiente */
@keyframes spinning-border {
    from {
        --angle: 0deg;
    }

    to {
        --angle: 360deg;
    }
}