/* Copyright (C) 2016 NooBaa */

radio-btn {
    @size: 18px;
    @radius: 8px;
    display: block;
    vertical-align: bottom;
    white-space: nowrap;
    line-height: 40px;

    label {
        display: inline-block;
        cursor: default;

        &:focus {
            background-color: red;
        }
    }

    .radio-knob {
        width: @radius * 2;
        height: @radius * 2;
        vertical-align: middle;
        cursor: @cursor-pointer;

        > .outer-circle {
            cx: @radius;
            cy: @radius;
            r: @radius - 1;
            stroke: rgb(var(--color17));
            fill: none;
        }

        > .inner-circle {
            cx: @radius;
            cy: @radius;
            r: 0;
            stroke: none;
            fill: rgb(var(--color20));
            transition: all 350ms ease-out;
        }
    }

    .radio-label {
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
        color: rgb(var(--color17));
        cursor: @cursor-pointer;
    }

    input {
        .hide();

        &:focus, &:active {
            ~ .radio-knob > .outer-circle {
                stroke: rgb(var(--color20));
            }
        }

        &:checked ~ .radio-knob > .inner-circle {
            r: @radius - 4;
        }

        &:disabled {
            ~ .radio-knob > .outer-circle {
                stroke: rgb(var(--color09));
            }

            &:checked ~ .radio-knob > .inner-circle {
                fill: rgb(var(--color09));
            }

            ~ .radio-label {
                color: rgb(var(--color09));
                opacity: .3;
            }

            ~ .radio-knob, ~ .radio-label {
                cursor: default;
            }
        }
    }

}
