.FileBase {
  width: 100%;
  display: block;
  border: var(--sizeInputBorder) solid var(--colorInputBorder);
  background: var(--colorInputBackground);
  border-radius: var(--sizeInputBorderRadius);
  padding: var(--sizeInputPadding);
  font-size: var(--sizeInputFont);
  transition: var(--animationBase);
  outline: none;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.FileBase input {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  cursor: pointer;
}

.FileBase input:hover + .FileBase-btn, .FileBase input:focus + .FileBase-btn {
  background: var(--colorBrand);
  color: hsl(0, 0%, calc((var(--colorBrand-l) - 60) * -100%));
}

.FileBase-btn {
  font-size: .9em;
  background: var(--colorSecondaryBg);
  padding: .2em 0.6em;
  border-radius: 4px;
  margin-left: -.35em;
  margin-right: .4em;
  transition: var(--animationBase);
}

.FileBase.is-invalid {
  border-color: var(--colorErrorsDefault);
  background-color: var(--colorInputBackgroundInvalid);
}

.FileBase:focus {
  border-color: var(--colorInputBorderFocus);
  background-color: var(--colorInputBackgroundFocus);
}

/*# sourceMappingURL=file.min.css.map */