@import 'colors';

.direct-upload {
  display: inline-block;
  position: relative;
  padding: 4px 15px;
  margin: 0 3px 3px 0;
  border: 1px solid $border-grey;
  border-radius: 3px;
  font-size: 14px;
}

.direct-upload--pending {
  opacity: 0.7;
}

.direct-upload__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: var(--background-contrast-grey);
  transition:
    width 120ms ease-out,
    opacity 60ms 60ms ease-in;
  transform: translate3d(0, 0, 0);
}

.direct-upload__filename {
  position: relative; // set a position so it appears above the progress bar
}

.direct-upload--complete .direct-upload__progress {
  background-color: var(--background-overlap-grey);
}

.direct-upload--error {
  border-color: var(--border-plain-error);
}

input[type='file'][data-direct-upload-url][disabled],
input[type='file'][data-auto-attach-url][disabled] {
  display: none;
}