/* ============================================
   Measure tool easter egg
   click and drag anywhere to reveal a measurement frame
   ============================================ */

.measure-frame {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 120ms ease-out;
  --measure-color: #2db4ef;
}
.measure-frame.active {
  opacity: 1;
}
.measure-frame.fading {
  transition: opacity 280ms ease-out;
  opacity: 0;
}

.measure-frame .fill {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--measure-color) 15%, transparent);
  border: 1px solid var(--measure-color);
  backdrop-filter: url(#measure-pixelate);
  -webkit-backdrop-filter: url(#measure-pixelate);
}

.measure-frame .corner {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--bg);
  border: 1px solid var(--measure-color);
  border-radius: 50%;
}
.measure-frame .corner.tl { top: -4px; left: -4px; }
.measure-frame .corner.tr { top: -4px; right: -4px; }
.measure-frame .corner.bl { bottom: -4px; left: -4px; }
.measure-frame .corner.br { bottom: -4px; right: -4px; }

.measure-frame .label {
  position: absolute;
  font-family: "Geist Mono", "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--measure-color);
  background: var(--bg);
  padding: 2px 6px;
  white-space: nowrap;
  line-height: 1;
}
.measure-frame .label.width {
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
}
.measure-frame .label.height {
  top: 50%;
  right: -8px;
  transform: translate(100%, -50%);
}