.woswidgets-marker {
  /* Reset letter-spacing so the Marker content doesn’t appear off-center when nested in other elements */
  letter-spacing: 0;
  line-height: normal;
}
.woswidgets-marker-circle::before {
  background-color: var(--gray-a4);
}

.woswidgets-marker[data-accent-color] {
  color: var(--accent-a11);
}
.woswidgets-marker[data-accent-color] .woswidgets-marker-circle::before {
  background-color: var(--accent-a4);
}

.woswidgets-marker {
  color: var(--gray-11);
}

.woswidgets-marker-circle {
  position: relative;
  text-align: center;
  user-select: none;
  height: 1em;
  min-width: 1em;
  padding-left: 0.05em;
  padding-right: 0.05em;
  box-sizing: border-box;

  /* Would be easier to use "inline-flex", but that messes up copy-pasted text formatting */
  display: inline-block;

  /* Align middle of the element with the baseline plus half the x-height of the parent */
  vertical-align: middle;

  /* Add the missing half of the x-height to align with the middle of the parent */
  top: -0.11em;

  /* Collapse own line height so it doesn't influence the inner element position */
  line-height: 0;
}

.woswidgets-marker-circle::before {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 1em;
}

.woswidgets-marker-circle svg {
  width: 1.125em;
  height: 1.125em;
}

.woswidgets-marker-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: calc(0.8em * var(--marker-font-size-adjust, 1));
  font-weight: var(--marker-font-weight, bold);
  line-height: 1;
  transform: translateY(-50%);
  top: 50%;

  /* We are trying to achieve "cursor: default", but also have the pointer finger cursor when Marker is inside a link */
  /* Its ::before element will get pointer events anyway, so we are just getting rid of the text cursor on content. */
  pointer-events: none;
}

.woswidgets-marker-hidden {
  /* Make the text visually hidden without breaking copy-paste */
  font-size: 0;
  line-height: 0;

  /* Prevent the dot from making it into copy-pasted text without the marker */
  user-select: none;

  /* Prevent copy-pasted whitespace from being collapsed when used in lists */
  white-space: pre;
}