@import "client/common";

$avatarDimension: 400px;

#upload-avatar-dialog {
  width: 600px;
  min-height:400px;
  max-height:650px;

  div[data-react-class="UploadAvatarDialog"] {
    height:100%;
    width:100%;
    padding-bottom:50px;
    @include border-box_sizing;
  }

  .avatar-space {
    color: $color2;
    margin-bottom: 20px;
    position:relative;
    //min-height:$avatarDimension;
    width: $avatarDimension;
    height: $avatarDimension;

    display:inline-block;
    &.image-available {
      width:100%;
    }

    border:1px solid #cccccc;

  }

  .spinner-large {
    width:550px;
    height:$avatarDimension;
    line-height: $avatarDimension;
    position:absolute;
    top:60px;
    left:30px;
    z-index: 2000; // to win over jcrop
  }

  .no-avatar-space {
    border:1px dotted $color2;
  }


  .actions {
    position:absolute;
    clear: both;
    text-align: center;
    width:100%;
    @include border_box_sizing;
    bottom:0px;
    left:0;
    right:0;
    height:30px;


    .upload-new {
      position: absolute;
      left: 10px;
      top: 4px;
    }
  }

  p { margin-bottom:20px;}

}