#container {
    height: 270px;
    margin-block: 2em;
    position: relative;
}

#container > * {
    box-sizing: border-box;
    height: 100%;
    margin-block: 1em;
    padding-block: 1em;
    position: absolute;
    white-space: pre;  /* Allows textarea to scroll horizontally */
    width: 100%;
}

#container > *, #stats {
    padding-inline: 1em;
}

#editing {
    background-color: inherit;
    border: none;
    caret-color: var(--fg);
    color: transparent;
    font: inherit;
    letter-spacing: inherit;
    outline-color: var(--fg);
    outline-style: solid;
    outline-width: 1px;
    overscroll-behavior: none;
    resize: vertical;
    z-index: 1;
}

#editing:not(:focus-visible) {
    outline-style: dashed;
}

#editing[dir=auto] + #highlighting {
    unicode-bidi: plaintext;
}

#editing[dir=ltr] + #highlighting {
    direction: ltr;
}

#editing[dir=rtl] + #highlighting {
    direction: rtl;
}

#highlighting {
    overflow: hidden;
}

#highlighting .middle {
    background-color: initial;
    color: var(--fg_highlight);
}

#highlighting mark {
    color: inherit;
}

#highlighting .inner {
    background-color: #ff6464;
}

#highlighting .outer {
    background-color: #aa6464;
}

.placeholder {
    color: var(--fg_dim);
}

#buttons, #statuses {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

:is(#buttons, #statuses) > * {
    width: max-content;
}

#counts {
    white-space: pre-wrap;
}

#counts > output {
    font-family: var(--mono_font);
}

#palindrome {
    background-color: var(--fg_verydim);
}

#palindrome.bio, #pangram {
    background-color: #400000;
    color: #ff6464;
}

#share.unsupported {
    font-size: .6em;
}

#stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 2em;
}

#stats > :not(:first-child) {
    margin-inline-start: auto;
}

#statuses output:empty {
    display: none;
}

#statuses output:not(:empty) {
    padding-inline: .3em;
}