.upload {
  align-items: center;
  background: $color-brand--white;
  border: 1px solid $color--grey;
  border-radius: $border-radius--l;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: $baseline * 12;
  overflow: hidden;
  padding: $spacing--m 30px;
  position: relative;
  text-align: center;

  p {
    @include font-style('body--xs');
    margin-bottom: 0;
    width: 100%;
  }

  &__text {
    @include font-style('body--l');
    position: relative;

    .icon {
      cursor: pointer;
      left: 0;
      top: $baseline * 0.2;
    }
  }

  &__add {
    cursor: pointer;
    color: returnColorCSSVar('brand-primary');
  }

  &__content {
    transform: translateY(0);
    transition: transform $transition-duration--fast $transition-duration--fast,
      opacity $transition-duration--fast $transition-duration--fast;
    width: 100%;

    &--drop {
      align-items: center;
      color: $color-brand--one;
      display: flex;
      height: 100%;
      justify-content: center;
      opacity: 0;
      position: absolute;
      transform: translateY(20px);
      transition: transform $transition-duration--fast 0s,
        opacity $transition-duration--fast 0s;
    }
  }
}

.form-group--upload {
  input[type='file'] {
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: 1;
  }
}

// state - hover
.form-group--upload:not(.form-group--read-only):not(.form-group--error)
  .upload:hover,
input:focus + .upload {
  border: 2px solid $color-brand--one;
  padding: ($baseline * 2.9) 29px;
}

// state - drag
.form-group--upload:not(.form-group--read-only) .upload {
  transition: background $transition-duration--fast,
    border $transition-duration--fast, padding $transition-duration--fast;

  &--drag-over {
    animation: file-upload 1.8s infinite;
    background: $color--one-light;
    border: 2px solid $color-brand--one;
    padding: ($baseline * 2.9) 29px;

    .upload__content--drop {
      opacity: 1;
      transform: translateY(0);
      transition: transform $transition-duration--fast
          $transition-duration--fast,
        opacity $transition-duration--slow $transition-duration--fast;
    }

    .upload__content:not(.upload__content--drop) {
      opacity: 0;
      transition: transform $transition-duration--fast 0s,
        opacity $transition-duration--fast 0s;
    }
  }
}

// state - error
.form-group--error .upload {
  @include form-field--invalid;
}

// state - read only / disabled
.form-group--read-only .upload {
  background: $color--grey-10;
  border: 1px solid $color--grey;
  cursor: auto;
  padding: $spacing--m 30px;

  &__add {
    pointer-events: none;
  }

  input[type='file'] {
    cursor: auto;
  }
}

// // viewport l
@include viewport--l {
  .form-group--upload {
    max-width: grid-columns(4, 9);
  }
}

.form-group--upload-full-width {
  max-width: none;
}