packages/styles/scss/base/forms/_radio.scss

   1 .radio {
   2         @extend .sr-only;
   3
   4         &-fakeradio {
   5                 @extend .checkbox-fakecheck;
   6
   7                 border-radius: 50%;
   8
   9                 &::before {
  10                         content: "";
  11                         inline-size: em(10);
  12                         block-size: em(10);
  13                         margin: auto;
  14                         border-radius: 50%;
  15                         background: transparent;
  16                         transform: scale(0);
  17                         transition: 0.15s easing(ease-out-cubic),
  18                                 0.15s transform easing(ease-out-back);
  19                 }
  20         }
  21
  22         &:hover + &-fakeradio {
  23                 border-color: var(--interaction-norm);
  24                 background-color: var(
  25                         --field-focus-background-color,
  26                         var(--background-norm)
  27                 );
  28         }
  29
  30         @supports not selector(:focus-visible) {
  31                 &:focus + &-fakeradio {
  32                         border-color: var(--interaction-norm);
  33                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  34                         background-color: var(--field-focus-background-color);
  35                         color: var(--field-focus-text-color);
  36                 }
  37
  38                 &:focus:hover + &-fakeradio {
  39                         border-color: var(--interaction-norm-hover);
  40                 }
  41         }
  42
  43         @supports selector(:focus-visible) {
  44                 &:focus-visible + &-fakeradio {
  45                         border-color: var(--interaction-norm);
  46                         box-shadow: 0 0 0 #{$focus-ring-size} var(--focus-ring);
  47                         background-color: var(--field-focus-background-color);
  48                         color: var(--field-focus-text-color);
  49                 }
  50
  51                 &:focus-visible:hover + &-fakeradio {
  52                         border-color: var(--interaction-norm-hover);
  53                 }
  54         }
  55
  56         &[aria-invalid="true"] + &-fakeradio {
  57                 border-color: var(--signal-danger);
  58                 background-color: var(--field-background-color);
  59         }
  60
  61         &[disabled] + &-fakeradio {
  62                 border-color: var(--field-disabled);
  63                 background-color: var(
  64                         --field-disabled-background-color,
  65                         var(--background-norm)
  66                 );
  67         }
  68
  69         /*
  70          * Checked state
  71          */
  72         &:checked + &-fakeradio {
  73                 &::before {
  74                         transform: scale(1);
  75                         background-color: var(--interaction-norm);
  76                 }
  77         }
  78
  79         @supports not selector(:focus-visible) {
  80                 &:checked:focus:hover + &-fakeradio {
  81                         border-color: var(--interaction-norm-hover);
  82
  83                         &::before {
  84                                 background-color: var(--interaction-norm-hover);
  85                         }
  86                 }
  87         }
  88
  89         @supports selector(:focus-visible) {
  90                 &:checked:focus-visible:hover + &-fakeradio {
  91                         border-color: var(--interaction-norm-hover);
  92
  93                         &::before {
  94                                 background-color: var(--interaction-norm-hover);
  95                         }
  96                 }
  97         }
  98
  99         &:checked[aria-invalid="true"] + &-fakeradio::before {
 100                 background-color: var(--signal-danger);
 101         }
 102
 103         &:checked[disabled] + &-fakeradio::before {
 104                 background-color: var(--field-disabled);
 105         }
 106
 107         /*
 108          * Modifiers
 109          */
 110         &--ontop &-fakeradio {
 111                 margin-block-start: 0;
 112         }
 113 }