/* ==========================================================
   Xolve Motion Button v1.0
   Author : Xolve Digital
========================================================== */

:root{

    --xolve-primary:#1D4690;
    --xolve-primary-light:#2B61C2;
    --xolve-white:#F7F8FA;

}

/* ==========================================================
   Wrapper
========================================================== */

.xolve-btn{

    display:inline-block;

}

/* ==========================================================
   Elementor Button
   (Elementor controls size, padding, border etc.)
========================================================== */

.xolve-btn .elementor-button{

    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    isolation:isolate;

    cursor:pointer;

    text-decoration:none;

    color:var(--xolve-primary);

    user-select:none;

    backface-visibility:hidden;

    -webkit-font-smoothing:antialiased;

}

/* ==========================================================
   Liquid Blob
========================================================== */

.xolve-btn__blob{

    position:absolute;

    left:0;
    top:0;

    /* Capsule instead of perfect circle */
    width:70px;
    height:46px;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        var(--xolve-primary) 0%,
        var(--xolve-primary-light) 100%
    );

    pointer-events:none;

    transform:
        translate(-50%,-50%)
        scale(0);

    transform-origin:center;

    will-change:
        transform,
        left,
        top;

    z-index:0;

}

/* ==========================================================
   Content
========================================================== */

.xolve-btn__content{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:.65em;

    z-index:2;

}

/* ==========================================================
   Text
========================================================== */

.xolve-btn__text{

    color:inherit;

    line-height:1;

    white-space:nowrap;

}

/* ==========================================================
   Arrow
========================================================== */

.xolve-btn__icon{

    width:1em;
    height:1em;

    flex-shrink:0;

    color:inherit;

    background:currentColor;

    -webkit-mask:url("../svg/arrow.svg") center/contain no-repeat;
            mask:url("../svg/arrow.svg") center/contain no-repeat;

    transform-origin:center;

    will-change:
        transform;

}

/* ==========================================================
   Focus
========================================================== */

.xolve-btn .elementor-button:focus-visible{

    outline:2px solid var(--xolve-primary);

    outline-offset:4px;

}

/* ==========================================================
   Mobile
========================================================== */

@media (hover:none){

    .xolve-btn__icon{

        transform:none !important;

    }

}