.btn--bold .btn--bold__container{
    --size: 28px;
    font-size: var(--fs-big);
    height: var(--size);

    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75ch;
    padding-right: 1ch;
    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;
        padding-top: 1px;
        padding-left: 2px;
        
        svg{
            width: 70%;
            fill: var(--color-bg);
        }
    }

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

    &:hover{
        color: var(--color-bg);
        &::before{
            width: 100%;
        }
    }
}