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

.#{$prefix}form-file-input {
    border: 0; // disables the focus border in old IE
    position: absolute;
    cursor: pointer;
    
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    
    // Disable blinking caret in IE
    text-indent: -10000px;
    
    @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: 0;
    }
}