@import "work/work-includes";

.UploadedFile {
  width: 203px;

  main {
    background-color: $grey-lighter;
    height          : 135px;
    position        : relative;

    .document-icon {
      width : 35px;
      height: 35px;
    }

    .preview {
      height         : 135px;
      width          : 100%;
      background-size: cover;
    }
  }

  .cross {
    height: 10px;
    width: 10px;
  }

  .file-name {
    margin-top: 5px;

    p {
      @include ellipsis(180px);

      font-weight: 400;
    }
  }

  .progress {
    position        : absolute;
    width           : 100%;
    left            : 0;
    top             : 100px;
    padding         : 13px 20px 7px 20px;
    background-color: rgba(255,255,255,0.7);
  }

  progress {
    width: 100%;
  }

  .failed {
    button {
      margin-top: 10px;
    }

    img {
      opacity: .60;
    }
  }

  textarea {
    margin-top  : 5px;
    width       : 100%;
    height      : 82px;
    border-width: 0;
    color       : $text-color-lighter;

    &:focus {
      border-width: 1px;
      color: $text-color;
    }
  }
}