.CDB-Shape-CircleItem {
  width: 13px;
  height: 13px;
  border: 1px solid var(--color-black);
  border-radius: 50%;

  &.is-small {
    width: 9px;
    height: 9px;
    margin: 0 auto;
  }

  &.is-blue {
    border: 1px solid var(--color-blue);
  }

  &.is-white {
    border: 1px solid white;
  }

  &.is-green {
    border: 1px solid var(--color-highlight);
  }

  &.is-red {
    border: 1px solid var(--color-error);
  }
}

.CDB-Shape-CircleItem--fill {
  &.is-blue {
    border: 1px solid var(--color-blue);
    background: var(--color-blue);
  }

  &.is-white {
    border: 1px solid white;
    background: white;
  }

  &.is-green {
    border: 1px solid var(--color-highlight);
    background: var(--color-highlight);
  }

  &.is-red {
    border: 1px solid var(--color-error);
    background: var(--color-error);
  }
}