.textinput-container {
    --fontSize: 18px;
    color: var(--blue50);

}

.textinput-container label {
    position: relative;
    display: block;
    background-color: var(--blue10);
    border-radius: .8333333333em;
    font-size: var(--fontSize);
    line-height: 1;
}

.textinput-container input {
    width: 100%;
    padding: 1.369em 1em 1.369em 3.75em;
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    appearance: none;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
}

.textinput-container input::placeholder {
    color: var(--blue50);
}

/* .textinput-container span {
    position: absolute;
    top: 50%;
    left: 3.75em;
    white-space: nowrap;
    transition-duration: 300ms;
    transform: translateY(-50%);
    transform-origin: top left;
    pointer-events: none;
} */

.textinput-container svg {
    position: absolute;
    width: 1.3888888889em;
    height: auto;
    transform: translateY(-50%);
    top: 50%;
    left: 1.3888888889em;
}

/* .textinput-container label:focus-within input,
.textinput-container input:not(:placeholder-shown) {
    padding: 1.469em 1em 1.269em 3.75em;
    
}

.textinput-container label:focus-within > span, .textinput-container input:not(:placeholder-shown) + span {
    color: var(--blue100);
    transform: translateY(calc(-50% - var(--fontSize))) scale(.7);
} */