.tf-btn-default {
    @include flex(center, start);
    gap: 7px;
    font-size: 13px;
    line-height: 25px;
    font-weight: 500;
    color: var(--Secondary);
}

.tf-btn {
    @include flex(center, center);
    width: max-content;
    font-size: 16px;
    font-weight: 600;
    @include prefix(transition, all 300ms ease-in-out, webkit);
    overflow: hidden;
    border-radius: 40px;
    position: relative;
    &.btn-color-primary {
        background-color: var(--Primary);
        &:hover {
        background-color: transparent !important;

            &::after {
                background-color: var(--Secondary);
            }
        }
    }
    &.btn-color-secondary {
        background-color: var(--Secondary);
    }
    &.btn-color-white {
        background-color: var(--White);
    }
    &.has-boder {
        border: 2px solid var(--Primary);
    }
    &.boder-8 {
        border-radius: 8px;
    }
    &.pd-23 {
        padding: 0 23px;
    }
    &.pd-26 {
        padding: 0 26px;
    }
    &.pd-28 {
        padding: 0 28px;
    }
    &.pd-40 {
        padding: 0 40px;
    }
    &.text-color-white {
        > span {
            color: var(--White) !important;
        }
        &:hover {
            > span {
                color: var(--Primary) !important;
            }
        }
    }

    &.style-default {
        position: relative;
        height: 52px;
        gap: 6px;
        &::after {
            content: "";
            width: 100%;
            height: 100%;
            background: var(--Primary);
            position: absolute;
            bottom: -100%;
            left: 0;
            border-radius: 50%;
            z-index: 1;
            @include transition3();
        }
        > span {
            display: inline-flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            z-index: 2;
            gap: 6px;
            color: var(--Primary);
            @include transition3();
        }
        i {
            font-size: 19px;
        }
        &:hover {
            background-color: var(--Primary);
            > span {
                color: var(--White);
            }
            i {
                color: var(--White);
            }

            &::after {
                bottom: 0;
                border-radius: 0;
            }
        }
    }
}

.tf-btn-link {
    position: relative;
    @include d-flex();
    gap: 6px;
    align-items: center;
    color: var(--Primary) !important;
    max-width: max-content;
    span {
        margin: 0;
        position: relative;
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        transition: 0.3s linear;
        &::after {
            position: absolute;
            content: "";
            width: 0;
            left: 0;
            bottom: 0px;
            background: var(--Primary);
            height: 1px;
            @include transition3();
        }
    }
    i {
        color: var(--Primary);
        transition: 0.2s;
        position: relative;
        @include transition3();
        transition-delay: 0.2s;
        font-size: 18px;
    }
    &:hover {
        span {
            &::after {
                width: 100%;
            }
        }
        i {
            transform: translateX(4px);
        }
    }
}
