@import "../InputErrors/style";

.hui-FileInput {
  @extend %hui-input-base;
}

.hui-FileInput__wrap {
  @extend %hui-input-border;
}

.hui-FileInput__input {
  position: absolute;
  top: 9px;
  left: 0px;
  color: $grey;
  letter-spacing: 0.10em;
  line-height: $x-9 - 1;
  font-size: 15px;
  padding-left: $x-2;
  width: 100%;
  max-height: $x-8;
  overflow: hidden;
  .hui-FileInput--hasFile & {
    color: inherit;
  }
}

.hui-FileInput__label {
  @extend %hui-input-label;
}

.hui-FileInput__buttons {
  background: white;
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
}

.hui-FileInput__browse {
  @extend %hui-input-button;
  border: 0;
  cursor: pointer;
  &:hover, &:focus {
    color: snow;
  }
}

.hui-FileInput__reset {
  @extend %hui-button-reset;
  font-size: $x-4;
  line-height: $x-10;
  margin: 0;
  padding: 0 $x-2;
  vertical-align: top;
  display: inline-block;
  color: $grey-active;
  &:hover {
    color: $green-active;
  }
}

.hui-FileInput--disabled .hui-FileInput__input,
.hui-FileInput--disabled .hui-FileInput__selected,
.hui-FileInput--disabled .hui-FileInput__label,
.hui-FileInput--disabled .hui-FileInput__wrap {
  @extend %hui-input-disabled;
}

.hui-FileInput--disabled .hui-FileInput__browse,
.hui-FileInput--disabled.hui-FileInput--focused .hui-FileInput__browse  {
  background-color: $grey-lighter;
}

.hui-FileInput--focused .hui-FileInput__wrap,
.hui-FileInput--focused .hui-FileInput__label {
  @extend %hui-input-focused;
}

.hui-FileInput--focused .hui-FileInput__browse {
  background-color: $green;
}

.hui-FileInput--error .hui-TextInput__message {
  @extend %error-message;
}

.hui-FileInput--error .hui-FileInput__icon,
.hui-FileInput--error .hui-FileInput__input,
.hui-FileInput--error .hui-FileInput__label,
.hui-FileInput--error .hui-FileInput__wrap {
  @extend %hui-input-error;
}

@include input-sizes(FileInput);