@import '../../../styles/fills';
@import '../../../styles/mixins';
@import '../../../styles/definitions/typography';
@import '../../../styles/definitions/colors';

// Local Variables
$rating-input-label-spacing: 25px;

.ratingInput {

    &_wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    &_control {
        &--hidden {
            display: none;
        }
    }

    &_score {
        position: relative;
        display: flex;
        align-items: center;
    }

    &_star {
        cursor: pointer;
        display: flex;
        align-items: center;

        &:not(:last-of-type) {
            margin-right: 4px;
        }
    }

    &_label {
        @include text-4;
        position: absolute;
        left: calc(100% + #{$rating-input-label-spacing});
        top: 50%;
        transform: translateY(-50%);
        line-height: 25px;
    }

    &_positive {
        height: 16px;

        &--rating1 {
            fill: $rating-1-color;
        }
        &--rating2 {
            fill: $rating-2-color;
        }
        &--rating3 {
            fill: $rating-3-color;
        }
        &--rating4 {
            fill: $rating-4-color;
        }
        &--rating5 {
            fill: $rating-5-color;
        }
    }
    &_neutral {
        height: 16px;
        @include fill-midGray;
    }
}
