.labeled-input {
    --color: var(--secondary-accent-color);

    position: relative;
    display: flex;
    padding-inline: 0.2em;
}

.labeled-input.reverse-colors {
    --color: var(--primary-accent-color);
}

.labeled-input>.input {
    flex: 1 0 auto;
    font-style: italic;
    order: 1;
    width: 10em;
    padding-left: .3em;
}

.labeled-input.reverse-colors>.input {
    color: var(--color);
}

.labeled-input>.label {
    position: static;
    cursor: text;
    color: var(--color);
}

.labeled-input>.label::before,
.labeled-input>.label::after {
    content: "";
    left: 0;
    position: absolute;
    bottom: -0.2em;
    height: var(--border-width);
    width: 100%;
    transition: transform var(--transition-duration);
}

.labeled-input>.input:focus~.label {
    font-weight: bold;
}

.labeled-input>.label::before {
    background-color: var(--selection-color);
}

.labeled-input>.label::after {
    transform: scale(0, 1);
    background-color: var(--color);
}

.labeled-input>.input:focus~.label::after {
    transform: none;
}