/* Add "na-todo-property" or "na-todo-property-below" to mark unfinished UI.
   Optionally add data-todo="Short description" to explain what remains. */
.na-todo-property,
.na-todo-property-below {
    position: relative;
    z-index: 0;
    background-color: rgba(255, 243, 163, .6);
    border: 1px solid rgba(224, 180, 0, .6);
    border-radius: .375rem;
    padding: .375rem .5rem .5rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.na-todo-property:hover,
.na-todo-property:focus-within,
.na-todo-property-below:hover,
.na-todo-property-below:focus-within {
    background-color: rgba(255, 243, 163, .85);
    border-color: rgba(224, 180, 0, .85);
}

.na-todo-property::before,
.na-todo-property-below::after {
    content: var(--na-todo-content, "TODO");
    display: block;
    color: #725900;
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    opacity: .6;
    transition: opacity .15s ease;
}

.na-todo-property:hover::before,
.na-todo-property:focus-within::before,
.na-todo-property-below:hover::after,
.na-todo-property-below:focus-within::after {
    opacity: .85;
}

.na-todo-property::before {
    margin-bottom: .25rem;
}

.na-todo-property-below::after {
    margin-top: .25rem;
}

.na-todo-property[data-todo]::before,
.na-todo-property-below[data-todo]::after {
    content: "TODO — " attr(data-todo);
    letter-spacing: normal;
}