.tb-rating {
    align-items: center;
    color: config('colors.grey');
    display: flex;
    flex-wrap: wrap;
    font-size: config('textSizes.sm');
}

.tb-rating__result {
    color: config('colors.positive');
    font-weight: config('fontWeights.bold');
    margin-right: config('margin.2');
}

.tb-rating__list {
    display: flex;
    // Font size is used as the basis for the bullet sizing
    font-size: config('textSizes.xs');
    list-style: none;
    margin: 0;
    padding: 0;
}

.tb-rating__item {
    background-color: config('colors.neutral-lightest');
    border: solid 1px config('colors.neutral-lighter');
    border-radius: 50%;
    height: 1em;
    margin-top: 0;
    margin-left: .085em;
    margin-right: .085em;
    width: 1em;
}

.tb-rating__item--full {
    background-color: config('colors.positive');
    border: solid 1px config('colors.positive-dark');
}

.tb-rating__item--half {
    background-color: config('colors.positive');
    border: solid 1px config('colors.positive-dark');
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: 0;
    border-top-left-radius: .5em;
    border-top-right-radius: 0;
    margin-right: .5em;
    width: .5em;

    &::after {
        background-color: config('colors.neutral-lightest');
        border: solid 1px config('colors.neutral-lighter');
        border-bottom-left-radius: 0;
        border-bottom-right-radius: .5em;
        border-top-left-radius: 0;
        border-top-right-radius: .5em;
        content: '';
        display: block;
        height: 1em;
        left: calc(.5em - 1px);
        position: relative;
        top: -1px;
        width: .5em;
    }
}

.tb-rating__votes {
    font-size: config('textSizes.xs');
    margin: 0;
    margin-left: config('margin.2');
}
