@require('./variables.styl');

.k-radio
    display inline-flex
    align-items center
    cursor pointer
    vertical-align middle
    .k-wrapper
        display inline-block
        width $radio-width
        height $radio-width
        vertical-align middle
        border 1px solid $radio-border-color
        border-radius 50%
        transition all $transition 
        position relative
        background $radio-bg-color
        flex 0 0 auto
        // inner
        &:before
            content ""
            display block
            position absolute
            width $radio-inner-width
            height $radio-inner-width
            top 50%
            left 50%
            margin-left s('-%s', $radio-inner-width / 2)
            margin-top @margin-left
            border-radius 50%
            background-color $radio-checked-color
            transform scale(0)
            transition all $transition 

    input
        width 100%
        height 100%
        opacity 0
        cursor pointer
        position absolute
    .k-text
        vertical-align middle
        display inline-block
        margin-left $radio-text-margin-left
        flex 0 1 auto

    // checked
    &.k-checked
        .k-wrapper
            border-color $radio-checked-color
            &:before
                transform scale(1)
    // focus
    &:focus
        outline none
        .k-wrapper
            border-color $radio-checked-color

    // disabled
    &.k-disabled
        color $radio-disabled-color
        cursor not-allowed
        .k-wrapper
            border-color $radio-disabled-border-color
            background $radio-disabled-bg-color
            &:before
                background $radio-disabled-inner-color


requireTheme('radio')