| 1 |
@use 'theme'; |
| 2 |
|
| 3 |
@mixin canonical { |
| 4 |
appearance: none; |
| 5 |
display: inline-grid; |
| 6 |
place-content: center; |
| 7 |
vertical-align: middle; |
| 8 |
inline-size: 20px; |
| 9 |
block-size: 20px; |
| 10 |
padding: 0; |
| 11 |
margin: 0; |
| 12 |
box-sizing: border-box; |
| 13 |
background: var(--cs-color-surface); |
| 14 |
border: 1.5px solid var(--cs-color-border); |
| 15 |
border-radius: 5px; |
| 16 |
box-shadow: 0 2px 2px rgb(0 0 0 / 5%); |
| 17 |
cursor: pointer; |
| 18 |
|
| 19 |
&:focus { |
| 20 |
box-shadow: none; |
| 21 |
} |
| 22 |
|
| 23 |
&:focus-visible { |
| 24 |
outline: 2px solid var(--cs-color-accent); |
| 25 |
} |
| 26 |
|
| 27 |
&::before { |
| 28 |
content: none; |
| 29 |
} |
| 30 |
|
| 31 |
&:checked { |
| 32 |
background: var(--cs-color-accent); |
| 33 |
border-color: var(--cs-color-accent); |
| 34 |
|
| 35 |
&::before { |
| 36 |
content: ''; |
| 37 |
inline-size: 20px; |
| 38 |
block-size: 20px; |
| 39 |
margin: 0; |
| 40 |
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat; |
| 41 |
} |
| 42 |
} |
| 43 |
} |
| 44 |
|
