- // disabled checkboxes have a gray background
- &:disabled + label::before {
- cursor: default;
- background-color: @colorGray14;
- border-color: @colorGray14;
+ // `:focus` has to come first, otherwise a specificity race with `:hover:focus` etc is necessary
+ &:focus + label:before {
+ border-color: @colorProgressive;
+ box-shadow: @boxShadowWidgetFocus;
+ }
+
+ &:hover + label:before {
+ border-color: @colorProgressive;
+ }
+
+ &:active + label:before {
+ background-color: @colorProgressiveActive;
+ border-color: @borderColorInputBinaryActive;
+ box-shadow: @boxShadowInputBinaryActive;
+ }
+
+ &:checked {
+ & + label:before {
+ background-color: @backgroundColorInputBinaryChecked;
+ border-color: @borderColorInputBinaryChecked;
+ }
+
+ &:focus + label:before {
+ background-color: @backgroundColorInputBinaryChecked;
+ border-color: @borderColorInputBinaryChecked;
+ box-shadow: @boxShadowProgressiveFocus;
+ }
+
+ &:hover + label:before {
+ background-color: @colorProgressiveHighlight;
+ border-color: @colorProgressiveHighlight;
+ }
+
+ &:active + label:before {
+ background-color: @backgroundColorInputBinaryActive;
+ border-color: @borderColorInputBinaryActive;
+ }
+ }