@use "sass:list";

#guide {
  margin: 1em;
}

#legend {
  display: flex;
  justify-self: center;
  gap: 3ch;
  * {
    margin: 2px;
  }
}

.circle {
  &::before {
    border-radius: 7.5%;
    width: 2.5ch;
    height: 2.5ch;
    display: inline-block;
    content: "";
    vertical-align: middle;
    margin-right: 3px;
  }

  $list: (red, yellow, green);

  @for $n from 1 through 3 {
    &:nth-of-type(#{$n})::before {
      background-color: list.nth($list, $n);
    }
  }
}