.cc__file-upload {
  height: 60px;
  opacity: 0.6;
  transition: all .2s;
  display: flex;
  border-radius: 4px;
  border: 2px dashed;
  justify-content: center;
  cursor: pointer;

  &--hover {
    .cc__file-upload__icon {
      animation: cc__file-upload--bounce 1s infinite;
    }
  }

  &--image {
    .cc__file-upload__icon {
      &:before {
        content: '\f03e';
      }
    }
  }

  &--documents {
    .cc__file-upload__icon {
      &:before {
        content: '\f0f6';
      }
    }
  }

  &__icon {
    &:before {
      font: normal normal normal 24px FontAwesome;
      padding-right: 8px;
    }
  }

  &__message {
  }

  &__icon, &__message {
    align-self: center;
    justify-self: center;
  }

  &:hover, &--hover {
    opacity: 1;
  }
}

@keyframes cc__file-upload--bounce {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -3px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.cc__file-upload {
  height: 60px;
  opacity: 0.6;
  transition: all .2s;
  display: flex;
  border-radius: 4px;
  border: 2px dashed;
  justify-content: center;
  cursor: pointer;

  &--hover {
    .cc__file-upload__icon {
      animation: cc__file-upload--bounce 1s infinite;
    }
  }

  &__icon {
    &:before {
      font: normal normal normal 24px FontAwesome;
      padding-right: 8px;
    }
  }

  &__message {
  }

  &__icon, &__message {
    align-self: center;
    justify-self: center;
  }

  &:hover, &--hover {
    opacity: 1;
  }

  // Icons
  &--image {
    .cc__file-upload__icon {
      &:before {
        content: '\f03e';
      }
    }
  }

  &--audio {
    .cc__file-upload__icon {
      &:before {
        content: '\f001';
      }
    }
  }

  &--video {
    .cc__file-upload__icon {
      &:before {
        content: '\f008';
      }
    }
  }

  &--documents {
    .cc__file-upload__icon {
      &:before {
        content: '\f0f6';
      }
    }
  }
}

@keyframes cc__file-upload--bounce {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -3px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
Add icons for audio and video
Add icons for audio and video
