<div class="url-input">
    <div class="text"> <p id="url">https://codepen.io/eludadev/pen/qBoEjqM</p>
    </div>
    <button class="icon" id="share">
        <svg viewBox="0 0 98.333 98.333">
  <path d="M81.139,64.48c-4.286,0-8.188,1.607-11.171,4.233l-35.919-18.11c0.04-0.475,0.072-0.951,0.072-1.437
    c0-0.432-0.033-0.856-0.064-1.28l36.024-18.164c2.967,2.566,6.828,4.129,11.058,4.129c9.348,0,16.926-7.579,16.926-16.926
    C98.064,7.578,90.486,0,81.139,0C71.79,0,64.212,7.578,64.212,16.926c0,0.432,0.033,0.856,0.064,1.28L28.251,36.37
    c-2.967-2.566-6.827-4.129-11.057-4.129c-9.348,0-16.926,7.578-16.926,16.926c0,9.349,7.578,16.926,16.926,16.926
    c4.175,0,7.992-1.52,10.944-4.026l36.13,18.217c-0.023,0.373-0.057,0.744-0.057,1.124c0,9.348,7.578,16.926,16.926,16.926
    s16.926-7.579,16.926-16.926S90.486,64.48,81.139,64.48z"/>
        </svg>
        <div class="favicon"></div>
    </button>
</div>

.url-input {
    --background: #fff;
    --border-default: #E1E6F9;
    --border-active: #275EFE;
    --text-color: #646B8C;
    --placeholder-color: #BBC1E1;
    --icon: #275EFE;
    --close: #646B8C;
    --close-light: #A6ACCD;
    --close-background: #EFF2FB;
    width: fit-content;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 8px;
    background: var(--background);
    box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border, var(--border-default));
    transition: box-shadow .2s;
    --favicon-scale: 0;
    --icon-offset: 0px;
    --clear-x: 0px;
    --clear-swipe-left: 0px;
    --clear-swipe-x: 0;
    --clear-swipe: 0px;
    --clear-scale: 0;
    --clear-rotate: 0deg;
    --clear-opacity: 0;
    --clear-arrow-o: 1;
    --clear-arrow-x: 0px;
    --clear-arrow-y: 0px;
    --clear-arrow-offset: 4px;
    --clear-arrow-offset-second: 4px;
    --clear-line-array: 8.5px;
    --clear-line-offset: 27px;
    --clear-long-array: 8.5px;
    --clear-long-offset: 24px;
    
    &.clearing,
    &:focus-within {
        --border-width: 1.5px;
        --border: var(--border-active);
    }
    &.clearing {
        --close-background: transparent;
        --clear-arrow-stroke: var(--close-light);
    }
    &:hover p {
        text-decoration: underline;
    }
    .icon {
        cursor: pointer;
        background: none;
        border: none;
        margin: none;
        display: block;
        position: absolute;
        right: 10px;
        top: 15px;
        svg,
        img {
            display: block;
            width: 18px;
            height: 18px;
        }
        svg {
            fill: var(--icon);
        }
        .favicon {
            position: absolute;
            left: 0;
            top: 0;
            transform: scale(var(--favicon-scale)) translateZ(0);
        }
    }
    .text {
        flex-grow: 1;
        p {
            -webkit-appearance: none;
            line-height: 24px;
            background: none;
            border: none;
            outline: none;
            display: block;
    width: fit-content;
            
            margin: 0;
            padding: 12px 44px 12px 12px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-color);
        }
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center
body {
    min-height: 100vh;
    display: flex;
    font-family: 'Inter', Arial;
    justify-content: center;
    align-items: center;
    background: #F6F8FF;
}

const urlElem = document.getElementById('url')
const url = urlElem.textContent

const shareData = {
  title: 'URL',
  text: 'Codepen URL Share',
  url
}

const shareBtn = document.getElementById('share')
shareBtn.addEventListener('click', () => {
    navigator.share(shareData)
})