abe33/awesome_form

.radios
  .input
    display: none

  .input + label
    text-align: left
    cursor: pointer
    padding: $padding_4
    z-index: 1
    padding-right: 0
    padding-left: 48px
    font-size: 16px
    min-height: 32px
    width: 100%

    +relative

    +before
      border-radius: 20px
      border: 1px solid $grey
      transition: border-width 0.4s
      box-shadow: inset 0 5px 10px -5px $grey_light

      +box(28px)
      +box-sizing
      +absolute(3px, 2px)

    &:hover:before
      border: 14px solid $grey
      transition: border-width 0.2s

  .radios-track
    +inset-box
    width: 32px
    position: absolute
    border-radius: 16px
    overflow: hidden
    top: 0
    left: 0
    margin-top: -3px
    padding-bottom: 2px
    +box-sizing(content-box)

  .radios-marker
    margin-top: 2px
    background: transparent
    right: 2px
    border-radius: 50%
    z-index: 10
    pointer-events: none
    +absolute(0,2px)
    +box-sizing

    &.visible
      background: $red_light

  &.binary
    .column
      padding: 0 4px

      @extend .column-xs-6
      .radios-track
        left: 4px

      &:first-child
        .radios-track
          right: 4px
          +absolute(0, auto)

        label
          padding-right: 48px
          padding-left: 0
          text-align: right

          &:before, &:after
            right: 2px
            left: initial

      label
        width: 100%

  &.has-errors
    .radios-track
      box-shadow: inset 0 1px 3px -1px $red

+upto-md
  .radios
    .input + label

      padding: 12px 12px 12px 44px
      border-radius: 3px

      +box
      +paper-box

      &:active
        +animation(touched 0.2s)


      +before
        background: $grey_lighter
        +absolute(4px, 8px)

      +after
        border-radius: 16px
        border: 0px solid $grey
        transition: border-width 0.4s, border-color 0.3s
        +box(28px)
        +box-sizing
        +absolute(4px, 8px)

    .input:checked + label
      +after
        border-width: 14px
        border-color: $red_light
        transition: border-width 0.2s, border-color 0.1s

    &.binary
      .column:last-child
        padding-right: 0

      .column:first-child
        padding-left: 0
        label
          padding-right: 44px

          +before-and-after
            right: 8px

  .slide-panel input[type=radio] + label
    margin: $padding_3