:where(html) { 
  /* Selected */
  --selected: var(--sl-color-primary-100); /* base color */
  --selected-contrast: var(--accent-contrast); /* Opposite of the base color; should be visible against the base color */
  --selected-shade: var(--accent-shade); /* slightly darker version of the base color */
  --selected-tint: var(--accent-tint);  /* slightly lighter version of the base color */
  --selected-text-color: var(--body-text-color); /* text color */
  --selected-border-color: var(--selected); /* border color */
}

:where(.selected) {
  color: var(--selected-text-color);
  background-color: var(--selected);
}
:where(.selected-color) {
  background-color: var(--selected);
}
:where(.selected-weak,
.selected-weak-bg) {
  background-color: var(--selected-tint);
}
:where(.selected-bg) {
  background-color: var(--selected);
}
:where(.selected-fill) {
  fill: var(--selected);
}
:where(.selected-stroke) {
  stroke: var(--selected);
}
.selected-box {
  color: var(--selected-contrast);
  background-color: var(--selected);
  border: var(--border-width-base) var(--border-style-base) var(--selected);
  border-radius: var(--border-radius-sharp);
}