.pressbooks-hfh-circle {
  border: 0.125rem solid var(--pressbooks-hfh-circle-color);
  width: var(--pressbooks-hfh-circle-width);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.pressbooks-hfh-circle--full {
  background-color: var(--pressbooks-hfh-circle-color);
  @media (forced-colors: active) {
    background-color: CanvasText;
  }
}
.pressbooks-hfh-circle--half {
  background-color: transparent;
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.0625rem;
    width: calc(var(--pressbooks-hfh-circle-width) - 0.125rem);
    height: calc((var(--pressbooks-hfh-circle-width) - 0.125rem) / 2);
    background-color: var(--pressbooks-hfh-circle-color);
    border-radius: 0 0 var(--pressbooks-hfh-circle-width)
      var(--pressbooks-hfh-circle-width);
  }
  @media (forced-colors: active) {
    &::after {
      background-color: CanvasText;
    }
  }
}
.pressbooks-hfh-circle--empty {
  background-color: transparent;
}