/* Image Cropper only (/tools/image-cropper): the crop box with its dimmed surroundings, and the pixel fields. */

.cropper__box {
  position: absolute;
  border: 2px solid #ffffff;
  outline: 1px solid rgb(0 0 0 / 0.6);
  /* Dims everything outside the crop area. */
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.55);
  cursor: move;
  touch-action: none;
  /* Rule-of-thirds guides. */
  background-image:
    linear-gradient(to right, transparent calc(100% / 3 - 0.5px), rgb(255 255 255 / 0.55) calc(100% / 3 - 0.5px), rgb(255 255 255 / 0.55) calc(100% / 3 + 0.5px), transparent calc(100% / 3 + 0.5px), transparent calc(200% / 3 - 0.5px), rgb(255 255 255 / 0.55) calc(200% / 3 - 0.5px), rgb(255 255 255 / 0.55) calc(200% / 3 + 0.5px), transparent calc(200% / 3 + 0.5px)),
    linear-gradient(to bottom, transparent calc(100% / 3 - 0.5px), rgb(255 255 255 / 0.55) calc(100% / 3 - 0.5px), rgb(255 255 255 / 0.55) calc(100% / 3 + 0.5px), transparent calc(100% / 3 + 0.5px), transparent calc(200% / 3 - 0.5px), rgb(255 255 255 / 0.55) calc(200% / 3 - 0.5px), rgb(255 255 255 / 0.55) calc(200% / 3 + 0.5px), transparent calc(200% / 3 + 0.5px));
}

.cropper__box:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.crop-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 40rem) {
  .crop-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.field__label--sm {
  font-size: var(--text-sm);
}