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

    .#{$prefix}form-file-input {
        border: 0; // disables the focus border in old IE
        position: absolute;
        cursor: pointer;
        // some browsers (I'm looking at you Firefox) add extra space around the file button
        // that can't be removed using CSS. Others (webkit) add default margin.  Rather than
        // try to handle each browser's unique case, we just negatively position the input to
        // ensure that there is no extra space between it and the Button's edge
        top: -2px;
        right: -2px;
        @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: 1000px;
    }

    @if $include-rtl {
        .#{$prefix}rtl.#{$prefix}form-file-input {
            right: auto;
            left: -2px;
        }
    }