:root {
  --sel-bg: #00ff00;
}

/* Keep native browser selection available as the accessibility/fallback layer. */
::selection {
  background: rgba(146, 114, 255, .40);
  background: color-mix(in srgb, var(--sel-bg, #9272ff) 40%, transparent);
  color: currentColor;
}

html.rounded-selection-enabled ::selection {
  background: transparent !important;
  color: currentColor !important;
}

/* Editable fields always keep their native selection behavior. */
:is(input, textarea, [contenteditable], [contenteditable] *)::selection,
html.rounded-selection-enabled :is(input, textarea, [contenteditable], [contenteditable] *)::selection {
  background: Highlight !important;
  color: HighlightText !important;
}

.rounded-selection-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2147483647;
  pointer-events: none;
  user-select: none;
}

.rounded-selection-shape {
  fill: rgba(146, 114, 255, .40);
  fill: color-mix(in srgb, var(--highlight-color, #9272ff) 40%, transparent);
  pointer-events: none;
}

/* Mobile/coarse-pointer UIs and forced-colors mode use native highlighting. */
@media (hover: none) and (pointer: coarse), (forced-colors: active) {
  .rounded-selection-overlay {
    display: none !important;
  }

  ::selection,
  html.rounded-selection-enabled ::selection {
    background: Highlight !important;
    color: HighlightText !important;
  }
}