/* 标尺宽度随文档缩放，文字、刻度粗细与操作热区保持屏幕像素，避免低倍模糊。 */
.ruler-bar {
  height: 32px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}
.horizontal-ruler {
  position: absolute;
  top: 4px;
  height: 24px;
  box-sizing: border-box;
  background: #fff;
  border: 0;
  box-shadow: inset 0 0 0 1px #c6cbd2;
  transform: none;
}
.ruler-scale {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ruler-margin {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #d7d9de;
}
.ruler-tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 5px;
  border: 0;
  background: #72777e;
}
.ruler-tick.major {
  height: 9px;
  border: 0;
}
.ruler-tick.half {
  height: 7px;
}
.ruler-number {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font:
    10px/12px "Segoe UI",
    sans-serif;
  color: #555d68;
}
.horizontal-ruler .ruler-handle {
  position: absolute;
  width: 14px;
  min-width: 14px;
  height: 9px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: translateX(-50%);
  touch-action: none;
  cursor: ew-resize;
  z-index: 2;
}
.ruler-handle::before {
  content: "";
  display: block;
  width: 10px;
  height: 8px;
  margin: auto;
  background: #f8f9fc;
  border: 1px solid #667484;
  box-sizing: border-box;
}
.ruler-handle[data-ruler-handle="first"] {
  top: -2px;
}
.ruler-handle[data-ruler-handle="first"]::before {
  clip-path: polygon(0 0, 100% 0, 100% 35%, 50% 100%, 0 35%);
}
.ruler-handle[data-ruler-handle="hanging"],
.ruler-handle[data-ruler-handle="right"] {
  bottom: 6px;
}
.ruler-handle[data-ruler-handle="hanging"]::before,
.ruler-handle[data-ruler-handle="right"]::before {
  clip-path: polygon(50% 0, 100% 65%, 100% 100%, 0 100%, 0 65%);
}
.ruler-handle[data-ruler-handle="left"] {
  bottom: -2px;
  height: 8px;
}
.ruler-handle[data-ruler-handle="left"]::before {
  height: 6px;
}
.horizontal-ruler .ruler-handle:hover:not(:disabled),
.horizontal-ruler .ruler-handle:active:not(:disabled) {
  background: transparent;
}
.ruler-handle:hover::before,
.ruler-handle.is-dragging::before {
  background: #dceafb;
  border-color: #185abd;
}
.ruler-handle:disabled {
  opacity: 0.45;
  cursor: default;
}
.ruler-handle:focus-visible {
  outline: 2px solid #185abd;
  outline-offset: 1px;
}
.ruler-handle.is-mixed::before {
  background: #bbc4cf;
}
.ruler-guide {
  position: fixed;
  width: 0;
  border-left: 1px dashed #687d97;
  pointer-events: none;
  z-index: 15;
}
.ruler-value {
  position: fixed;
  padding: 3px 7px;
  border: 1px solid #bbc3ce;
  border-radius: 3px;
  color: #242424;
  background: #fff;
  box-shadow: 0 2px 6px #0002;
  font:
    12px/1.5 "Segoe UI",
    "Microsoft YaHei",
    sans-serif;
  pointer-events: none;
  z-index: 16;
}
@media (forced-colors: active) {
  .ruler-handle::before {
    background: ButtonFace;
    border-color: ButtonText;
  }
  .ruler-margin {
    background: GrayText;
  }
  .ruler-guide {
    border-color: Highlight;
  }
}