/* SLU Button — Gradient Glow */

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

@keyframes slu-gg-spin {
    to { --slu-gg-angle: 360deg; }
}

/* ── Wrapper ──────────────────────────────────────────────────────────── */
.slu-gg-wrap {
    display: flex;
    width: 100%;
}
.slu-gg-wrap.is-stretch .slu-gg-outer {
    width: 100%;
}

/* ── Outer container — holds the glow ────────────────────────────────── */
.slu-gg-outer {
    --gg-text-hover:         var(--gg-text);
    --gg-speed-hover:        1.5s;
    --gg-hover-duration:     0.25s;
    --gg-hover-brightness:   1.15;
    --gg-glow-hover-opacity: 0.9;

    position: relative;
    display: inline-flex;
    border-radius: 8px;
    isolation: isolate;
}
.slu-gg-outer.is-stretch {
    width: 100%;
}

/* ── Blurred outer glow (behind the button) ───────────────────────────── */
.slu-gg-outer::before {
    content: '';
    position: absolute;
    inset: calc(var(--gg-glow-size) * -0.5);
    border-radius: calc(8px + var(--gg-glow-size));
    background: conic-gradient(
        from var(--slu-gg-angle),
        var(--gg-color-1, #6366f1),
        var(--gg-color-2, #8b5cf6),
        var(--gg-color-3, #06b6d4),
        var(--gg-color-2, #8b5cf6),
        var(--gg-color-1, #6366f1)
    );
    filter: blur(var(--gg-glow-size, 12px));
    opacity: 0;
    z-index: 0;
    animation: slu-gg-spin var(--gg-speed) linear infinite;
    transition: opacity var(--gg-hover-duration, 0.25s) ease,
                filter  var(--gg-hover-duration, 0.25s) ease;
    pointer-events: none;
}

/* ── Button — rotating gradient IS the background ────────────────────── */
.slu-gg-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    z-index: 1;

    padding: 14px 32px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;

    color: var(--gg-text, inherit) !important;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;

    /* Rotating gradient background */
    background: conic-gradient(
        from var(--slu-gg-angle),
        var(--gg-color-1, #6366f1),
        var(--gg-color-2, #8b5cf6),
        var(--gg-color-3, #06b6d4),
        var(--gg-color-2, #8b5cf6),
        var(--gg-color-1, #6366f1)
    );
    animation: slu-gg-spin var(--gg-speed) linear infinite;

    transition: color var(--gg-hover-duration) ease,
                filter var(--gg-hover-duration) ease;
}

/* ── Hover ────────────────────────────────────────────────────────────── */
.slu-gg-btn:hover {
    color: var(--gg-text-hover) !important;
    filter: brightness(var(--gg-hover-brightness, 1.15));
    text-decoration: none;
}

.slu-gg-outer:has(.slu-gg-btn:hover)::before {
    opacity: var(--gg-glow-hover-opacity, calc(var(--gg-glow-opacity) * 1.8));
    filter: blur(calc(var(--gg-glow-size) * 0.6));
}

/* ── Content ──────────────────────────────────────────────────────────── */
.slu-gg-text,
.slu-gg-icon {
    position: relative;
    z-index: 2;
}

.slu-gg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.slu-gg-icon i,
.slu-gg-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}