@avatar-size: 48px;


.avatar-preview {
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
  height: @avatar-size;
  width: @avatar-size;

  &.avatar-preview-unset {
    background: #FFF;
    border: 1px #CCC dashed;
  }

  img {
    width: @avatar-size;
    height: @avatar-size;
  }
}

.avatar-service-configuration,
.avatar-service-fields {
  display: none;
}

.avatar-file-upload-config {
  border: 2px #CCC dashed;
  display: inline-block;
  margin: 1em 0;
  padding: 1em;

  &.drag-hover {
    background: white;
    border-color: #000099;
    content: 'Drop to set your avatar';

    * {
      pointer-events: none;
    }

    .avatar-file-upload-instructions {
      display: none;
    }

    .avatar-file-upload-drop-instructions {
      display: block;
    }
  }

  .avatar-file-upload-drop-instructions {
    display: none;
    text-align: center;
  }

  .avatar-preview {
    cursor: pointer;
    margin: 0 auto 1em auto;
  }
}
