@keyframes spin {
  from { transform: rotate(0) }
  to { transform: rotate(360deg) }
}

input[type="radio"]
  padding: 0
  margin: 0
  position: absolute
  left: -8000px

  & + span
    display: inline-block
    min-width: 18px
    max-width: 100%
    min-height: 18px
    font-size: inherit
    text-overflow: ellipsis
    padding-left: 28px
    position: relative
    cursor: pointer
    overflow: hidden
    box-sizing: border-box

    &:before
      content: ""
      display: inline-block
      width: 16px
      height: 16px
      background: #fff
      transition: background .1s
      border: 1px solid #ccc
      border-radius: 50%
      position: absolute
      left: 0
      top: 0

    &:hover:before
      border-color: #fedf6f

    &:after
      content: ""
      display: none
      width: 8px
      height: 8px
      background-color: #000
      border-radius: 50%
      transform: translate(5px, 5px)
      position: absolute
      left: 0
      top: 0

  &:checked

    & + span

      &:before
        width: 18px
        height: 18px
        background: #fedf6f
        border: none

      &:after
        display: inline-block

  &[disabled] + span
    cursor: default
    opacity: .35
    filter: grayscale(100%)

  &.busy + span:after
    width: 9px
    height: 9px
    background-color: transparent
    border: 1px solid #000
    border-top: none
    border-right: none
    border-radius: 50%
    animation: spin 1s linear infinite
    left: 4px
    top: 4px
