@use '../../variables' as *;

$b: '.rating-input';

#{$b} {
    align-items: center;
    display: inline-flex;
    margin-left: -2px;
    margin-right: -2px;

    &__star {
        cursor: pointer;
        padding-left: 2px;
        padding-right: 2px;

        &_active {
        }
    }

    &__star-input {
    }

    &__star-icon {
        fill: $rating-input-star-icon-color;
        height: 4px * 4;
        transition-duration: var(--duration-micro-s);
        transition-property: fill;
        transition-timing-function: var(--easing-standard);
        width: 4px * 4;

        #{$b}__star:hover &,
        #{$b}__star_active & {
            fill: $rating-input-star-icon-active-color;
        }
    }
}