|
394 | 394 | margin-right: variables.$grid-unit-15; |
395 | 395 | transition: none; |
396 | 396 | border-radius: variables.$radius-round; |
397 | | - width: variables.$radio-input-size-sm; |
398 | | - height: variables.$radio-input-size-sm; |
399 | | - min-width: variables.$radio-input-size-sm; |
400 | | - max-width: variables.$radio-input-size-sm; |
| 397 | + width: variables.$radio-input-size; |
| 398 | + height: variables.$radio-input-size; |
| 399 | + min-width: variables.$radio-input-size; |
| 400 | + max-width: variables.$radio-input-size; |
401 | 401 | position: relative; |
402 | 402 |
|
403 | 403 | @media not (prefers-reduced-motion) { |
404 | 404 | transition: box-shadow 0.1s linear; |
405 | 405 | } |
406 | 406 |
|
407 | | - @include break-small() { |
408 | | - height: variables.$radio-input-size; |
409 | | - width: variables.$radio-input-size; |
410 | | - min-width: variables.$radio-input-size; |
411 | | - max-width: variables.$radio-input-size; |
| 407 | + &::after { |
| 408 | + content: ""; |
| 409 | + position: absolute; |
| 410 | + top: 50%; |
| 411 | + left: 50%; |
| 412 | + width: variables.$grid-unit-30; |
| 413 | + aspect-ratio: 1; |
| 414 | + transform: translate(-50%, -50%); |
412 | 415 | } |
413 | 416 |
|
414 | 417 | &:hover { |
|
417 | 420 |
|
418 | 421 | &:checked::before { |
419 | 422 | box-sizing: inherit; |
420 | | - width: math.div(variables.$radio-input-size-sm, 2); |
421 | | - height: math.div(variables.$radio-input-size-sm, 2); |
| 423 | + width: math.div(variables.$radio-input-size, 2); |
| 424 | + height: math.div(variables.$radio-input-size, 2); |
422 | 425 | position: absolute; |
423 | 426 | top: 50%; |
424 | 427 | left: 50%; |
|
428 | 431 |
|
429 | 432 | // This border serves as a background color in Windows High Contrast mode. |
430 | 433 | border: 4px solid currentColor; |
431 | | - |
432 | | - @include break-small() { |
433 | | - width: math.div(variables.$radio-input-size, 2); |
434 | | - height: math.div(variables.$radio-input-size, 2); |
435 | | - } |
436 | 434 | } |
437 | 435 |
|
438 | 436 | &:focus { |
|
0 commit comments