/**
 * Creates the base structure of file field.
 * @member Ext.form.field.File
 */
@mixin extjs-form-file {

    .#{$prefix}form-file-wrap {
        .#{$prefix}form-text {
            color: #777;
        }

        .#{$prefix}form-file-btn {
            overflow: hidden;
        }

        .#{$prefix}form-file-input {
            position: absolute;
            top: -4px;
            right: -2px;
            height: $form-field-height + 8;
            @include opacity(0);

            /* Yes, there's actually a good reason for this...
             * If the configured buttonText is set to something longer than the default,
             * then it will quickly exceed the width of the hidden file input's "Browse..."
             * button, so part of the custom button's clickable area will be covered by
             * the hidden file input's text box instead. This results in a text-selection
             * mouse cursor over that part of the button, at least in Firefox, which is
             * confusing to a user. Giving the hidden file input a huge font-size makes
             * the native button part very large so it will cover the whole clickable area.
             */
            font-size: 100px;
        }
    }
}