:root {
    --react-rater-basic: #ccc;
    --react-rater-hover: #666;
    --react-rater-active: #f4e242;
}

.rater {
    display: inline-block;
    line-height: normal;

    & a {
        cursor: pointer;
        color: var(--react-rater-basic);
        position: relative;

        &.willBeActive {
            color: var(--react-rater-hover);
        }

        &.active {
            color: var(--react-rater-active);
        }

        &.halfActive span {
            color: var(--react-rater-active);
            position: absolute;
            left: 0;
            width: 50%;
            overflow: hidden;
        }

        &.disabled {
            cursor: default;
        }
    }
}