.textinput {
    --border-color: var(--apInputBorderColor);
    --color: var(--apInputTextColor);
    --background-color: var(--apInputBgColor);
    --placeholder-color: var(--apInputPlaceholderColor);
    font-family: var(--apFontDefaultFamily);
    font-size: var(--apFontSizeDefault);
    line-height: var(--apLineHeightDefault);
    padding: var(--apInputVPadding) var(--apInputHPadding);
    background-color: var(--background-color);
    color: var(--color);
    border: var(--apBorderWidth) solid var(--border-color);
    border-radius: var(--apBorderRadius);
    /* transition: 180ms box-shadow ease-in-out;    */
    display: inline-block;
    box-sizing: border-box;
    margin: var(--apInputMargin);
    outline: none;
    box-shadow: none;
}

.textinput:focus {
    --border-color: var(--apInputBorderFocusColor);
    --color: var(--apInputTextFocusColor);
    --background-color: var(--apInputBgFocusColor);
    --placeholder-color: var(--apInputPlaceholderFocusColor);
    outline: none;
}

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

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

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

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

.textinput[disabled] {
    --border-color: var(--apMutedTextColor);
    --background-color: var(--apInputDisabledBgColor);
    cursor: not-allowed;
}

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

.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;
}