| @import '../themes/themes'; |
| |
| radio-sk { |
| display: block; |
| margin: 0.4em; |
| } |
| |
| radio-sk span { |
| display: inline-block; |
| } |
| |
| radio-sk label { |
| display: flex; |
| align-items: center; |
| } |
| |
| radio-sk .icons { |
| color: var(--primary); |
| margin-right: 2px; |
| width: 20px; |
| height: 20px; |
| |
| .checked { |
| display: none; |
| } |
| .unchecked { |
| display: inline-block; |
| } |
| } |
| |
| radio-sk input { |
| position: absolute; |
| opacity: 0; |
| z-index: -1; |
| } |
| |
| radio-sk input:checked + .icons { |
| .checked { |
| display: inline-block; |
| } |
| .unchecked { |
| display: none; |
| } |
| } |
| |
| radio-sk input:focus + .icons { |
| outline: dashed 1px var(--outline); |
| outline-offset: 0px; |
| } |
| |
| radio-sk:hover label { |
| color: var(--outline); |
| } |
| |
| radio-sk[hidden] { |
| display: none; |
| } |
| |
| radio-sk input:disabled + .icons { |
| color: var(--disabled); |
| } |