.tb-rating {
    align-items: center;
    color: theme('colors.gray.500');
    display: flex;
    flex-wrap: wrap;
    font-size: theme('fontSize.sm');
}

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

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

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

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

.tb-rating__item--half {
    background-color: theme('colors.positive.500');
    border: solid 1px theme('colors.positive.600');
    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: theme('colors.neutral.100');
        border: solid 1px theme('colors.neutral.200');
        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: theme('fontSize.xs');
    margin: 0;
    margin-left: theme('margin.2');
}
