<div class="url-input">
    <div class="text"> <p id="url">https://codepen.io/eludadev/pen/ZExYyeX</p>
    </div>
    <button class="icon" id="copy">
        <svg viewBox="0 0 488.3 488.3">
    <path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124
      C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124
      c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/>
    <path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227
      c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6
      V38.6C439.65,17.3,422.35,0,401.05,0z"/>
        </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 copyBtn = document.getElementById('copy')

copyBtn.addEventListener('click', () => {
 navigator.clipboard.writeText(url)
})