| @@ -9,25 +9,29 @@ | ||
| 9 | 9 | block-size: 20px; |
| 10 | 10 | padding: 0; |
| 11 | 11 | margin: 0; |
| 12 | 12 | box-sizing: border-box; |
| 13 | - background: #fff; | |
| 14 | - border: 1.5px solid theme.$control-border; | |
| 13 | + background: var(--cs-color-surface); | |
| 14 | + border: 1.5px solid var(--cs-color-border); | |
| 15 | 15 | border-radius: 5px; |
| 16 | 16 | box-shadow: 0 2px 2px rgb(0 0 0 / 5%); |
| 17 | 17 | cursor: pointer; |
| 18 | 18 | |
| 19 | 19 | &:focus { |
| 20 | - outline: 2px solid var(--wp-admin-theme-color); | |
| 20 | + box-shadow: none; | |
| 21 | 21 | } |
| 22 | 22 | |
| 23 | + &:focus-visible { | |
| 24 | + outline: 2px solid var(--cs-color-accent); | |
| 25 | + } | |
| 26 | + | |
| 23 | 27 | &::before { |
| 24 | 28 | content: none; |
| 25 | 29 | } |
| 26 | 30 | |
| 27 | 31 | &:checked { |
| 28 | - background: theme.$accent; | |
| 29 | - border-color: theme.$accent; | |
| 32 | + background: var(--cs-color-accent); | |
| 33 | + border-color: var(--cs-color-accent); | |
| 30 | 34 | |
| 31 | 35 | &::before { |
| 32 | 36 | content: ''; |
| 33 | 37 | inline-size: 20px; |
