/* Hide the original input */
.x-file--input {
  width: 0px;
  height: 0px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.x-file--input + label {
  display: inline-block;
  cursor: pointer;
}

.x-file--input:focus + label,
.x-file--input + label:hover {
  /* Overwrite this in your own css file with styles for :focus & :hover  */
}

.x-file--input:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

.x-file--input + label * {
  pointer-events: none;
}

/* Hide the original input */
.x-file--input {
  width: 0px;
  height: 0px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.x-file--input + label {
  display: inline-block;
  cursor: pointer;
}

.x-file--input:focus + label,
.x-file--input + label:hover {
  /* Overwrite this in your own css file with styles for :focus & :hover  */
}

.x-file--input:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

.x-file--input + label * {
  pointer-events: none;
}

Fix mobile Safari styling bug for hidden file input element
Fix mobile Safari styling bug for hidden file input element

Added `max-width: 0` rule to default styles, to ensure the width
of the hidden file input doesn't spill out, and cause a whitespace
gutter.
