.input {
    position: relative;
}

.dim > :not(:hover) {
    opacity: .5;
}

.search {
    padding-right: .25rem;
}

.prefix {
    padding-right: .25rem;
}

.suffix {
    padding-left: .25rem;
}

.input input {
    width: 0;
}

.input input,
.input textarea {
    font-size: .9rem;
    display: flex;
    flex-grow: 1;
    width: 100%; /* required by Firefox */
    border: none;
    color: #fff;
    background-color: transparent;
    transition: background-color 800ms ease-out;
}

.input input:read-only,
.input textarea:read-only {
    opacity: .6;
    pointer-events: none;
}

.input input[type=number] {
    justify-self: right;
    text-align: right;
    width: 4rem;
}

.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:active {
    transition: background-color 9999999999s ease-in-out 0s;
    -webkit-text-fill-color: #fff;
}

.input input::placeholder,
.input textarea::placeholder {
    color: hsl(0, 0%, 45%);
}

.input {
    position: relative;
}

.dim > :not(:hover) {
    opacity: .5;
}

.search {
    padding-right: .25rem;
}

.prefix {
    padding-right: .25rem;
}

.suffix {
    padding-left: .25rem;
}

.input input {
    width: 0;
}

.input input,
.input textarea {
    font-size: .9rem;
    display: flex;
    flex-grow: 1;
    border: none;
    color: #fff;
    background-color: transparent;
    transition: background-color 800ms ease-out;
}

.input input:read-only,
.input textarea:read-only {
    opacity: .6;
    pointer-events: none;
}

.input input[type=number] {
    justify-self: right;
    text-align: right;
    width: 4rem;
}

.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:active {
    transition: background-color 9999999999s ease-in-out 0s;
    -webkit-text-fill-color: #fff;
}

.input input::placeholder,
.input textarea::placeholder {
    color: hsl(0, 0%, 45%);
}

Set default input width to zero.
Set default input width to zero.
