.file-uploader {
  display: flex;
  position: relative;
  margin-bottom: 0;
  width: 320px;
  height: 154px;

  input {
    opacity: 0;
    z-index: -100;
    position: absolute;

    &:disabled + .file-uploader-dropzone {
      opacity: 0.5;
    }
  }

  &-dropzone {
    width: 100%;
    height: 100%;
    border: 1px dashed $light-grey;
    border-radius: 6px;
    background: $light;
    @include display-flex(center, center, column);
    cursor: pointer;
    transition: all ease-in-out 0.2s;

    span {
      @include display-flex(center, flex-start);
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    &__icon {
      width: 24px;
    }

    &.active {
      border-color: $black;
    }

    &.disabled {
      cursor: not-allowed;
    }
  }

  &.disabled {
    pointer-events: none;
  }
  &.basic {
    flex: 1;
    width: 100%;
    height: auto;
    .file-uploader {
      &-dropzone {
        @include display-flex(space-between, center);
        flex-direction: row;
        padding: 15px;
        justify-content: space-between;
        border: 1.5px solid $light-grey;
        background-color: transparent;
        .row {
          @include display-flex();
          color: $dark-grey;
        }
        svg {
          margin-right: 10px;
          width: 18px;
          height: 18px;
          path {
            fill: $grey;
          }
        }
        .action-text {
          color: $primary;
        }
        &.error {
          border: 1.5px solid $critical;
          .row {
            svg {
              path {
                fill: $critical;
              }
            }
          }
          .action-text {
            color: $critical;
            margin-right: 5px;
          }
          .retry-icon {
            svg {
              path {
                fill: $primary;
              }
              margin-right: 0;
              margin-left: 5px;
            }
          }
        }
        &.completed {
          border: 1.5px solid $success;
          .row {
            svg {
              path {
                fill: $success;
              }
            }
          }
          p {
            color: $dark-grey;
          }
        }
        &.loading {
          border: 1.5px solid $warning;
          svg {
            path {
              fill: $warning;
            }
          }
          .row p {
            color: black;
          }
          // background: linear-gradient(to right, #FFFAE8 50%, white 50%);
        }
      }
    }
  }
}