/**
 * Button Animation Styles
 * Animations for Bricks Builder Button element
 */

:root {
    --btn-anim-blue: rgb(0, 64, 193);
    --btn-anim-white: #ffffff;
    --btn-anim-font-size: 16px;
    --btn-anim-font-weight: 500;
    --btn-anim-border-radius: 999px;
    --btn-anim-padding-top: 12px;
    --btn-anim-padding-right: 24px;
    --btn-anim-padding-bottom: 12px;
    --btn-anim-padding-left: 24px;
    --btn-anim-line-height: 1.5;
}

/* ============================================
   Button 1 - Arrow Animation
   ============================================ */
/* ============================================
   Button 1 - Arrow Animation
   ============================================ */
.bricks-button.btn-anim-1 {
    background: transparent !important;
    border-radius: var(--btn-anim-border-radius);
    justify-content: center;
    align-items: center;
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    text-decoration: none;
    display: flex;
    position: relative;
    width: fit-content;
    cursor: pointer;
    padding: 0 !important;
    gap: 0;
    overflow: hidden;
    

    .btn-anim-1__wrap {
        aspect-ratio: 1;
        color: currentColor;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        width: 3.5em;
        height: 3.5em;
        display: flex;
        position: relative;
        flex-shrink: 0;

        &.btn-anim-1__wrap--right {
            z-index: 2;
            transform-origin: 100%;
            position: absolute;
            right: 0;
        }

        &.btn-anim-1__wrap--left {
            transform-origin: 0%;
            transform: scale(0);
        }
    }

    .btn-anim-1__icon {
        width: 40%;
    }

    .btn-anim-1__content {
        border-radius: var(--btn-anim-border-radius);
        background-color: var(--btn-anim-white);
        justify-content: center;
        align-items: center;
        height: 3.5em;
        padding-left: var(--btn-anim-padding-left);
        padding-right: var(--btn-anim-padding-right);
        display: flex;
        position: relative;
        transform: translateX(-3.5em);
        color: currentColor;
        white-space: nowrap;
    }

    .btn-anim-1__text {
        font-size: inherit;
        line-height: var(--btn-anim-line-height);
        font-weight: inherit;
    }

    .btn-anim-1__arrow {
        aspect-ratio: 1;
        border-radius: var(--btn-anim-border-radius);
        color: currentColor;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        background-color: var(--btn-anim-white);
        border-style: none;
    }
}

/* ============================================
   Button 2 - Icon Slide Animation
   ============================================ */
/* ============================================
   Button 2 - Icon Slide Animation
   ============================================ */
.bricks-button.btn-anim-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    padding: var(--btn-anim-padding-top) var(--btn-anim-padding-right) var(--btn-anim-padding-bottom) var(--btn-anim-padding-left);
    padding-right: 0.75em;
    gap: 0.75em;
    border-radius: var(--btn-anim-border-radius);
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    color: var(--btn-anim-blue);
    background: transparent;
    border: 1px solid transparent;
    z-index: 1;

    &:before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(--btn-anim-border-radius);
        background-color: var(--btn-anim-white);
        transition: transform 0.4s cubic-bezier(0.17, 0.67, 0.3, 1.33);
        transform: scale(1);
    }

    .btn-anim-2__text {
        position: relative;
        z-index: 22;
        transition: transform 0.4s cubic-bezier(0.17, 0.67, 0.3, 1.33);
    }

    .btn-anim-2__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        width: 2.5em;
        height: 2.5em;
        border-radius: 50%;
        background-color: var(--btn-anim-blue);
        color: var(--btn-anim-white);
        transition: transform 0.4s cubic-bezier(0.17, 0.67, 0.3, 1.33);

        svg {
            width: 1em;
            height: 1em;
            fill: none;
            stroke: currentColor;
            stroke-width: 2px;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        &.btn-anim-2__icon--hover {
            position: absolute;
            left: 0.5em;
            top: 50%;
            transform: translateY(-50%) scale(0);
        }

        &.btn-anim-2__icon--default {
            transform: scale(1);
        }
    }

    @media (hover: hover) {
        &:hover {
            &:before {
                transform: scale(1.05);
            }

            .btn-anim-2__text {
                transform: translateX(2em);
            }

            .btn-anim-2__icon.btn-anim-2__icon--default {
                transform: scale(0);
            }

            .btn-anim-2__icon.btn-anim-2__icon--hover {
                transform: translateY(-50%) scale(1);
            }
        }
    }
}

