codecheck

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

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

13
.p-togglebutton .p-button {
14
    flex: 1 1 auto;
15
}
16

17
// theme
18
.p-togglebutton {
19
    .p-togglebutton-input {
20
        appearance: none;
21
        position: absolute;
22
        top: 0;
23
        left: 0;
24
        width: 100%;
25
        height: 100%;
26
        padding: 0;
27
        margin: 0;
28
        opacity: 0;
29
        z-index: 1;
30
        outline: 0 none;
31
        border: $toggleButtonBorder;
32
        border-radius: $borderRadius;
33
    }
34

35
    .p-button {
36
        background: $toggleButtonBg;
37
        border: $toggleButtonBorder;
38
        color: $toggleButtonTextColor;
39
        transition: $formElementTransition;
40
        outline-color: transparent;
41

42
        .p-button-icon-left,
43
        .p-button-icon-right {
44
            color: $toggleButtonIconColor;
45
        }
46
    }
47

48
    &.p-highlight {
49
        .p-button {
50
            background: $toggleButtonActiveBg;
51
            border-color: $toggleButtonActiveBorderColor;
52
            color: $toggleButtonTextActiveColor;
53

54
            .p-button-icon-left,
55
            .p-button-icon-right {
56
                color: $toggleButtonIconActiveColor;
57
            }
58
        }
59
    }
60

61
    &:not(.p-disabled) {
62
        &:has(.p-togglebutton-input:hover) {
63
            &:not(.p-highlight) {
64
                .p-button {
65
                    background: $toggleButtonHoverBg;
66
                    border-color: $toggleButtonHoverBorderColor;
67
                    color: $toggleButtonTextHoverColor;
68

69
                    .p-button-icon-left,
70
                    .p-button-icon-right {
71
                        color: $toggleButtonIconHoverColor;
72
                    }
73
                }
74
            }
75

76
            &.p-highlight {
77
                .p-button {
78
                    background: $toggleButtonActiveHoverBg;
79
                    border-color: $toggleButtonActiveHoverBorderColor;
80
                    color: $toggleButtonTextActiveHoverColor;
81

82
                    .p-button-icon-left,
83
                    .p-button-icon-right {
84
                        color: $toggleButtonIconActiveHoverColor;
85
                    }
86
                }
87
            }
88
        }
89

90
        &:has(.p-togglebutton-input:focus-visible) {
91
            .p-button {
92
                @include focused-input();
93
            }
94
        }
95
    }
96

97
    &.p-invalid > .p-button {
98
        @include invalid-input();
99
    }
100
}