.btn__default{

    
    --size: calc(var(--h-block) - 8px);
    font-size: var(--fs-normal);
    font-weight: var(--fw-normal);
    height: var(--size);
    padding-right: 1.5ch;

    position: relative;


    display: flex;
    align-items: center;
    gap: 0ch;
    // padding-right: 0.5ch;
    color: var(--color-accent);
    font-weight: var(--fw-medium);
    text-decoration: none;

    cursor: pointer;


    .icon, .txt{ z-index: 10; }

    .icon{
        width: var(--size);
        height: var(--size);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-bg);
        text-align: center;

        svg{
            fill: var(--color-bg);
            width: 80%;
        }
    }

    .txt{
        font-family: var(--font-title);
        color: var(--color-accent);
        font-size: var(--fs-normal);
        font-weight: var(--fw-bold);
        padding-left: 1ch;
    }

    &::after{
        content: '';
        display: block;
        background-color: var(--color-accent);
        border-radius: calc(var(--size)/2);
        width: var(--size);
        height: var(--size);
        position: absolute; 
        left: 0;
        z-index: 0;
        transition: width .2s
    }

    &:hover{
        // 
        .txt{
            color: var(--color-bg);
                        display: block;
                    }
        &::after{
            width: 100%;
        }
    }

    



   
}