.ob-image-file__actions {
  position: absolute;
  top: $size-8;
  right: $size-8;
  display: flex;
  gap: $size-8;
}

.ob-camera__input-hidden {
  display: none;
}

.ob-crop {
  z-index: inherit;
  height: calc(100vh - #{$size-6});
  width: calc(100vw - #{$size-6});
  max-height: $desktop;
  max-width: $desktop;
  box-shadow: $elevation-2;
  background: $white;
  display: flex;
  flex-direction: column;
}

.ob-annotation {
  z-index: inherit;
  height: calc(100vh - #{$size-6});
  width: calc(100vw - #{$size-6});
  max-height: $desktop;
  max-width: $desktop;
  box-shadow: $elevation-2;
  background: $white;
  display: flex;
  flex-direction: column;
}

.ob-crop__content {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $white;
  padding: $size-4;
  min-height: 0%;
}

.ob-annotation__content {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $white-ter;
}

.ob-annotation__signature-pad {
  background: $white;
}

.ob-annotation__buttons {
  display: flex;
  align-items: center;
  padding: $size-8;
}

.ob-annotation__buttons-actions {
  justify-content: flex-end;
}

.ob-annotation__button-action {
  &:not(:last-child) {
    margin-right: $size-8;
  }
}

.ob-annotation__buttons-colours {
  height: calc(#{$size-8} * 2 + 60px);
  background: $white;
  overflow-x: auto;
  overflow-y: hidden;
}

.ob-annotation__button-colour {
  -webkit-transition:
    min-width 0.2s,
    height 0.2s;
  -moz-transition:
    min-width 0.2s,
    height 0.2s;
  -o-transition:
    min-width 0.2s,
    height 0.2s;
  transition:
    min-width 0.2s,
    height 0.2s;
  outline: none;
  min-width: 50px;
  height: 50px;
  border-radius: 50px;

  &:not(:last-child) {
    margin-right: $size-8;
  }

  &.is-selected {
    min-width: 60px;
    height: 60px;
    border-radius: 60px;
  }
}

.ob-cropper__container {
  //
  // Third Party
  //
  --rc-drag-handle-size: 12px;
  --rc-drag-handle-mobile-size: 24px;
  --rc-drag-handle-bg-colour: rgba(0, 0, 0, 0.2);
  --rc-drag-bar-size: 6px; // The invisible grip size of the crop selection edges
  --rc-border-color: rgba(255, 255, 255, 0.7);
  --rc-focus-color: #0088ff;
  @import 'react-image-crop/src/ReactCrop.scss';

  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ob-cropper__cropper-full-height {
    height: 100%;
  }
  .ob-cropper__cropper {
    .ReactCrop__child-wrapper {
      height: 100%;

      .ob-cropper__image {
        max-height: 100%;
      }
    }
  }
}