.modal--share{
    width: 240px;
    padding-bottom: var(--padding-inner);
    background-color: var(--color-bg);
    .socials{
        display: block;
        list-style: none;

        li{
           font-size: var(--fs-normal); 
           border-bottom: var(--border-light);
           &:first-of-type{
            border-top: var(--border-light);
           }

               a{
                display: flex;
                align-items: center;
                gap: 2ch;
                text-decoration: none;
            }
            .icon {
                width: 16px;
                height: 16px;
                svg{
                    width: 100%;
                    height: 100%;
                }
            }
            .text{
                position: relative;
                top: 2px;
            }
        }

    
    


    }

    .copy-link{
        display: flex;
        gap: 0.5ch;
        padding: 0 var(--padding-inner);
        height: var(--h-block);
        width: 100%;

        .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;
            }
            &.is-copied{
                color: var(--color-accent)!important;
            }
        }

        .copy-link__btn{
            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;
            white-space: nowrap;
            text-align: center;

            width: 8ch!important;
             
             &::after{
                    content: "\00a0";
                }

            &:hover{
                background-color: var(--color-accent);
            }
            
        }

       
    }
   
}




// SHARE ACTIONS --------------------------------------------------
// ----------------------------------------------------------------

#share-banner__content,
#share-banner__aside,
#share-banner__desktop{ 
    display: none; 
}
#share-banner__content ~ .modal--share,
#share-banner__aside ~ .modal--share,
#share-banner__desktop ~ .modal--share{
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-in;
}

#share-banner__content:checked ~ .modal--share,
#share-banner__aside:checked ~ .modal--share,
#share-banner__desktop:checked ~ .modal--share{
    opacity: 1;
    pointer-events: auto;
}