.modal--share{
    border: var(--border);
    border-radius: var(--radius-btn);
    background-color: var(--color-bg);
    padding: var(--padding-inner);
    padding-top: calc( var(--padding-inner)*0.5);
    padding-bottom: calc( var(--padding-inner)*1.5);

    .modal-title{
        display: none;
    }

    .socials{
        display: block;
        list-style: none;

        li{
            font-size: var(--fs-normal);
            padding-bottom: 6px;
            border-bottom: var(--border-light);
            padding-top: 6px;
          
            a{
                display: flex;
                align-items: center;
                gap: 1ch;
                text-decoration: none;
            }
            .icon {
                width: 20px;
                height: 20px;
                svg{
                    width: 100%;
                    height: 100%;
                }
            }
            .text{
                position: relative;
                top: 2px;
            }
            &:hover{
                color: var(--color-accent);

                .icon svg, 
                .icon svg path,
                .icon svg rect{
                    fill: var(--color-accent)!important;
                }
            }
        }
    

          
        

    }

    .copy-link{
        display: flex;
        gap: 0.5ch;
        margin-top: calc(var(--spacing)*0.75);

        .copy-link__field{
            flex-grow: 1;
            display: grid;
            grid-template-columns: var(--h-block) 1fr;
         
        }
      

        .icon{
            display: flex;
            width: var(--h-block);
            height: 100%;
            align-items: center;
            justify-content: center;
            position: relative;
            // top: -2px;
            grid-row: 1;
            grid-column: 1;
        }
        .icon svg{
            width: 12px;
        }
        input{
            font-size: var(--fs-small);
            font-family: var(--font);
            background: none;
            border: none;
            color: var(--color-txt);
            padding-top: 2px;
            grid-column: 1/end;
            grid-row: 1;
            padding-left:  var(--h-block);
            padding-right: 0.5ch;
            border: var(--border-light);
            border-radius: var(--radius-btn);
            height: var(--h-block);
            &:focus{
                border-color: var(--color-txt);
                outline: none;

            }
        }

        button{
            background-color: var(--color-txt);
            color: var(--color-bg);
            border-radius: var(--radius-btn);
            padding: 0 1ch;
            font-size: var(--fs-small);
            padding-top: 2px;
            &:hover{
                background-color: var(--color-accent);

            }
        }
    }
   
}