/* ============================================
   Button 3 - Clip Path Animation
   ============================================ */
/* ============================================
   Button 3 - Clip Path Animation
   ============================================ */
.bricks-button.btn-anim-3 {
    display: inline-flex;
    position: relative;
    border-radius: var(--btn-anim-border-radius);
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    overflow: hidden;
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    cursor: pointer;
    background: transparent;
    padding: 0;
    border: none;

    .btn-anim-3__stack {
        position: relative;
    }

    .btn-anim-3__state {
        position: relative;
        display: flex;
        align-items: center;
        padding: var(--btn-anim-padding-top) var(--btn-anim-padding-right) var(--btn-anim-padding-bottom) var(--btn-anim-padding-left);

        &.btn-anim-3__state--primary {
            background-color: var(--btn-anim-white);
        }

        &.btn-anim-3__state--secondary {
            background-color: var(--btn-anim-blue);
            color: var(--btn-anim-white);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            clip-path: inset(0 0 0 100% round var(--btn-anim-border-radius));
            transition: clip-path 0.75s cubic-bezier(0.19, 1, 0.22, 1);
            height: 100%;
        }
    }

    .btn-anim-3__text {
        font-size: inherit;
        line-height: var(--btn-anim-line-height);
        font-weight: var(--btn-anim-font-weight);
    }

    &:hover .btn-anim-3__state.btn-anim-3__state--secondary {
        clip-path: inset(0 0 0 0 round var(--btn-anim-border-radius));
    }
}

/* ============================================
   Button 4 - Circle Expand Animation
   ============================================ */
/* ============================================
   Button 4 - Circle Expand Animation
   ============================================ */
.bricks-button.btn-anim-4 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9375em;
    cursor: pointer;
    background-color: var(--btn-anim-white);
    border-radius: var(--btn-anim-border-radius);
    padding: var(--btn-anim-padding-top) var(--btn-anim-padding-right) var(--btn-anim-padding-bottom) var(--btn-anim-padding-left);
    overflow: hidden;
    text-decoration: none;
    color: var(--btn-anim-blue);
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    border: none;

    .btn-anim-4__round {
        width: 0.5em;
        height: 0.5em;
        border-radius: 50%;
        background-color: var(--btn-anim-blue);
        transition: all 0.3s ease-out;
    }

    .btn-anim-4__text {
        margin: 0;
        font-size: var(--btn-anim-font-size);
        transition: all 0.3s ease-out;
        z-index: 2;
        line-height: var(--btn-anim-line-height);
    }

    .btn-anim-4__arrow {
        position: absolute;
        left: 100%;
        transition: transform 0.3s ease-out;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &:hover {
        .btn-anim-4__round {
            transform: scale(40);
            background-color: var(--btn-anim-blue);
        }

        .btn-anim-4__text {
            color: var(--btn-anim-white);
            transform: translateX(-1.5625em);
        }

        .btn-anim-4__arrow {
            transform: translateX(-2.5em);
        }
    }
}

/* ============================================
   Button 5 - Vertical Slide Animation
   ============================================ */
/* ============================================
   Button 5 - Vertical Slide Animation
   ============================================ */
