.previewContainer {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

.foregroundImage,
.backgroundImage {
  pointer-events: auto;
  cursor: grab;
  user-select: none;

  position: absolute;
  z-index: 1;

  object-fit: contain;
}

.backgroundImage {
  filter: blur(0.125rem) brightness(0.75);
}

.foregroundImage {
  pointer-events: none;
  z-index: 3;
}

.previewMask {
  pointer-events: none;

  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.5);
  filter: blur(8px);
}

.cropArea {
  pointer-events: none;
  cursor: grab;
  user-select: none;

  position: absolute;
  z-index: 3;
  inset: 0.125rem;

  overflow: hidden;

  border-radius: 50%;

  box-shadow: 0 0 0.5rem #0004;
}

.confirmButton {
  box-shadow: 0 1px 2px var(--color-default-shadow);
}

.zoomSlider {
  flex: 1;
  margin: 0;
  margin-inline-end: 1rem;

  input[type="range"] {
    margin: 0;
  }
}

.bottomControls {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}