[data-btn-effect] .ba-btn {
    --btn-anim-speed: calc(var(--buttons-animation-mobile-speed, 0.7) * 1s);
    --btn-anim-delay: calc(var(--buttons-animation-mobile-delay, 0) * 1s);
}


.ba-btn .ba-fx,
.ba-btn .ba-fx__layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}


.ba-btn .ba-outline-svg,
.ba-btn .blob-btn__inner { display: none; }

[data-btn-effect="1"] .ba-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition:
        color var(--btn-anim-speed) var(--btn-anim-delay),
        background-color var(--btn-anim-speed) var(--btn-anim-delay),
        border-color var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="1"] .ba-btn .ba-fx__layer:nth-child(1) {
    inset: 0 100% 0 0;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    transition: inset var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="1"] .ba-btn:hover { background: transparent !important; }
[data-btn-effect="1"] .ba-btn:hover .ba-fx__layer:nth-child(1) { inset: 0; }

[data-btn-effect="2"] .ba-btn { position: relative; }
[data-btn-effect="2"] .ba-btn .ba-outline-svg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
[data-btn-effect="2"] .ba-btn .ba-outline-svg__rect {
    fill: none;
    stroke: var(--buttons-animation-mobile-color, var(--borderHover));
    stroke-width: 2;
    stroke-dasharray: 150 480;
    stroke-dashoffset: 150;
    transition: stroke-dashoffset var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="2"] .ba-btn:hover .ba-outline-svg__rect {
    stroke-dashoffset: -480;
}


[data-btn-effect="3"] .ba-btn {
    transition: none !important;
}
[data-btn-effect="3"] .ba-btn:hover {
    color: var(--btnColor) !important;
    background: var(--btnBackground) !important;
    border-color: var(--btnBorder) !important;
}

[data-btn-effect="4"] .ba-btn {
    --blob-anim-speed: calc(var(--buttons-animation-mobile-speed, 0.7) * 1s);
    --blob-anim-delay: calc(var(--buttons-animation-mobile-delay, 0) * 1s);
    position: relative;
    z-index: 1;
    overflow: visible;
    background: transparent !important;
    transition: color var(--blob-anim-speed) var(--blob-anim-delay);
}
[data-btn-effect="4"] .ba-btn:hover {
    background: transparent !important;
    color: var(--colorHover) !important;
}
[data-btn-effect="4"] .ba-btn .blob-btn__inner {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    background: var(--btnBackground);
}
[data-btn-effect="4"] .ba-btn .blob-btn__blobs {
    position: relative;
    display: block;
    height: 100%;
    filter: url('#hero-blob-goo');
}
[data-btn-effect="4"] .ba-btn .blob-btn__blob {
    position: absolute;
    top: 2px;
    width: 25%;
    height: 100%;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    border-radius: 100%;
    transform: translate3d(0, 150%, 0) scale(1.7);
    transition: transform var(--blob-anim-speed);
}
@supports (filter: url('#hero-blob-goo')) {
    [data-btn-effect="4"] .ba-btn .blob-btn__blob {
        transform: translate3d(0, 150%, 0) scale(1.4);
    }
}
[data-btn-effect="4"] .ba-btn .blob-btn__blob:nth-child(1) { left: 0%;  transition-delay: var(--blob-anim-delay); }
[data-btn-effect="4"] .ba-btn .blob-btn__blob:nth-child(2) { left: 30%; transition-delay: calc(var(--blob-anim-delay) + 0.08s); }
[data-btn-effect="4"] .ba-btn .blob-btn__blob:nth-child(3) { left: 60%; transition-delay: calc(var(--blob-anim-delay) + 0.16s); }
[data-btn-effect="4"] .ba-btn .blob-btn__blob:nth-child(4) { left: 90%; transition-delay: calc(var(--blob-anim-delay) + 0.24s); }
[data-btn-effect="4"] .ba-btn:hover .blob-btn__blob {
    transform: translateZ(0) scale(1.7);
}
@supports (filter: url('#hero-blob-goo')) {
    [data-btn-effect="4"] .ba-btn:hover .blob-btn__blob {
        transform: translateZ(0) scale(1.4);
    }
}

[data-btn-effect="5"] .ba-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
[data-btn-effect="5"] .ba-btn .ba-fx { inset: 0; overflow: visible; }
[data-btn-effect="5"] .ba-btn .ba-fx__layer {
    top: 50%;
    inset-inline: auto;
    width: 20px;
    height: 20px;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    border-radius: 50%;
    opacity: 0;
}
[data-btn-effect="5"] .ba-btn .ba-fx__layer:nth-child(1) {
    left: -20px;
    transform: translate(-50%, -50%);
}
[data-btn-effect="5"] .ba-btn .ba-fx__layer:nth-child(2) {
    right: -20px;
    transform: translate(50%, -50%);
}
[data-btn-effect="5"] .ba-btn:hover .ba-fx__layer:nth-child(1) {
    animation: ba-crisscross-left calc(var(--btn-anim-speed) * 4) var(--btn-anim-delay) both;
}
[data-btn-effect="5"] .ba-btn:hover .ba-fx__layer:nth-child(2) {
    animation: ba-crisscross-right calc(var(--btn-anim-speed) * 4) var(--btn-anim-delay) both;
}
@keyframes ba-crisscross-left {
    0%   { left: -20px;             transform: translate(-50%, -50%) scale(1);  opacity: 1; }
    50%  { left: 50%;               transform: translate(-50%, -50%) scale(20); opacity: 1; }
    100% { left: calc(100% + 20px); transform: translate(-50%, -50%) scale(1);  opacity: 1; }
}
@keyframes ba-crisscross-right {
    0%   { right: -20px;             transform: translate(50%, -50%) scale(1);  opacity: 1; }
    50%  { right: 50%;               transform: translate(50%, -50%) scale(20); opacity: 1; }
    100% { right: calc(100% + 20px); transform: translate(50%, -50%) scale(1);  opacity: 1; }
}

