.tbxforms-input {
    @include tbxforms-font($size: 'default');

    box-sizing: border-box;
    width: 100%;
    height: 40px;
    margin-top: 0;
    padding: $tbxforms-in-field-spacer;
    // setting any background-color makes text invisible when changing colours to dark backgrounds in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1335476)
    // as background-color and color need to always be set together, color should not be set either
    border: $tbxforms-border-width-form-element solid
        $tbxforms-input-border-colour;
    border-radius: 0;

    // Disable inner shadow and remove rounded corners
    appearance: none;

    &:focus {
        outline: $tbxforms-focus-width solid $tbxforms-focus-colour;
        // Ensure outline appears outside of the element
        outline-offset: 0;
        // Double the border by adding its width again. Use `box-shadow` for this // instead of changing `border-width` - this is for consistency with
        // components such as textarea where we avoid changing `border-width` as
        // it will change the element size. Also, `outline` cannot be utilised
        // here as it is already used for the yellow focus state.
        box-shadow: inset 0 0 0 $tbxforms-border-width-form-element;
    }
}

.tbxforms-input::-webkit-outer-spin-button,
.tbxforms-input::-webkit-inner-spin-button {
    margin: 0;
    // -webkit-appearance: none; // TODO: Review if this was needed.
}

// .tbxforms-input[type='number'] {
//     -moz-appearance: textfield; // TODO: Review if this was needed.
// }

.tbxforms-input--error {
    border: $tbxforms-border-width-form-element-error solid
        $tbxforms-error-colour;

    &:focus {
        border-color: $tbxforms-input-border-colour;
    }
}

// The ex measurements are based on the number of W's that can fit inside the input
// Extra space is left on the right hand side to allow for the Safari prefill icon
// Linear regression estimation based on visual tests: y = 1.76 + 1.81x

.tbxforms-input--width-30 {
    max-width: 56ex + 3ex;
}

.tbxforms-input--width-20 {
    max-width: 38ex + 3ex;
}

.tbxforms-input--width-10 {
    max-width: 20ex + 3ex;
}

.tbxforms-input--width-5 {
    max-width: 10.8ex;
}

.tbxforms-input--width-4 {
    max-width: 9ex;
}

.tbxforms-input--width-3 {
    max-width: 7.2ex;
}

.tbxforms-input--width-2 {
    max-width: 5.4ex;
}
