.upload-button {
  @include inline-block(top);
}

.fileupload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.dragover,
#main_content.dragover {
  position: relative;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    background-color: rgba($dark-gray, 0.6);
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20style%3D%22enable-background%3Anew%200%200%2064%2046.9%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20version%3D%221.1%22%20y%3D%220px%22%20x%3D%220px%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%2064%2046.9%22%3E%3Cpath%20fill%3D%22%23ededed%22%20d%3D%22m21.3%2024.5c0-0.3%200.1-0.6%200.3-0.8l11.8-11.7c0.2-0.2%200.5-0.3%200.8-0.3s0.6%200.1%200.8%200.3l11.7%2011.7c0.2%200.3%200.3%200.5%200.3%200.8s-0.1%200.6-0.3%200.8-0.5%200.3-0.8%200.3h-7.5v11.7c0%200.3-0.1%200.5-0.3%200.8-0.2%200.2-0.5%200.3-0.8%200.3h-6.4c-0.3%200-0.5-0.1-0.8-0.3s-0.3-0.5-0.3-0.8v-11.7h-7.5c-0.3%200-0.5-0.1-0.8-0.3s-0.2-0.5-0.2-0.8m-21.3%209.6c0%203.5%201.3%206.6%203.8%209%202.5%202.5%205.5%203.8%209%203.8h36.3c4.1%200%207.6-1.5%2010.6-4.4%202.8-2.9%204.3-6.4%204.3-10.5%200-2.9-0.8-5.6-2.3-8-1.6-2.4-3.6-4.3-6.3-5.5%200-0.7%200.1-1.1%200.1-1.4%200-4.7-1.7-8.7-5-12.1-3.3-3.3-7.4-5-12.1-5-3.5%200-6.6%201-9.5%202.9s-5%204.5-6.3%207.7c-1.6-1.4-3.4-2.1-5.5-2.1-2.4%200-4.4%200.8-6%202.5-1.7%201.7-2.5%203.7-2.5%206%200%201.7%200.5%203.2%201.4%204.6-2.9%200.7-5.3%202.2-7.1%204.5-2%202.4-2.9%205.1-2.9%208%22%2F%3E%3C%2Fsvg%3E');
    background-position: center;
    background-size: 64px 47px;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}

.overall-upload {
  box-sizing: border-box;
  position: fixed;
  bottom: -100%;
  left: 0;
  z-index: 150;
  width: 100%;
  height: auto;
  padding: 8px;
  overflow: hidden;
  background-color: rgba($dark-gray, 0.6);
  transition: all 250ms ease-in-out;

  &.visible {
    bottom: 0;
  }

  .progress {
    width: 0%;
    height: 24px;
    line-height: 24px;
    color: $text-color;
    background-color: $success_background_color;
    text-indent: 2*$default-padding;
    overflow: visible;
    white-space: nowrap;
    @include border-radius($default-border-radius);
  }
}

.upload-progress-container {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 236px;

  .progress-wrapper {
    padding: 2*$default-padding;
    background-color: $medium-gray;
    position: relative;
    margin-top: 8px;
    @extend %rounded-border;
  }

  .progress-name,
  .progress-bar-status {
    margin-bottom: 4px;
  }

  .progress-name {
    text-shadow: 0 1px 2px #ffffff;
  }

  .progress-bar-status {
    font-size: 10px;
  }

  .progress-bar-container {
    background-color: #f9f9f9;
    @extend %rounded-border;
    height: 16px;
    overflow: hidden;
    width: 100%;
  }

  .progress-bar-in-progress {
    background-color: $info_background_color;
    height: 16px;
    width: 0;
  }

  .progress-bar-complete {
    background-color: $success_background_color;
    height: 16px;
    width: 0;
  }

  .progress-bar-error {
    background-color: $error_background_color;
    height: 16px;
    width: 0;
  }

  .progress-bar-canceled {
    background-color: #c9c9c9;
    height: 16px;
    width: 0;
  }

  .progress-cancel {
    @extend .icon-cross;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 8px;
    right: 4px;
  }
}