:root {
  --bs-font-sans-serif: 'Fira Sans', sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-font-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dropdown-menu {
  --bs-dropdown-min-width: 15rem;
}

.cluster-graph-stage {
  height: clamp(28rem, 68svh, 48rem);
}

#cluster-graph-canvas {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.photo-preview-image {
  max-height: 65svh;
}

.cluster-face-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 7rem));
  gap: .5rem;
  justify-content: start;
}

@media (max-width: 575.98px) {
  .cluster-face-grid {
    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  }
}

[data-image-toolbar-handle] {
  touch-action: none;
}

.image-comparison {
  --image-comparison-position: 50%;
}

.image-comparison-original {
  clip-path: inset(0 calc(100% - var(--image-comparison-position)) 0 0);
}

.image-comparison-divider {
  left: var(--image-comparison-position);
  width: 2px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  transform: translateX(-1px);
}

.image-comparison-range {
  appearance: none;
  left: -1rem;
  width: calc(100% + 2rem);
  height: 2.5rem;
  transform: translateY(-50%);
  cursor: ew-resize;
  touch-action: none;
}

.image-comparison-range::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}

.image-comparison-range::-webkit-slider-thumb {
  appearance: none;
  width: 2rem;
  height: 2rem;
  margin-top: calc(1px - 1rem);
  border: 0;
  background: transparent;
}

.image-comparison-range::-moz-range-track {
  height: 2px;
  background: transparent;
}

.image-comparison-range::-moz-range-thumb {
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
}

.image-comparison-range:focus-visible {
  outline: none;
}

.image-comparison-handle {
  left: var(--image-comparison-position);
  width: 2rem;
  height: 2rem;
  border: 2px solid #fff;
  background: rgba(33, 37, 41, .82);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  transform: translate(-50%, -50%);
}

.image-comparison-range:focus-visible + .image-comparison-handle {
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .4), 0 1px 4px rgba(0, 0, 0, .55);
}