// GROUPS OF RADIO BUTTONS
// 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, [readonly] + label
      pointer-events: none
      border: none
      opacity: 0.6
      filter: grayscale(1)

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

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