.form__newsletter{
    --size: 24px;

    position: relative;
    display: flex;
    align-items: center;
    position: relative;



    input[type="email"]{
        
        height: calc(var(--h-block)*1.25);
        width: 100%;
        border-radius: calc(var(--h-block)*0.625);
        outline: none;
        border: none;
        padding: 0 2ch;
        font-family: var(--font);

        font-size: var(--fs-normal);
        z-index: 40;
        padding-top: 4px;
        &::placeholder{
            font-family: var(--font);
            font-size: var(--fs-normal);
        }

        &:focus{
            outline: 3px solid var(--grey-400);
        }

      
    }

    button[type="submit"].btn--bold{
        position: absolute;
        right: 2px;
        z-index: 100;
    }


    button[type="submit"].btn--bold {

    
        --size: calc(var(--h-block)*1.25 - 4px);
        font-family: var(--font);
        font-size: var(--fs-button-bold);
        height: var(--size);

   
        display: flex;
        align-items: center;
        gap: 0.75ch;
        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{
            position: relative;
            top: 2px;
            font-size: var(--fs-normal);
            display: none;
            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; 
            right: 0;
            z-index: 0;
            transition: width .2s
        }
    
        &:hover{
            .txt{
                color: var(--color-bg);
                            display: block;
                        }
            &::after{
                width: 100%;
            }
        }

        // @media #{$small}{ 
        //     .txt{
        //         color: var(--color-bg);
        //                     display: block;
        //                 }
        //     &::after{
        //         width: 100%;
        //     }
        // }

    
       
    }




}