.rulers {
  --ruler-tick: color-mix(in srgb, var(--color-text) 30%, transparent);
  --ruler-range: color-mix(in srgb, var(--color-accent) 14%, transparent);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@media (width < 768px) {
  .rulers {
    display: none;
  }
}

.rulers__top,
.rulers__left {
  position: absolute;
  top: 0;
  left: 0;
  background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
  border: 0 solid var(--color-border);
  background-repeat: repeat-x;
}

.rulers__top {
  right: 0;
  height: calc(var(--ruler-size) + 1px);
  border-bottom-width: 1px;
}

.rulers__left {
  bottom: 0;
  width: calc(var(--ruler-size) + 1px);
  border-right-width: 1px;
}

.rulers__top {
  animation: ruler-top-in var(--duration-intro) var(--ease-out) backwards;
}

.rulers__left {
  animation: ruler-left-in var(--duration-intro) var(--ease-out) backwards;
}

@keyframes ruler-top-in {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes ruler-left-in {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.rulers__top {
  background-image:
    linear-gradient(to right, var(--ruler-tick) 1px, transparent 1px),
    linear-gradient(to right, var(--ruler-tick) 1px, transparent 1px),
    linear-gradient(to right, var(--ruler-tick) 1px, transparent 1px);
  background-size: 10px 3px, 50px 3px, 100px 4px; /* check:ignore */
  background-position: 0 100%, 0 calc(100% - 3px), 0 calc(100% - 6px); /* check:ignore */
}

.rulers__left {
  background-image:
    linear-gradient(to bottom, var(--ruler-tick) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ruler-tick) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ruler-tick) 1px, transparent 1px);
  background-size: 3px 10px, 3px 50px, 4px 100px; /* check:ignore */
  background-position: 100% 0, calc(100% - 3px) 0, calc(100% - 6px) 0; /* check:ignore */
  background-repeat: repeat-y;
}

.rulers__range {
  position: absolute;
  background: var(--ruler-range);
}

.rulers__top .rulers__range {
  top: 0;
  bottom: 0;
  left: var(--x1);
  width: calc(var(--x2) - var(--x1));
}

.rulers__left .rulers__range {
  left: 0;
  right: 0;
  top: var(--y1);
  height: calc(var(--y2) - var(--y1));
}

.rulers:not([data-ready]) .rulers__range {
  display: none;
}

.rulers__label {
  position: absolute;
  font-size: 0.5625rem; /* check:ignore */
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-text-secondary);
  opacity: 0.8;
}

.rulers__top .rulers__label {
  top: 2px; /* check:ignore */
  left: calc(var(--pos) + 3px); /* check:ignore */
}

.rulers__label--bound {
  color: var(--color-accent);
  opacity: 1;
}

.rulers__left .rulers__label {
  left: 3px; /* check:ignore */
  top: calc(var(--pos) + 3px); /* check:ignore */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}