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

.rainbow-hover {
    position: relative;
    border: 3px solid transparent;
    background-clip: padding-box;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.rainbow-hover::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(
        90deg,
        #ff6b6b,
        #ffb347,
        #ffef96,
        #98fb98,
        #87ceeb,
        #d8bfd8,
        #ff6b6b,
        #ff6b6b
    );
    background-size: 300% 100%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.rainbow-hover:hover::before {
    opacity: 1;
    animation: rainbow 4s linear infinite;
    transition: opacity 0.3s ease;
}

.rainbow-hover:active::before {
    opacity: 0 !important;
    animation: none !important;
    transition: none !important;
}

.rainbow-hover:not(:hover)::before {
    opacity: 0 !important;
    animation: none !important;
    transition: none !important;
}