.#{$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;
}
}