ministryofjustice/peoplefinder

.person-photo {

    .upload-hint{
      @include core-16;
    }
    .file {
      margin-top: 15px;
      line-height: 0;
      font-size: 15px;
      cursor: pointer;
      padding: 20px;
      width: 100%;
      border: 3px dashed $border-colour;
    }
    .media-object {
      width: 100%;
    }

    .preview-box, .upload-button-bar {
      position: relative;
      width: 300px;
    }

    .maginot {
      position: relative;
      width: 100%;
      height: 100%;
      transition: all 500ms ease-in-out;

      .uploading & {
        opacity: 0.3;
      }
    }

    form {
      display: none;
    }

    .crop-hint,
    .crop-again-button,
    .upload-hint,
    #person-image,
    .photo-upload-button,
    .reset-image-button,
    .uploading-hint,
    .crop-finished-button {
      display: none;
    }

    &.initial {
      .upload-hint, #person-image, .photo-upload-button {
        display: block;
      }
    }

    &.uploading {
      .uploading-hint {
        display: block;
      }
    }

    &.cropping {
      .crop-finished-button {
        display: block;
      }
    }

    &.cropped {
      .upload-hint, #person-image {
        display: block;
      }

      .photo-upload-button, .reset-image-button {
        display: inline;
      }

      .crop-again-button {
        display: inherit;
      }

      .preview {
        position: absolute;
      }

      .preview-box {
        width: 300px;
        height: 300px;
        overflow: hidden;
      }
    }


    .upload-button-bar {
      margin-top: 10px;
      #person-image {
        margin-top: 0;
      }

      .form-hint {
        margin-top: 0;
      }

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