.view-radio-group
    display: inline-block
    font-size: $font-size-small
    vertical-align: middle
    &-vertical
        .view-radio-wrapper 
            display: block
            height: 30px
            line-height: 30px

// 普通状态
.view-radio-wrapper 
    font-size: $font-size-small
    vertical-align: middle
    display: inline-block
    position: relative
    white-space: nowrap
    margin-right: 8px
    cursor: pointer
    &-disabled
        cursor: $cursor-disabled

.view-radio
    display: inline-block
    margin-right: 4px
    white-space: nowrap
    outline: none
    position: relative
    line-height: 1
    vertical-align: middle
    cursor: pointer
    &:hover
        .view-radio-inner
            border-color: #bcbcbc

    &-inner
        box-sizing: content-box
        display: inline-block
        width: 14px
        height: 14px
        position: relative
        top: 0
        left: 0
        background-color: #fff
        border: 1px solid $border-color-base
        border-radius: 50%
        transition: all $transition-time $ease-in-out

        &:before
            position: absolute
            left 2px
            top -3px
            font-size 20px
            font-family: "Ionicons"
            font-weight: 600
            font-style: normal 
            content: "\f3fd"
            color #fff
            z-index: 1
            

        &:after
            position: absolute
            width: 14px
            height: 14px
            content ' '
            border-radius: 100%
            display: table
            border-top: 0
            border-left: 0
            background-color: $primary-color
            opacity: 0
            transition: all $transition-time $ease-in-out
            transform: scale(0)

    &-large
        font-size: $font-size-base
        & .view-radio-inner
            width: 16px
            height: 16px
            &:after
                width: 10px
                height: 10px

        &.view-radio-wrapper, & .view-radio-wrapper
            font-size: $font-size-base

    &-small
        & .view-radio-inner
            width: 12px
            height: 12px
            &:after
                width: 6px
                height: 6px


    &-input 
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
        z-index: 1
        opacity: 0
        cursor: pointer

// 选中状态
.view-radio-checked
    .view-radio-inner
        border-color: $primary-color
        &:after
            opacity: 1
            transform: scale(1)
            transition: all $transition-time $ease-in-out

    &:hover
        v.iew-radio-inner
            border-color: $primary-color

.view-raido-disabled
    cursor: $cursor-disabled
    .view-radio-input
        cursor: $cursor-disabled

    &:hover
        .view-radio-inner
            border-color: $border-color-base
    .view-radio-inner
        border-color: $border-color-base
        background-color: #f3f3f3
        &:after
            background-color: #cccccc

    .view-radio-disabled + span 
        color: #ccc

span.view-radio + * 
    margin-left: 2px
    margin-right: 2px

// 按钮样式
.view-radio-group-button
    font-size: 0
    -webkit-text-size-adjust:none

    .view-radio
        width: 0
        margin-right: 0

    .view-radio-wrapper
        display: inline-block
        height: $btn-circle-size
        line-height: $btn-circle-size - 2px
        margin: 0
        padding: 0 16px
        font-size: $font-size-small
        color: $btn-default-color
        transition: all $transition-time ease-in-out
        cursor: pointer
        border: 1px solid $border-color-base
        border-left: 0
        background: #fff

        > span 
            margin-left: 0

        &:before
            content: ''
            position: absolute
            width: 1px
            height: 100%
            left: -1px
            background: $border-color-base
            visibility: hidden
            transition: all $transition-time ease-in-out

        &:first-child 
            border-radius: $btn-border-radius 0 0 $btn-border-radius
            border-left: 1px solid $border-color-base
            &:before
                display: none

        &:last-child
            border-radius: 0 $btn-border-radius $btn-border-radius 0

        &:first-child:last-child
            border-radius: $btn-border-radius

        &:hover
            position: relative
            color: $primary-color

        .view-radio-inner,
        input
            opacity: 0
            width: 0
            height: 0

        &-checked
            background: #fff
            border-color: $primary-color
            color: $primary-color
            box-shadow: -1px 0 0 0 $primary-color

            &:first-child
                border-color: $primary-color
                box-shadow: none!important

            &:hover
                border-color: tint($primary-color, 20%)
                box-shadow: -1px 0 0 0 tint($primary-color, 20%)
                color: tint($primary-color, 20%)

            &:active
                border-color: shade($primary-color, 5%)
                box-shadow: -1px 0 0 0 shade($primary-color, 5%)
                color: shade($primary-color, 5%)

        &-disabled 
            border-color: $border-color-base
            background-color: $background-color-base
            cursor: $cursor-disabled
            color: #ccc

            &:first-child,
            &:hover 
                border-color: $border-color-base
                background-color: $background-color-base
                color: #ccc
            
            &:first-child 
                border-left-color: $border-color-base
            
        

        &-disabled.$radio-prefix-cls-wrapper-checked 
            color: #fff
            background-color: #e6e6e6
            border-color: $border-color-base
            box-shadow: none!important

.view-radio-group-button.view-radio-group-large .view-radio-wrapper
    height: $btn-circle-size-large
    line-height: $btn-circle-size-large - 2px
    font-size: $font-size-base


.view-radio-group-button.view-radio-group-small .view-radio-wrapper
    height: $btn-circle-size-small
    line-height: $btn-circle-size-small - 2px
    padding: 0 12px
    font-size: $font-size-small
    &:first-child 
        border-radius: $btn-border-radius-small 0 0 $btn-border-radius-small
    
    &:last-child 
        border-radius: 0 $btn-border-radius-small $btn-border-radius-small 0