Drop Zone Component

<div class="spr-drop-zone spr-drop-zone-initial">
  <img src="https://sprout-cdn.kabbage.com/components/drop-zone/folder-upload.svg" class="browse-files-icon">
  <a href="javascript:;" class="browse-files">Browse files</a>
  <span class="show-on-desktop">or drag and drop here</span>
  <div class="file-hint">
    Accepted file formats: image files, text files, PDF, DOC, DOCX. Max file size: 50 MB.
  </div>
</div>
<br><br>
<div class="spr-drop-zone spr-drop-zone-initial spr-drop-zone-hover">
  <img src="https://sprout-cdn.kabbage.com/components/drop-zone/folder-upload-hover.svg" class="browse-files-icon">
  <a href="javascript:;" class="browse-files">Browse files</a>
  <span class="show-on-desktop">or drag and drop here</span>
  <div class="file-hint">
    Accepted file formats: image files, text files, PDF, DOC, DOCX. Max file size: 50 MB.
  </div>
</div>
<br><br>
<div class="spr-drop-zone spr-drop-zone-uploaded">
  <strong>Uploaded files</strong>
  <input type="file" class="spr-drop-zone-input">
  <div class="files">
    <div class="file">
      <div class="filename-container">
        <div class="filename">kabbageDocumentsupload.pdf</div>
        <a href="javascript:;" class="show-on-mobile">Remove</a>
      </div>
      <div class="status">
         <a href="javascript:;" class="show-on-desktop">Remove</a>
         <i class="spr-icon spr-icon-check-fill status-icon success"></i>
      </div>
    </div>
    <div class="file">
      <div class="filename-container">
        <div class="filename">kabbageDocumentsupload.pdf</div>
        <a href="javascript:;" class="show-on-mobile">Remove</a>
      </div>
      <div class="status">
         <a href="javascript:;" class="show-on-desktop">Remove</a>
         <div class="spr-spinner-container status-icon">
           <svg viewBox="0 0 24 24">
             <circle class="spr-spinner" cx="12" cy="12" r="10.5" fill="none" stroke-width="3"></circle>
           </svg>
         </div>
      </div>
    </div>
    <div class="file">
      <div class="filename-container">
        <div class="filename">kabbageDocumentsupload.pdf</div>
        <a href="javascript:;" class="show-on-mobile spr-inline-sm">Retry</a>
        <a href="javascript:;" class="show-on-mobile">Remove</a>
      </div>
      <div class="status error">
         <a href="javascript:;" class="show-on-desktop spr-inline-sm">Retry</a>
         <a href="javascript:;" class="show-on-desktop">Remove</a>
         <i class="spr-icon spr-icon-alert-fill status-icon error"></i>
      </div>
    </div>
  </div>
  <div class="more-files">
    <a href="javascript:;">Add more files</a>
    <span class="show-on-desktop">or drag and drop here</span>
  </div>
  <div class="file-hint">
    Accepted file formats: image files, text files, PDF, DOC, DOCX. Max file size: 50 MB.
  </div>
</div>
<br><br>
<div class="spr-drop-zone spr-drop-zone-uploaded spr-drop-zone-hover">
  <strong>Uploaded files</strong>
  <div class="files">
    <div class="file">
      <div class="filename-container">
        <div class="filename">kabbageDocumentsupload.pdf</div>
        <a href="javascript:;" class="show-on-mobile">Remove</a>
      </div>
      <div class="status">
         <a href="javascript:;" class="show-on-desktop">Remove</a>
         <i class="spr-icon spr-icon-check-fill status-icon success"></i>
      </div>
    </div>
  </div>
  <div class="more-files">
    <a href="javascript:;">Add more files</a>
    <span class="show-on-desktop">or drag and drop here</span>
  </div>
  <div class="file-hint">
    Accepted file formats: image files, text files, PDF, DOC, DOCX. Max file size: 50 MB.
  </div>
</div>

@import 'components/drop-zone';