.bricks-button.btn-anim-5 {
    padding: var(--btn-anim-padding-top) var(--btn-anim-padding-right) var(--btn-anim-padding-bottom) var(--btn-anim-padding-left);
    background-color: var(--btn-anim-white);
    border-radius: var(--btn-anim-border-radius);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    color: var(--btn-anim-blue);
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    border: none;

    .btn-anim-5__text {
        &.btn-anim-5__text--primary {
            top: 0;
            position: relative;
            transition: top 0.4s cubic-bezier(0.33, 1, 0.68, 1);
            margin: 0;
            line-height: var(--btn-anim-line-height);
        }

        &.btn-anim-5__text--secondary {
            position: absolute;
            top: 110%;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: top 0.4s cubic-bezier(0.33, 1, 0.68, 1);

            span {
                color: var(--btn-anim-white);
                position: absolute;
                margin: 0;
                z-index: 2;
                line-height: var(--btn-anim-line-height);
            }
        }
    }

    .btn-anim-5__bg {
        background-color: var(--btn-anim-blue);
        width: 60%;
        height: 100%;
        border-radius: 50%;
        transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
        position: absolute;
        top: 0;
        left: 20%;
    }

    &:hover {
        .btn-anim-5__text--primary {
            top: -2.5em;
        }

        .btn-anim-5__text--secondary {
            top: 0;
        }

        .btn-anim-5__bg {
            width: 100%;
            height: 100%;
            border-radius: var(--btn-anim-border-radius);
            top: 0;
            left: 0;
        }
    }
}

/* ============================================
   Button 6 - Rolling Text with Scale
   ============================================ */
/* ============================================
   Button 6 - Rolling Text with Scale
   ============================================ */
.bricks-button.btn-anim-6 {
    display: inline-block;
    border-radius: var(--btn-anim-border-radius);
    background-color: var(--btn-anim-white);
    text-decoration: none;
    overflow: hidden;
    color: var(--btn-anim-blue);
    border: none;
    cursor: pointer;
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    padding: 0;

    .btn-anim-6__content {
        padding: var(--btn-anim-padding-top) var(--btn-anim-padding-right) var(--btn-anim-padding-bottom) var(--btn-anim-padding-left);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--btn-anim-white);
        border-radius: var(--btn-anim-border-radius);
    }

    .btn-anim-6__text {
        font-size: var(--btn-anim-font-size);
        font-weight: var(--btn-anim-font-weight);
        --line-height-abs: 24px;
        display: block;
        overflow: hidden;
        height: var(--line-height-abs);
        line-height: var(--line-height-abs);
        color: inherit;
        white-space: normal;

        span {
            display: inline-block;
            backface-visibility: hidden;
            text-shadow: 0 var(--line-height-abs) 0 currentColor;
        }
    }
}

/* ============================================
   Button 7 - Rolling Text with Icon
   ============================================ */
/* ============================================
   Button 7 - Rolling Text with Icon
   ============================================ */
.bricks-button.btn-anim-7 {
    display: inline-flex;
    align-items: center;
    border-radius: var(--btn-anim-border-radius);
    background-color: var(--btn-anim-white);
    text-decoration: none;
    overflow: hidden;
    padding: 0px;
    cursor: pointer;
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    border: none;

    .btn-anim-7__content {
        display: flex;
        align-items: center;
        background-color: var(--btn-anim-white);
        border-radius: var(--btn-anim-border-radius);
        padding: 0px 0px 0px 1.7em;
    }

    .btn-anim-7__icon {
        width: 3.5em;
        height: 3.5em;
        background-color: var(--btn-anim-blue);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--btn-anim-white);
        margin-left: 1.25em;
        svg{
            fill: var(--btn-anim-white);
        }
    }

    .btn-anim-7__text {
        font-size: var(--btn-anim-font-size);
        font-weight: var(--btn-anim-font-weight);
        --line-height-abs: 27px;
        display: block;
        overflow: hidden;
        height: var(--line-height-abs);
        line-height: var(--line-height-abs);
        white-space: normal;

        span {
            display: inline-block;
            backface-visibility: hidden;
            text-shadow: 0 var(--line-height-abs) 0 currentColor;
        }
    }
}

/* ============================================
   Button 8 - Neumorphism Animation
   ============================================ */
/* ============================================
   Button 8 - Neumorphism Animation
   ============================================ */
