/* Cursor selection background */
.yRemoteSelection {
  background-color: var(--user-cursor-selection);
  padding-left: 1px;
  padding-right: 1px;
  border-radius: 2px;
}

/* Cursor caret */
.yRemoteSelectionHead {
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  border-left: 2px solid var(--user-cursor);
  border-top: 0.5px solid var(--user-cursor);
  border-radius: 4px;
}

.yRemoteSelectionHead::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  /* Transparent background to extend the hoverable area */
  background: transparent;
  /* Allow this area to capture hover events */
  pointer-events: all;
  /* Ensure the hover area is above the cursor */
  z-index: 10;
}

/* Cursor name */
.yRemoteSelectionHead::after {
  visibility: var(--name-visibility);
  opacity: var(--name-opacity);
  transform: scale(var(--name-scale));
  transform-origin: bottom left;
  transition:
    opacity 0.2s var(--ease-in-out-quad),
    visibility 0.2s var(--ease-in-out-quad),
    transform 0.2s var(--ease-in-out-quad);
  position: absolute;
  top: -1.4em;
  left: -2px;
  padding: 2px 6px;
  background-color: var(--user-cursor);
  color: #fcfcfc;
  border: 0;
  border-radius: 6px;
  border-bottom-left-radius: 0;
  line-height: normal;
  white-space: nowrap;
  font-size: 12px;
  font-family: "Inter Variable", "Inter", sans-serif;
  font-style: normal;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}

/* Show the username tag on hover */
.yRemoteSelectionHead:hover::after {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
