// stylelint-disable-next-line scss/at-import-partial-extension
@import "cropperjs/dist/cropper.min";

$app-cropper-point-size: 20px;

.app-c-image-cropper {
  @include govuk-font($size: 19);
  @include govuk-responsive-margin(6, "bottom");

  .cropper-view-box {
    outline: 2px solid $govuk-focus-colour;
    outline-color: $govuk-focus-colour;
  }

  .cropper-line,
  .cropper-point,
  .cropper-point.point-se::before {
    background-color: $govuk-focus-colour;
  }

  .cropper-point {
    width: $app-cropper-point-size;
    height: $app-cropper-point-size;
    opacity: 1;
  }

  .cropper-point.point-n {
    top: calc(-1 * $app-cropper-point-size / 2);
    margin-left: calc(-1 * $app-cropper-point-size / 2);
  }

  .cropper-point.point-ne {
    top: calc(-1 * $app-cropper-point-size / 2);
    right: calc(-1 * $app-cropper-point-size / 2);
  }

  .cropper-point.point-e {
    right: calc(-1 * $app-cropper-point-size / 2);
    margin-top: calc(-1 * $app-cropper-point-size / 2);
  }

  .cropper-point.point-se {
    right: calc(-1 * $app-cropper-point-size / 2);
    bottom: calc(-1 * $app-cropper-point-size / 2);
  }

  .cropper-point.point-s {
    bottom: calc(-1 * $app-cropper-point-size / 2);
    margin-left: calc(-1 * $app-cropper-point-size / 2);
  }

  .cropper-point.point-sw {
    bottom: calc(-1 * $app-cropper-point-size / 2);
    left: calc(-1 * $app-cropper-point-size / 2);
  }

  .cropper-point.point-w {
    left: calc(-1 * $app-cropper-point-size / 2);
    margin-top: calc(-1 * $app-cropper-point-size / 2);
  }

  .cropper-point.point-nw {
    top: calc(-1 * $app-cropper-point-size / 2);
    left: calc(-1 * $app-cropper-point-size / 2);
  }

  &:focus {
    outline: none;

    .cropper-view-box {
      outline-width: 4px;
    }

    .cropper-point {
      transform: scale(1.1);
    }
  }
}

.app-c-image-cropper__image {
  display: none;
  max-width: 100%;
  max-height: 640px;
  margin-right: auto;
  margin-left: auto;
}

.app-c-image-cropper__description {
  display: none;
  margin-top: 0;
}

.app-c-image-cropper__no-js-description {
  margin-top: 0;
}

.js-enabled {
  .app-c-image-cropper__no-js-description,
  .app-c-image-cropper__no-js-image {
    display: none;
  }

  .app-c-image-cropper__description,
  .app-c-image-cropper__image {
    display: block;
  }
}
