@import '../global-sass-files/variables';
@import '../global-sass-files/mixins';
@import '../Popup/popup.scss';
@import '../global-sass-files/grid';

// File Upload
.file {
  &-upload {
    overflow:hidden;
    &-body-container {
      padding-bottom: 32px;
    }
    &-items {
      padding-top: 17px;
      padding-bottom: 12px;
    }
    button {
      float:right;
    }
    &-message {
      font-size: 12px;
      line-height: 15px;
      font-family: Roboto Regular;
      color: $content-red-color;
      text-align: justify;
      float: left;
      opacity: 0.5;
      padding-top: 6px;
    }
    &-title {
      color: $white-color;
      font-size: 13px;
      line-height: 17px;
      font-family: $primary-font-light;
      padding-left: 35px;
      position: relative;
      cursor: pointer;
      display: inline-block;
    }
    &-icon {
      @include iconmoon();
      position: absolute;
      left: 0;
      top: -5px;
      font-size: 30px;
      &:after {
        content: "\e918";
        color: #dcdcdc;
      }
      &.white {
        &:after {
          color: $white-color;
        }
      }
      &.gray {
        &:after {
          color: #cdcdcd;
        }
      }
    }
    &-item {
      margin-bottom: 15px;
      position: relative;
      overflow: hidden;
      &-icon {
        display: inline-block;
        margin-right: 10px;
        width: 21px;
        height: 21px;
        background-size: contain;
        vertical-align: middle;
        &.file {
          background: url('../../img/icons/file-upload-file-stripe.png') no-repeat;
          &.success {
            background-position: 0 0;
          }
          &.warning {
            background-position: 0 -64px;
          }
          &.error {
            background-position: 0px -136px;
          }
          &.percentage {
            background-position: 0px -197px;
          }
        }
        &.zip {
          background: url('../../img/icons/file-upload-zip-stripe.png') no-repeat;
          &.success {
            background-position: 0 0;
          }
          &.warning {
            background-position: 0 -60px;
          }
          &.error {
            background-position: 0px -129px;
          }
          &.percentage {
            background-position: 0px -197px;
          }
        }
      }
      &-title {
        font-size: 12px;
        line-height: 15px;
        font-family: $primary-font-regular;
        &.success {
          color: $content-green-color;
        }
        &.warning {
          color: $content-gray-color;
        }
        &.error {
          color: $content-red-color;
        }
        &.percentage {
          color: $content-blue-color;
        }
      }
      &-info {
        font-size: 12px;
        line-height: 15px;
        font-family: $primary-font-regular;
        color: $content-green-color;
        float: right;
        padding-right: 20px;
        padding-top: 2px;
        &.success {
          color: $content-green-color;
        }
        &.warning {
          color: $content-gray-color;
        }
        &.error {
          color: $content-red-color;
        }
        &.percentage {
          color: $content-blue-color;
          position: absolute;
          right: 0;
          top: 3px;
          padding: 0;
        }
      }
      .icon-close {
        top: 3px;
        right: 0;
        position: absolute;
      }
    }
    .progress {
      height: 3px;
      margin-top: 3px;
      background-color: #f9f9f9;
      overflow: hidden;
      &-bar {
        width: 100%;
        height: 100%;
        float: left;
        padding: 0;
        transition: width .6s ease;
        &.success {
          background-color: $content-green-color;
        }
        &.warning {
          background-color: $content-orange-color;
        }
        &.error {
          background-color: $content-red-color;
        }
        &.percentage {
          background-color: $content-blue-color;
        }
      }
    }
  }
}