/* Primary Button Styles */
.ui-btn-1 {
    cursor: pointer;
    justify-content: flex-start;
    padding: 0;
    position: relative;
    text-align: left;
    width: auto
}

.cta_btn {
    --background: linear-gradient(268.18deg, #96aeae, #0a291b), linear-gradient(-0.38deg, #f0f0f0, #fff);
    --background-hover: #0A291B;
    --blob-color: #fff;
    --blob-border-radius: 6px;
    --blob-size: 32px;
    --border: 0 none;
    --color: #fff;
    --color-hover: #fff;
    --font-size: 16px;
    --font-weight: 500;
    --line-height: 1em;
    --height: 48px;
    --grid-column-gap: 24px;
    --grid-row-gap: 24px;
    --icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23000029' fill-rule='evenodd' d='M2.54.406h-.657V1.72h5.469L.597 8.474l-.464.464.929.928.464-.464L8.28 2.647v5.47h1.313V.406H2.539Z' clip-rule='evenodd'/%3E%3C/svg%3E");
    --icon-size: 10px;
    --overflow: hidden;
    --padding-block: 8px;
    --padding-inline: 24px;
    --padding-inline-arrow-end: 7px;
    background-color: transparent;
    border: 0;
    display: inline-flex;
    font-size: 1rem;
    font-size: var(--font-size);
    font-weight: 500;
    font-weight: var(--font-weight);
    line-height: 1.2em;
    grid-column-gap: 24px;
    grid-column-gap: var(--grid-column-gap);
    grid-row-gap: 24px;
    grid-row-gap: var(--grid-row-gap);
    height: 48px;
    height: var(--height);
    line-height: 1em;
    line-height: var(--line-height);
    min-width: -moz-min-content;
    min-width: min-content;
    overflow: hidden;
    overflow: var(--overflow);
    pointer-events: auto;
    -webkit-text-decoration: none;
    text-decoration: none;
    [data-button-anim-target] {
        transition-duration: .525s;
        transition-property: bottom,transform;
        transition-timing-function: cubic-bezier(.625,.05,0,1)
    }

    &:has(.btn_icon) .btn_inner {
        padding-right: var(--padding-inline-arrow-end)
    }

    .btn_inner {
        align-items: center;
        background: var(--background);
        border: var(--border);
        border-radius: 12px;
        color: #fff;
        display: flex;
        grid-column-gap: 12px;
        justify-content: flex-start;
        overflow: inherit;
        padding: var(--padding-block) var(--padding-inline);
        position: relative;
        width: 100%
    }

    .btn_mask {
        flex: 1 0 auto;
        min-width: -moz-max-content;
        min-width: max-content;
        overflow: hidden;
        text-align: center
    }

    .btn_icon,.btn_mask {
        align-items: center;
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 1
    }

    .btn_icon {
        flex: 0 0 var(--blob-size);
        height: var(--blob-size);
        min-width: var(--blob-size);
        width: var(--blob-size)
    }

    .icon_bg {
        background-color: var(--blob-color);
        border-radius: var(--blob-border-radius);
        height: 100%;
        position: absolute;
        width: 100%
    }

    .icon_wrap {
        border-radius: 14px;
        color: #fff;
        justify-content: flex-end;
        overflow: hidden;
        position: relative;
        width: 100%
    }

    .icon_list,.icon_wrap {
        align-items: center;
        display: flex;
        height: 100%
    }

    .icon_list {
        flex: none;
        justify-content: flex-start
    }

    .icon_arrow {
        background: transparent var(--icon) no-repeat center /var(--icon-size);
        display: inline-flex;
        flex: none;
        height: var(--blob-size);
        overflow: hidden;
        position: relative;
        transition: transform .525s cubic-bezier(.625,.05,0,1);
        width: var(--blob-size);
        &:first-child {
            transform: translateY(200%)
        }

        &:nth-child(2) {
            transform: translateY(100%)
        }

        &:nth-child(3) {
            transform: translate(0)
        }
    }

    .btn_bg {
        background-color: var(--background-hover);
        bottom: -15px;
        height: 100%;
        left: -10%;
        position: absolute;
        transform: translateY(175%) rotate(15deg);
        width: 120%;
        z-index: 0;
    }

    .btn_text {
        --text-duplicate-distance: 1.5em;
        line-height: 1.2em;
        text-shadow: 0 1.5em var(--color-hover);
        text-shadow: 0 var(--text-duplicate-distance) var(--color-hover);
    }
    @media (hover: hover) and (pointer:fine) {
        &:hover {
            .btn_text {
                transform:translateY(calc(var(--text-duplicate-distance)*-1))
            }

            .icon_bg {
                transform: rotate(90deg)
            }

            .icon_arrow {
                &:first-child {
                    transform: translate(200%)
                }

                &:nth-child(2) {
                    transform: translate(200%,-100%)
                }

                &:nth-child(3) {
                    transform: translate(200%,-200%)
                }
            }

            .btn_bg {
                transform: translateY(-15px) rotate(0deg)
            }
        }
    }
}