.brxe-visual-button {
    & .visual-button {
        --linear-background: linear-gradient(90deg, #2C3BBC 0%, #57EBF7 10%, #FFF 20%, #FAE452 30%, #DD2E33 40%, #2C3BBC 50%, #57EBF7 60%, #FFF 70%, #FAE452 80%, #DD2E33 90%, #2C3BBC 100%);

        display: flex;
        align-items: stretch;
        width: fit-content;
		


        &:hover .visual-button__text {
			animation-play-state: running;
            &:after {
				background-position: 0%;
            }
        }

        &:hover .visual-button__icon {
						animation-play-state: running;
            &:after {
                background-position: 0%;
            }
			
			& .visual-button__arrow {
				color: var(--icon-color-hover); 
			}
        }



        & .visual-button__text {
            --mask: url(/wp-content/themes/visual-pro-led/elements/resources/button-shape.svg);
            background: var(--linear-background);
            background-size: 200% 100%;
            position: relative;
            padding: 14px 50px 12px 34px;
            mask-image: var(--mask);
            animation: vbb 3s linear infinite;
            animation-play-state: paused;


            &:after {
                content: "";
                width: calc(100% - 4px);
                height: calc(100% - 4px);
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 2px;
                background: linear-gradient(90deg, #0000 50%, var(--mass-color) 50%);
				background-size: 200% auto;
				background-position: 100%;
                z-index: 10;
                mask-image: var(--mask);
                transition: .3s;
            }

            /*after*/


            & .visual-button__text-wrapper {
                position: relative;
                z-index: 20;
				color: var(--text-color);

            }


        }

        & .visual-button__icon {
            --mask: url(/wp-content/themes/visual-pro-led/elements/resources/arrow-shape.svg);
            mask-image: var(--mask);

            mask-size: 100% 100%;
            background: var(--linear-background);
            background-size: 200% 100%;
			position: relative;
            aspect-ratio: 1;
            width: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: vbb 3s linear infinite;
            animation-play-state: paused;
			

            &:after {
				content: "";
                width: calc(100% - 4px);
                height: calc(100% - 4px);
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 2px;
				width: calc(100% - 4px);
				background: linear-gradient(90deg, var(--mass-color) 50%, #0000 50%);
				background-size: 200% auto;
				background-position: 100%;
                z-index: 10;
                mask-image: var(--mask);
                transition: .3s;
			}
			
			& .visual-button__arrow {
				  width: 13px;
				  height: auto;
				  position: relative;
				  z-index: 20;
				  transition: .3s;
				  color: var(--icon-color);
			}

        }
    }
}



@keyframes vbb {
    from {
        background-position: 0%;
    }

    to {
        background-position: 100%;
    }
}