.nrb-button-wrap {
    display: flex;
}

.nrb-button {
    --nrb-c1: #ff004c;
    --nrb-c2: #ff7a00;
    --nrb-c3: #00cfff;
    --nrb-c4: #ff00d4;
    --nrb-border-width: 1.5px;
    --nrb-glow-opacity: 0.75;
    --nrb-glow-blur: 8px;
    --nrb-border-brightness: 100%;
    --nrb-hover-glow-opacity: 1;
    --nrb-hover-glow-blur: 10px;
    --nrb-hover-border-brightness: 120%;
    --nrb-rainbow-speed: 3s;
    --nrb-transition-duration: 0.35s;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    transition:
        background-color var(--nrb-transition-duration) ease,
        color var(--nrb-transition-duration) ease,
        border-color var(--nrb-transition-duration) ease,
        box-shadow var(--nrb-transition-duration) ease,
        transform 0.2s ease,
        filter var(--nrb-transition-duration) ease;
}

.nrb-button > * {
    position: relative;
    z-index: 3;
}

.nrb-button::before,
.nrb-button::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--nrb-c1),
        var(--nrb-c2),
        var(--nrb-c3),
        var(--nrb-c4),
        var(--nrb-c1)
    );
    background-size: 300% 100%;
    transition:
        opacity var(--nrb-transition-duration) ease,
        filter var(--nrb-transition-duration) ease,
        transform var(--nrb-transition-duration) ease;
}

.nrb-button::before {
    inset: calc(var(--nrb-border-width) * -2);
    padding: calc(var(--nrb-border-width) * 2);
    z-index: 0;
    opacity: var(--nrb-glow-opacity);
    filter: blur(var(--nrb-glow-blur));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.nrb-button::after {
    inset: 0;
    padding: var(--nrb-border-width);
    z-index: 1;
    filter: brightness(var(--nrb-border-brightness));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.nrb-button:not(.nrb-no-animate)::before,
.nrb-button:not(.nrb-no-animate)::after {
    animation: nrb-rainbow-trace var(--nrb-rainbow-speed) linear infinite;
}

.nrb-button.nrb-hover-only::before,
.nrb-button.nrb-hover-only::after {
    opacity: 0;
}

.nrb-button.nrb-hover-only:hover::before,
.nrb-button.nrb-hover-only:focus-visible::before {
    opacity: var(--nrb-hover-glow-opacity);
}

.nrb-button.nrb-hover-only:hover::after,
.nrb-button.nrb-hover-only:focus-visible::after {
    opacity: 1;
    filter: brightness(var(--nrb-hover-border-brightness));
}

.nrb-button:hover::before,
.nrb-button:focus-visible::before {
    opacity: var(--nrb-hover-glow-opacity);
    filter: blur(var(--nrb-hover-glow-blur));
}

.nrb-button:hover::after,
.nrb-button:focus-visible::after {
    filter: brightness(var(--nrb-hover-border-brightness));
}

.nrb-button:active {
    transform: translateY(1px) scale(0.99);
}

.nrb-button:focus-visible {
    outline: none;
}

@keyframes nrb-rainbow-trace {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 300% 50%;
    }
}