.bricks-button.btn-anim-8 {
    border: 0.125em solid transparent;
    background-color: var(--btn-anim-white);
    box-shadow: 0.0625em 0.0625em 0.0625em rgba(255, 255, 255, 0.6);
    border-radius: var(--btn-anim-border-radius);
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    padding: 0;
    cursor: pointer;
    --background-color: var(--btn-anim-white);
    --background-color-active: color-mix(in srgb, var(--btn-anim-white), var(--btn-anim-blue) 10%);
    --light-shadow-color: var(--btn-anim-white);
    --dark-shadow-color: color-mix(in srgb, var(--btn-anim-white), var(--btn-anim-blue) 20%);

    .btn-anim-8__content {
        display: inline-block;
        position: relative;
        border-radius: var(--btn-anim-border-radius);
        padding: var(--btn-anim-padding-top) var(--btn-anim-padding-right) var(--btn-anim-padding-bottom) var(--btn-anim-padding-left);
        background-color: var(--background-color);
        box-shadow:
            inset 0.0625em 0.0625em 0.0625em var(--light-shadow-color),
            inset -0.0625em -0.0625em 0.0625em var(--dark-shadow-color),
            0.125em 0.125em 0.25em rgba(0, 0, 0, 0.2);
        text-align: center;
        transition-property: transform, background-color, box-shadow;
        transition-duration: 0.2s;
        transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1);
        width: 100%;
        height: 100%;
    }

    &:active .btn-anim-8__content {
        transform: scale(0.98);
        background-color: var(--background-color-active);
        box-shadow:
            inset 0 0 0.25em rgba(0, 0, 0, 0.2),
            inset 0.0625em 0.0625em 0.0625em transparent,
            inset -0.0625em -0.0625em 0.0625em transparent,
            0.125em 0.125em 0.25em transparent;
    }

    &:hover .btn-anim-8__content {
        transform: scale(1.02);
        box-shadow:
            inset 0.0625em 0.0625em 0.0625em var(--light-shadow-color),
            inset -0.0625em -0.0625em 0.0625em var(--dark-shadow-color),
            0.1875em 0.1875em 0.375em rgba(0, 0, 0, 0.2);
    }
}

/* ============================================
   Button 9 - 3D Press Effect
   ============================================ */
/* ============================================
   Button 9 - 3D Press Effect
   ============================================ */
.bricks-button.btn-anim-9 {
    border-radius: var(--btn-anim-border-radius);
    width: fit-content;
    display: flex;
    padding: var(--btn-anim-padding-top) var(--btn-anim-padding-right) var(--btn-anim-padding-bottom) var(--btn-anim-padding-left);
    justify-content: center;
    align-items: center;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    border: 1.5px solid black;
    background-color: var(--btn-anim-white);
  box-shadow:
    inset 0 -0.4em 0 0 hsl(from var(--color-primary) h s calc(l - 10) ),
    inset 0 0.35em 0 0 hsl(from var(--color-primary) h s calc(l + 5) ),
        0 0.1em 0.1em 0 hsla(from var(--color-primary) h s calc(l - 525) / 0.5);
         transition-property: transform, background-color, color;
    transition-duration: 200ms;
    transition-timing-function: ease;
    color: var(--btn-anim-blue);
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;

    &:hover {
        transform: scale(1.05);
        background-color: var(--btn-anim-blue);
        color: var(--btn-anim-white);
    }
}

/* ============================================
   Button 10 - Text Transform Animation
   ============================================ */
/* ============================================
   Button 10 - Text Transform Animation
   ============================================ */