[data-btn-effect="6"] .ba-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="6"] .ba-btn .ba-fx__layer:nth-child(1) {
    inset: 0 0 100% 0;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    transition: inset var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="6"] .ba-btn:hover { background: transparent !important; }
[data-btn-effect="6"] .ba-btn:hover .ba-fx__layer:nth-child(1) { inset: 0; }

[data-btn-effect="7"] .ba-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="7"] .ba-btn .ba-fx__layer:nth-child(1) {
    inset: 100% 0 0 0;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    transition: inset var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="7"] .ba-btn:hover { background: transparent !important; }
[data-btn-effect="7"] .ba-btn:hover .ba-fx__layer:nth-child(1) { inset: 0; }

[data-btn-effect="8"] .ba-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="8"] .ba-btn .ba-fx__layer:nth-child(1) {
    inset: 0 0 0 100%;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    transition: inset var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="8"] .ba-btn:hover { background: transparent !important; }
[data-btn-effect="8"] .ba-btn:hover .ba-fx__layer:nth-child(1) { inset: 0; }

[data-btn-effect="9"] .ba-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="9"] .ba-btn .ba-fx__layer:nth-child(1) {
    width: 140%;
    height: 100%;
    inset: 0 auto auto 0;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    transform: translateX(-110%) skewX(-22deg);
    transform-origin: top left;
    transition: transform var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="9"] .ba-btn:hover { background: transparent !important; }
[data-btn-effect="9"] .ba-btn:hover .ba-fx__layer:nth-child(1) {
    transform: translateX(-10%) skewX(-22deg);
}

[data-btn-effect="10"] .ba-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="10"] .ba-btn .ba-fx__layer:nth-child(1) {
    top: 50%;
    left: 50%;
    inset-inline: auto;
    inset-block: auto;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    transform: translate(-50%, -50%);
    transition:
        width var(--btn-anim-speed) var(--btn-anim-delay),
        height var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="10"] .ba-btn:hover { background: transparent !important; }
[data-btn-effect="10"] .ba-btn:hover .ba-fx__layer:nth-child(1) {
    width: 260%;
    height: 260%;
}

[data-btn-effect="11"] .ba-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="11"] .ba-btn .ba-fx__layer {
    height: 50%;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    transition: transform var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="11"] .ba-btn .ba-fx__layer:nth-child(1) {
    inset: 0 0 auto 0;
    transform: translateY(-100%);
}
[data-btn-effect="11"] .ba-btn .ba-fx__layer:nth-child(2) {
    inset: auto 0 0 0;
    transform: translateY(100%);
}
[data-btn-effect="11"] .ba-btn:hover { background: transparent !important; }
[data-btn-effect="11"] .ba-btn:hover .ba-fx__layer { transform: translateY(0); }

[data-btn-effect="12"] .ba-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="12"] .ba-btn .ba-fx__layer {
    width: 50%;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    transition: transform var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="12"] .ba-btn .ba-fx__layer:nth-child(1) {
    inset: 0 auto 0 0;
    transform: translateX(-100%);
}
[data-btn-effect="12"] .ba-btn .ba-fx__layer:nth-child(2) {
    inset: 0 0 0 auto;
    transform: translateX(100%);
}
[data-btn-effect="12"] .ba-btn:hover { background: transparent !important; }
[data-btn-effect="12"] .ba-btn:hover .ba-fx__layer { transform: translateX(0); }

[data-btn-effect="13"] .ba-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="13"] .ba-btn .ba-fx__layer:nth-child(1) {
    inset: auto 0 0 0;
    height: 55%;
    background: var(--buttons-animation-mobile-color, var(--backgroundHover));
    transform: translateY(100%);
    transition: transform var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="13"] .ba-btn:hover .ba-fx__layer:nth-child(1) {
    transform: translateY(0);
}

[data-btn-effect="14"] .ba-btn {
    position: relative;
    transition:
        box-shadow var(--btn-anim-speed) var(--btn-anim-delay),
        transform var(--btn-anim-speed) var(--btn-anim-delay);
}
[data-btn-effect="14"] .ba-btn:hover {
    animation: ba-glow-pulse calc(var(--btn-anim-speed) * 3) ease-in-out var(--btn-anim-delay) infinite;
}
@keyframes ba-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 0   var(--buttons-animation-mobile-color, var(--backgroundHover)),
            0 0 0 0   var(--buttons-animation-mobile-color, var(--backgroundHover));
    }
    50% {
        box-shadow:
            0 0 0 6px   color-mix(in srgb, var(--buttons-animation-mobile-color, var(--backgroundHover)) 35%, transparent),
            0 0 14px 4px color-mix(in srgb, var(--buttons-animation-mobile-color, var(--backgroundHover)) 25%, transparent);
    }
}