<div>
  <label for="f-option" class="l-radio">
    <input type="radio" id="f-option" name="selector" tabindex="1">
    <span>First</span>
  </label>
  <label for="s-option" class="l-radio">
    <input type="radio" id="s-option" name="selector" tabindex="2">
    <span>Second</span>
  </label>
    <label for="t-option" class="l-radio">
    <input type="radio" id="t-option" name="selector" tabindex="3">
    <span>Third</span>
  </label>
</div>

$primary: #6743ee
$seconday: #9F9F9F

body
  font-family: sans-serif
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center

*
  box-sizing: border-box

.l-radio
  padding: 6px
  border-radius: 50px
  display: inline-flex
  cursor: pointer
  transition: background .2s ease
  margin: 8px 0
  -webkit-tap-highlight-color: transparent
  
  &:hover,
  &:focus-within
    background: rgba($seconday,.1)
  
  input
    vertical-align: middle
    width: 20px
    height: 20px
    border-radius: 10px
    background: none
    border: 0
    box-shadow: inset 0 0 0 1px $seconday
    box-shadow: inset 0 0 0 1.5px $seconday
    appearance: none
    padding: 0
    margin: 0
    transition: box-shadow 150ms cubic-bezier(.95,.15,.5,1.25)
    pointer-events: none
  
    &:focus
      outline: none
    
    &:checked
      box-shadow: inset 0 0 0 6px $primary
    
  span
    vertical-align: middle
    display: inline-block
    line-height: 20px
    padding: 0 8px