.bricks-button.btn-anim-10 {
    background-color: var(--btn-anim-white);
    color: var(--btn-anim-blue);
    padding: var(--btn-anim-padding-top) var(--btn-anim-padding-right) var(--btn-anim-padding-bottom) var(--btn-anim-padding-left);
    border-radius: var(--btn-anim-border-radius);
    text-decoration: none;
    cursor: pointer;
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    display: flex;
    align-items: center;
    border: none;

    &,
    &>span {
        transition: scale 0.65s cubic-bezier(0.25, 1, 0.33, 1) !important;
        position: relative;
    }

    &:hover {
        scale: 1.03;

        &>span {
            scale: 0.9806;

            &>span {
                transform: translateY(-100%);

                &:after {
                    transform: translateY(-20%);
                }
            }
        }

        .btn-anim-10__icon {
            transform: translateX(0.625em);
        }
    }

    &>span {
        overflow: hidden;
        margin-right: 0.25em;

        &>span {
            transition: transform 0.55s cubic-bezier(0.25, 1, 0.33, 1) !important;
            display: block;

            &:after {
                bottom: -120%;
                transition: transform 0.55s cubic-bezier(0.25, 1, 0.33, 1);
                content: attr(data-text);
                left: 0;
                position: absolute;
            }
        }
    }

    .btn-anim-10__icon {
        display: inline-block;
        margin-left: 0.5em;
        transition: transform 0.55s cubic-bezier(0.25, 1, 0.33, 1);

        svg {
            display: block;
        }
    }
}

/* ============================================
   Button 11 - Text Reveal with Background
   ============================================ */
/* ============================================
   Button 11 - Text Reveal with Background
   ============================================ */
.bricks-button.btn-anim-11 {
    --btn-11-line-height: 1.2em;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    border-radius: var(--btn-anim-border-radius);
    padding: var(--btn-anim-padding-top) var(--btn-anim-padding-right) var(--btn-anim-padding-bottom) var(--btn-anim-padding-left);
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--btn-anim-blue);
    cursor: pointer;
    background-color: var(--btn-anim-white);
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    border: none;

    .btn-anim-11__bg {
        position: absolute;
        top: 100%;
        left: -25%;
        width: 150%;
        height: 200%;
        background-color: var(--btn-anim-blue);
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
    }

    .btn-anim-11__content {
        position: relative;
        z-index: 10;
        display: block;
        height: var(--btn-11-line-height);
        line-height: var(--btn-11-line-height);
        overflow: hidden;
        width: 100%;
        min-width: 100px;
        /* zapewnienie minimalej szerokości */
    }

    .btn-anim-11__text {
        display: block;
        white-space: nowrap;
        line-height: var(--btn-11-line-height);
        height: var(--btn-11-line-height);
        will-change: transform;
        color: inherit;

        &.btn-anim-11__text--secondary {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            text-align: center;
        }
    }
}

/* ============================================
   Button 12 - Mouse Follow Flair
   ============================================ */
 
.bricks-button.btn-anim-12 {
    --color-surface-white: var(--btn-anim-white);
    --color-just-black: var(--btn-anim-blue);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

    align-items: center;
    background: var(--color-surface-white);
    border: none;
    border-radius: var(--btn-anim-border-radius);
    color: var(--color-just-black);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--btn-anim-font-size);
    font-weight: var(--btn-anim-font-weight);
    gap: 0.363636em;
    justify-content: center;
    line-height: var(--btn-anim-line-height);
    overflow: hidden;
    padding: var(--btn-anim-padding-top) var(--btn-anim-padding-right) var(--btn-anim-padding-bottom) var(--btn-anim-padding-left);
    position: relative;
    text-decoration: none;
    word-break: break-word;

    &:after {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        border: 0.125rem solid var(--color-surface-white);
        border-radius: var(--btn-anim-border-radius);
        content: "";
        pointer-events: none;
    }

    @media (hover: hover) {
        &:hover {
            color: var(--color-surface-white);
            text-decoration: none;
        }
    }

    .btn-anim-12__text {
        position: relative;
        text-align: center;
        transition: color 50ms var(--ease-in-out-quart);
        z-index: 1;
        line-height: var(--btn-anim-line-height);
    }

    &:hover .btn-anim-12__text {
        transition: color 0.15s var(--ease-in-out-quart);
        color: var(--color-surface-white);
    }

    .btn-anim-12__flair {
        bottom: 0;
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
        transform: scale(0);
        transform-origin: 0 0;
        will-change: transform;

        &:before {
            aspect-ratio: 1/1;
            background-color: var(--color-just-black);
            border-radius: 50%;
            content: "";
            display: block;
            left: 0;
            pointer-events: none;
            position: absolute;
            top: 0;
            transform: translate(-50%, -50%);
            width: 170%;
        }
    }
}