codecheck

1
// core
2
.p-radiobutton {
3
    position: relative;
4
    display: inline-flex;
5
    user-select: none;
6
    vertical-align: bottom;
7
}
8

9
.p-radiobutton-input {
10
    cursor: pointer;
11
}
12

13
.p-radiobutton-box {
14
    display: flex;
15
    justify-content: center;
16
    align-items: center;
17
}
18

19
.p-radiobutton-icon {
20
    -webkit-backface-visibility: hidden;
21
    backface-visibility: hidden;
22
    transform: translateZ(0) scale(.1);
23
    border-radius: 50%;
24
    visibility: hidden;
25
}
26

27
.p-radiobutton.p-highlight .p-radiobutton-icon {
28
    transform: translateZ(0) scale(1.0, 1.0);
29
    visibility: visible;
30
}
31

32
// theme
33
.p-radiobutton {
34
    width: $radiobuttonWidth;
35
    height: $radiobuttonHeight;
36

37
    .p-radiobutton-input {
38
        appearance: none;
39
        position: absolute;
40
        top: 0;
41
        left: 0;
42
        width: 100%;
43
        height: 100%;
44
        padding: 0;
45
        margin: 0;
46
        opacity: 0;
47
        z-index: 1;
48
        outline: 0 none;
49
        border: $radiobuttonBorder;
50
        border-radius: 50%;
51
    }
52

53
    .p-radiobutton-box {
54
        border: $radiobuttonBorder;
55
        background: $inputBg;
56
        width: $radiobuttonWidth;
57
        height: $radiobuttonHeight;
58
        color: $textColor;
59
        border-radius: 50%;
60
        transition: $formElementTransition;
61
        outline-color: transparent;
62

63
        .p-radiobutton-icon {
64
            width: $radiobuttonIconSize;
65
            height: $radiobuttonIconSize;
66
            transition-duration: $transitionDuration;
67
            background-color: $radiobuttonIconActiveColor;
68
        }
69
    }
70

71
    &.p-highlight {
72
        .p-radiobutton-box {
73
            border-color: $radiobuttonActiveBorderColor;
74
            background: $radiobuttonActiveBg;
75
        }
76
    }
77

78
    &:not(.p-disabled) {
79
        &:has(.p-radiobutton-input:hover) {
80
            .p-radiobutton-box {
81
                border-color: $inputHoverBorderColor;
82
            }
83

84
            &.p-highlight {
85
                .p-radiobutton-box {
86
                    border-color: $radiobuttonActiveHoverBorderColor;
87
                    background: $radiobuttonActiveHoverBg;
88

89
                    .p-radiobutton-icon {
90
                        background-color: $radiobuttonIconActiveHoverColor;
91
                    }
92
                }
93
            }
94
        }
95

96
        &:has(.p-radiobutton-input:focus-visible) {
97
            .p-radiobutton-box {
98
                @include focused-input();
99
            }
100
        }
101
    }
102

103
    &.p-invalid > .p-radiobutton-box {
104
        @include invalid-input();
105
    }
106

107
    &.p-variant-filled {
108
        .p-radiobutton-box {
109
            background-color: $inputFilledBg;
110
        }
111

112
        &.p-highlight {
113
            .p-radiobutton-box {
114
                background: $radiobuttonActiveBg;
115
            }
116
        }
117

118
        &:not(.p-disabled) {
119
            &:has(.p-radiobutton-input:hover) {
120
                .p-radiobutton-box {
121
                    background-color: $inputFilledHoverBg;
122
                }
123

124
                &.p-highlight {
125
                    .p-radiobutton-box {
126
                        background: $radiobuttonActiveHoverBg;
127
                    }
128
                }
129
            }
130
        }
131
    }
132
}
133

134
.p-input-filled {
135
    .p-radiobutton {
136
        .p-radiobutton-box {
137
            background-color: $inputFilledBg;
138
        }
139

140
        &.p-highlight {
141
            .p-radiobutton-box {
142
                background: $radiobuttonActiveBg;
143
            }
144
        }
145

146
        &:not(.p-disabled) {
147
            &:has(.p-radiobutton-input:hover) {
148
                .p-radiobutton-box {
149
                    background-color: $inputFilledHoverBg;
150
                }
151

152
                &.p-highlight {
153
                    .p-radiobutton-box {
154
                        background: $radiobuttonActiveHoverBg;
155
                    }
156
                }
157
            }
158
        }
159
    }
160
}
161

162
@if ($highlightBg == $radiobuttonActiveBg) {
163
    .p-highlight {
164
        .p-radiobutton {
165
            .p-radiobutton-box {
166
                border-color: $radiobuttonIconActiveColor;
167
            }
168
        }
169
    }
170
}
171