.Sui-ButtonBase {
    --sui-btn-color-ripple: currentColor;
    @apply relative cursor-pointer
    outline-none no-underline;

    /**
    EFFECT
    */
    &__Ripple{
        @apply block absolute left-0 top-0 w-full h-full z-0 scale-0 opacity-20 -translate-x-1/2 -translate-y-1/2 blur-0 transition-opacity ease-in-out duration-500;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        background-image: radial-gradient(circle at center,
            transparent 10%,
            var(--sui-btn-color-ripple) 14%,
            var(--sui-btn-color-ripple) 20%,
            transparent 30%
        );
        /*animation-name: Sui-RippleEffect;*/
        animation-duration: 0.3s;
        /*animation-iteration-count: infinite;*/
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
        &.in{
            animation-name: Sui-RippleEffect;
        }
    }
    &.has-ripple{
        @apply overflow-hidden;
    }
}

.Sui-ButtonBase__Ripple:focus-visible{
    animation-name: Sui-RippleEffectFocus;
    animation-iteration-count: infinite;
    left: 50%;
    top: 50%;
}

@keyframes Sui-RippleEffect{
    0%{
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.2;
    }
    /*80%{
       transform: translate(-50%, -50%) scale(5);
      opacity: 1;
    }*/
    100%{
        transform: translate(-50%, -50%) scale(10);
        opacity: 0;
    }
}
@keyframes Sui-RippleEffectFocus{
    0%{
        transform: translate(-50%, -50%) scale(5);
        opacity: 1;
    }
    50%{
        transform: translate(-50%, -50%) scale(10);
        opacity: 1;
    }
    100%{
        transform: translate(-50%, -50%) scale(5);
        opacity: 1;
    }
}