codecheck

1
@use 'sass:math';
2

3
// core
4
.p-rating {
5
    position: relative;
6
    display: flex;
7
    align-items: center;
8
}
9

10
.p-rating-item {
11
    display: inline-flex;
12
    align-items: center;
13
    cursor: pointer;
14
}
15

16
.p-rating.p-readonly .p-rating-item {
17
    cursor: default;
18
}
19

20
// theme
21
.p-rating {
22
    gap: $inlineSpacing;
23

24
    .p-rating-item {
25
        outline-color: transparent;
26
        border-radius: 50%;
27
        
28
        .p-rating-icon {
29
            color: $ratingStarIconOffColor;
30
            transition: $formElementTransition;   
31
            font-size: $ratingIconFontSize;
32

33
            &.p-icon {
34
                width: $ratingIconFontSize;
35
                height: $ratingIconFontSize;
36
            }
37
    
38
            &.p-rating-cancel {
39
                color: $ratingCancelIconColor;
40
            }
41
        }
42

43
        &.p-focus {
44
            @include focused();
45
        }
46

47
        &.p-rating-item-active {
48
            .p-rating-icon {
49
                color: $ratingStarIconOnColor;
50
            }
51
        }
52
    }
53

54
    &:not(.p-disabled):not(.p-readonly) {
55
        .p-rating-item {
56
            &:hover {
57
                .p-rating-icon {
58
                    color: $ratingStarIconHoverColor;
59

60
                    &.p-rating-cancel {
61
                        color: $ratingCancelIconHoverColor;
62
                    }
63
                }
64
            }
65
        }
66
    }
67
}
68

69
@if ($highlightBg == $ratingStarIconOnColor) {
70
    .p-highlight {
71
        .p-rating {
72
            .p-rating-item {
73
                &.p-rating-item-active {
74
                    .p-rating-icon {
75
                        color: $highlightTextColor;
76
                    }
77
                }
78
            }
79
        }
80
    }
81
}