// CUSTOM RADIO BOXES
// Completely replaces native radiobox

.radio-group
  display: flex

.radio
  position: relative
  display: inline-block

  [type='radio']
    position: fixed
    top: -1px
    left: -1px
    width: 1px
    height: 1px
    overflow: hidden

  label
    display: block
    height: 34px
    min-width: 42px
    line-height: 34px
    text-align: center
    padding: 0 13px
    background-color: #f3f3f3
    box-shadow: inset 2px 1px 2px 1px rgba(50, 50, 50, 0.05)
    color: var(--color-font)
    cursor: pointer

  \:checked + label
    background-color: var(--color-primary)
    color: var(--color-lightwhite)
    box-shadow: inset -2px -1px 2px 1px rgba(255, 255, 255, 0.15)

  \:focus + label
    border-color: #3273dc
    box-shadow: 0 0 0.125em 0 rgba(50, 115, 220, 0.8)
    outline: 0

  [disabled] + label
    pointer-events: none
    border: none
    opacity: 0.6
    filter: grayscale(1)

.radio:first-child
  label
    border-top-left-radius: 4px
    border-bottom-left-radius: 4px

.radio:last-child
  label
    border-top-right-radius: 4px
    border-bottom-right-radius: 4px