.formControl {
    --form-control-background-color: var(--surface-neutral-white, #fff);
    --form-control-border-color: var(--borders-light, #ddd);
    --form-control-border-width: var(--form-border-width, 1px);

    background-color: var(--form-control-background-color);
    border: 0;
    border-radius: var(--border-radius, 0.125rem);
    appearance: none;
    -webkit-appearance: none;
    /* Use box shadow for border, see https://threads.com/blog/34432545238/why-we-use-the-css-property-boxshadow-instead-of-border-in-our-app */
    box-shadow: 0 0 0 var(--form-control-border-width) var(--form-control-border-color);
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: var(--text-line-height, 1.25);
    overflow: hidden;
    padding: var(--form-padding, 0.625rem 0.75rem);
    text-overflow: ellipsis;

    &::placeholder {
        color: var(--form-placeholder, rgba(2, 6, 16, 0.4));
    }

    &:hover,
    &:focus {
        box-shadow: 0 0 0 1px rgba(195, 195, 195, 1),
                    0 0 0 2px rgba(255, 255, 255, 1),
                    0 0 0 4px rgba(7, 99, 211, 1);
    }

    &:focus {
        /* Prevent browser default */
        outline: none;
    }

    &[data-error] {
        --form-control-border-color: var(--system-error, #f53d3d);
    }

    &:disabled {
        --form-control-background-color: var(--surface-system-disabled, #e8e8e8);
        --form-control-border-color: var(--borders-light, #ddd);
        --form-control-border-width: 1px;
        color: var(--system-disabled, #91959f);
        pointer-events: none;

        &::placeholder {
            color: inherit;
        }
    }
}

.formControlError {
    --form-control-border-color: var(--system-error, #f53d3d);
}