.textinput {
    --border-color: var(--color-secondary-xlight);
    --color: var(--color-text);
    --background-color: #fff;
    --placeholder-color: var(--color-muted);

    font-family: var(--font-base);
    font-size: var(--font-size-base);

    line-height: var(--line-height-base);
    padding: var(--input-padding-y) var(--input-padding-x);
    background-color: var(--background-color);
    color: var(--color);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    display: inline-block;
    box-sizing: border-box;
    margin: var(--input-margin);
    outline: none;
    box-shadow: none;
}

.textinput:focus {
    --border-color: var(--color-secondary);
    outline: none;
}

input.textinput[type='file'] {
    font-size: 0.9em;
    padding-top: 0.35rem;
}

.textinput::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
}

textarea.textinput {
    resize: vertical;
    width: 100%;
}

.textinput[readonly] {
    border-style: dashed;
    cursor: not-allowed;
    --color: var(--color-muted);
    --border-color: var(--color-muted);
}

.textinput[disabled] {
    --border-color: var(--color-muted);
    --background-color: var(--color-neutral-light);
    cursor: not-allowed;
}

.textinput.textinput--error,
.textinput:invalid:not(:placeholder-shown) {
    /* not(:placeholder-shown) is cross browser speak for not empty */
    --border-color: var(--color-danger);
}

.textinput.textinput--block {
    width: 100%;
    display: block;
}

.textinput.textinput--nocontrols::-webkit-outer-spin-button,
.textinput.textinput--nocontrols::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.textinput.textinput--nocontrols {
    -moz-appearance: textfield;
}