@use '../../../utils' as *;
/*----------------------------------------*/
/*   3.3 button Style
/*----------------------------------------*/

.upd-btn-black {
    &-radius{
        font-size: 16px;
        font-weight: 600;
        padding: 4px 22px;
        padding-right: 4px;
        border-radius: 38px;
        display: inline-block;
        letter-spacing: -0.01em;
        color: var(--tp-common-white);
        background-color:#21212d;
        gap: 10px;
        font-family: var(--tp-ff-inter);
        & span{
            position: relative;
            z-index: 1;
            overflow: hidden;
            display: inline-block;
            & span{
                &.text-1{
                    position: relative;
                    display: block;
                    transition: 0.3s;
                    transform: translateY(-1px);
                }
                &.text-2{
                    position: absolute;
                    top: 100%;
                    display: block;
                    transition: 0.3s;
                    transform: translateY(-1px);
                }
            }
        }
        & i{
            height: 38px;
            width: 38px;
            line-height: 38px;
            border-radius: 50%;
            margin-left: 2px;
            text-align: center;
            display: inline-block;
            background-color: var(--tp-common-white);
            & span{
                position: relative;
                overflow: hidden;
                width: 14px;
                height: 14px;
                display: inline-flex;
            }
            & svg{
                transform: translateY(-2px);
                position: absolute;
                bottom: -1px;
                left: 1px;
                transition: all 0.2s ease-out;
                &:last-child{
                    left: -12px;
                    bottom: -12px;
                    transform: translate(0, 0);
                    opacity: 0;
                }
            }
        }
        &:hover{
            color: var(--tp-common-white);
            & span{
                & span{
                    &.text-1{
                        -webkit-transform: translateY(-150%);
                        transform: translateY(-150%);
                    }
                    &.text-2{
                        top: 50%;
                        -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
                    }
                }
            }
            & i{
                & svg:first-child{
                    transform: translate(16px, -16px);
                }
                & svg:last-child{
                    opacity: 1;
                    visibility: visible;
                    transform: translate(13px, -13px);
                }
            }
        }
        &:focus{
            color: var(--tp-common-white);
        }
        &.btn-blue-bg{
            padding: 5px 22px;
            padding-right: 5px;
            background-color: var(--tp-common-blue-2);
            border: 1px solid rgba(238, 241, 234, 0.04);
            & i {
                height: 48px;
                width: 48px;
                line-height: 50px;
            }
            &.btn-border{
                background-color: transparent;
                color: var(--tp-common-black-10);
                border: 1px solid rgba(33, 33, 45, 0.1);
                & i{
                    line-height: 52px;
                    color: var(--tp-common-white);
                    background-color: var(--tp-common-black-10);
                    & span{
                        width: 19px;
                        height: 15px;
                        margin-left: 2px;
                        display: inline-block;
                    }
                }
            }
        }
        &.btn-blur{
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.1);
            border: 1.50px solid rgba(255, 255, 255, 0.3);
        }
    }
    &-square{
        line-height: 1;
        border-radius: 10px;
        color: var(--tp-common-white);
        background-color: var(--tp-common-black);
        & span{
            position: relative;
            z-index: 1;
            overflow: hidden;
            display: inline-block;
            & span{
                &.text-1{
                    position: relative;
                    display: block;
                    transition: 0.3s;
                }
                &.text-2{
                    position: absolute;
                    top: 100%;
                    display: block;
                    transition: 0.3s;
                }
            }
        }
        & i{
            position: relative;
            overflow: hidden;
            width: 14px;
            height: 14px;
            display: inline-flex;
            margin-left: 7px;
            & svg{
                transform: translateY(-2px);
                position: absolute;
                bottom: -1px;
                left: 1px;
                transition: all 0.2s ease-out;
                &:last-child{
                    left: -12px;
                    bottom: -12px;
                    transform: translate(0, 0);
                    opacity: 0;
                }
            }
        }
        &:hover{
            color: var(--tp-common-white);
            & span{
                & span{
                    &.text-1{
                        -webkit-transform: translateY(-150%);
                        transform: translateY(-150%);
                    }
                    &.text-2{
                        top: 50%;
                        -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
                    }
                }
            }
            & i{
                & svg:first-child{
                    transform: translate(16px, -16px);
                }
                & svg:last-child{
                    opacity: 1;
                    visibility: visible;
                    transform: translate(13px, -13px);
                }
            }
        }
        &:focus{
            color: var(--tp-common-white);
        }
    }
}
.upd-btn-black-radius {
    &.btn-style-ai{
        &:hover{
            & i{
                & svg{
                    &:first-child{
                      transform: translateX(16px);  
                    }
                    &:last-child{
                        transform: translateX(13px);
                    }
                }
            }
        }
        & i {
            & svg{
                transform: none;
                &:last-child{
                    bottom: 0;
                }
            }
        }
        &.btn-blue-bg {
            & i{
                height: 38px;
                width: 38px;
                line-height: 38px;
            }
        }
    }
}

.upd-btn-black-square{
    &.cnt-btn-style{
        gap: 8px;
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0;
        align-items: center;
        display: inline-flex;
        padding: 9px 9px 9px 22px;
        text-transform: uppercase;
        line-height: 1;
        font-family: var(--tp-ff-clash-medium);
        &:hover {
            & i {
                & svg{
                    &:first-child {
                        transform: translate(20px, -21px);
                    }
                    &:last-child {
                        transform: translate(9px, -9px);
                    }
                }
            }
        }
        & i{
            width: 30px;
            height: 30px;
            text-align: center;
            margin-left: 0px;
            border-radius: 4px;
            display: inline-grid;
            place-content: center;
            background-color: var(--tp-common-red);
            & svg{
                left: 9px;
                bottom: 6px;
                &:last-child {
                    left: 0;
                    bottom: 0;
                    color: var(--tp-common-white);
                }
            }
        }
        &.style-2{
            padding: 9px 22px 9px 9px;
        }
        &.btn-transparent{
            background-color: transparent;
            color: var(--tp-common-red);
            border: 1px solid var(--tp-common-red);
            & i{
                & svg{
                    color: var(--tp-common-white);
                }
            }
        }
    }
}

.upd-btn-white-border {
    font-size: 15px;
    font-weight: 500;
    color: #0E0F11;
    display: inline-block;
    border-radius: 6px;
    padding: 6px 20px 6px;
    backdrop-filter: blur(10px);
    letter-spacing: -0.15px;
    background-color: var(--tp-common-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--tp-ff-inter);
    &:hover{
        color: var(--tp-common-white);
        background-color: transparent;
        border-color: var(--tp-common-white);
    }
    & span{
        @extend %svg-1;
        margin-left: 4px;
        display: inline-block;
    }
}
.upd-btn-gradient {
    display: flex;
    position: relative;
    align-items: center;
    overflow: hidden;
    font-weight: 600;
    font-size: 17px;
    line-height: 1;
    z-index: 1;
    margin: 1px;
    transition: 0.4s;
    border-radius: 8px;
    padding: 13px 24px;
    position: relative;
    display: inline-block;
    letter-spacing: -0.01em;
    color: var(--tp-common-white);
    color: var(--tp-common-black);
    background: var(--tp-theme-primary);
    font-family: var(--tp-ff-inter);
}
.animated-border-box {
    position: relative;
    overflow: hidden;
    z-index: 0;
    line-height: 0;
    border-radius: 8px;
    display: inline-block;
    transition: 0.4s;
    &:hover{
        transform: scale(1.1);
    }
}