div.prism-live {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
}

textarea.prism-live,
pre.prism-live {
    padding: .2rem .5rem;
    box-sizing: border-box;
    margin: 0;
}

textarea.prism-live {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    color: transparent;
    /* color: hsla(0,0%,50%,.4); */
    cursor: text;
    white-space: pre;
    border: 0;
    outline: none;
    background: transparent;
    resize: none;
    --selection-background: hsl(320, 80%, 25%);
    --selection-color: hsla(0, 0%, 100%, .8);
}

@supports (not (caret-color: black)) and (-webkit-text-fill-color: black) {
    textarea.prism-live {
        color: inherit;
        -webkit-text-fill-color: transparent;
    }
}

/* Setting specific colors is needed
 * because otherwise Firefox shows blank text */
textarea.prism-live::-moz-selection {
    background: var(--selection-background);
    color: var(--selection-color);
}

textarea.prism-live::selection {
    background: var(--selection-background);
    color: var(--selection-color);
}

pre.prism-live {
    flex: 1;
    position: relative;
    pointer-events: none;
    overflow: hidden;
    max-height: 100%;
    --scrollbar-width: 17px;
    padding-bottom: var(--scrollbar-width);
    padding-right: var(--scrollbar-width);
}

pre.prism-live > code:empty::before {
    content: " "
}