/* Illustrator-inspired selection chrome. All dimensions are design choices;
   the target is measured from the live DOM, never from a screenshot. */
.xs-text-selection {
  --xs-selection-blue: #508dff;
  --xs-selection-cyan: #35e4e8;
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 0;
  color: var(--xs-selection-blue);
  background: transparent;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
  z-index: 2147483646;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 80ms linear;
}
.xs-text-selection[data-visible] { opacity: 1; visibility: visible; }
.xs-text-selection[data-activated] { color: var(--xs-selection-cyan); }
.xs-text-selection > i {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  box-sizing: border-box;
  border: 1px solid currentColor;
  background: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.xs-text-selection > i:nth-child(1) { left: 0; top: 0; }
.xs-text-selection > i:nth-child(2) { left: 50%; top: 0; }
.xs-text-selection > i:nth-child(3) { left: 100%; top: 0; }
.xs-text-selection > i:nth-child(4) { left: 100%; top: 50%; }
.xs-text-selection > i:nth-child(5) { left: 100%; top: 100%; }
.xs-text-selection > i:nth-child(6) { left: 50%; top: 100%; }
.xs-text-selection > i:nth-child(7) { left: 0; top: 100%; }
.xs-text-selection > i:nth-child(8) { left: 0; top: 50%; }
@media (prefers-reduced-motion: reduce) {
  .xs-text-selection { transition: none; }
}
@media (forced-colors: active) {
  .xs-text-selection { color: Highlight; box-shadow: none; }
  .xs-text-selection > i { background: Canvas; }
}
@media print { .xs-text-selection { display: none; } }