@use 'sass:list';

#guide {
    margin: 1em
}

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

.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: nth($list, $n);
        }
    }
}