/*
Radio Buttons

Radio Buttons

Default styling for radio buttons

Markup:
<div>
    <form class="radio-group" style="display:inline-block;">
        <h2>Default:</h2>
        <div>
            <input type="radio" id="radioA" class="radio-group__btn" name="radio-groupA" checked/>
            <label for="radioA" class="radio-group__label">
                radio-group
            </label>
        </div>
        <div>
            <input type="radio" id="radioB" class="radio-group__btn" name="radio-groupA"/>
            <label for="radioB" class="radio-group__label">
                radio-group
            </label>
        </div>
        <div>
            <input type="radio" id="radioF" class="radio-group__btn" name="radio-groupA" disabled/>
            <label for="radioF" class="radio-group__label">
                radio-group
            </label>
        </div>
    </form>
    <form class="legacy-radio-group" style="display:inline-block;padding-left: 26px;">
        <h2>Legacy:</h2>
        <div>
            <input type="radio" id="radioC" class="radio-group__btn" name="radio-groupB" checked/>
            <label for="radioC" class="radio-group__label">
                legacy-radio-group
            </label>
        </div>
        <div>
            <input type="radio" id="radioD" class="radio-group__btn" name="radio-groupB"/>
            <label for="radioD" class="radio-group__label">
                legacy-radio-group
            </label>
        </div>
        <div>
            <input type="radio" id="radioE" class="radio-group__btn" name="radio-groupB" disabled/>
            <label for="radioE" class="radio-group__label">
                legacy-radio-group
            </label>
        </div>
    </form>
    <form class="legacy-radio-group--alt" style="display:inline-block;padding-left: 26px;">
        <h2>Legacy--alt:</h2>
        <div>
            <label  class="radio-group__label">
            <input type="radio"  class="radio-group__btn" name="radio-groupC" checked />
                <span>legacy-radio-group--alt</span>
            </label>
        </div>
        <div>
            <label class="radio-group__label">
            <input type="radio" class="radio-group__btn" name="radio-groupC"/>
                <span>legacy-radio-group--alt</span>
            </label>
        </div>
        <div>
            <label class="radio-group__label">
            <input type="radio" class="radio-group__btn" name="radio-groupC" disabled/>
                <span>legacy-radio-group--alt</span>
            </label>
        </div>
    </form>
</div>

Name: radioButton

Styleguide 3.3
*/
.radio-group {
}

.radio-group--nested {
    padding-left: 20px;
}

.radio-group__btn {
    position: absolute; //offscreen
    left: -999em;
}


input[type="radio"].radio-group__btn--vertical-align-middle {
    vertical-align: middle;
}

.radio-group__label {
    display: inline-block;
    position: relative;
    line-height: 27px;
    padding-left: 26px;
    cursor: pointer;

    // This is needed for a few pages that put text inputs inside radio button labels (wat)
    .errorSpan {
        display: inline-block;
    }
}

//helper classes that are  used to share styling between current and legacy buttons
.default-radio-button-styling {
    content: "";
    position: absolute;
    top: 20%;
    left: 0;
    margin-right: 10px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid @color-border-radio-button;
    background-color: #FFFFFF;
}

.selected-radio-button-styling {
    background-color: @color-buildium-green;
    border-color: @color-button-primary-border;
}

input[type="radio"]:disabled + label {
    color: @color-text-grey;
    opacity: @opacity-disabled;

    &:hover:before {
        border: 1px solid @color-border-radio-button;
    }
}

// Default way the radio button is selected
.radio-group__btn + .radio-group__label:before {
    .default-radio-button-styling;
}

// Hover state for unselected radio button
.radio-group__btn + .radio-group__label:hover:before {
    border-color: @color-border-radio-button-hover;
}

.radio-group__label--disabled {
    cursor: not-allowed;
}

.radio-group__btn + .radio-group__label--disabled:hover:before {
    border-color: @theme-grey12;
}

// Selected state for radio button
.radio-group__btn:checked + .radio-group__label:before {
    .selected-radio-button-styling;
}

/******** support for legacy pages **********/
.settings-swatch-row:before {
    margin-top: 5px;
}

// This is for old popups, DO NOT USE
.legacy-radio-group {
    input[type="radio"] {
        .radio-group__btn;
    }

    label {
        .radio-group__label;
    }

    input[type="radio"] + label:before {
        .default-radio-button-styling;
    }

    input[type="radio"] + label:hover:before {
        border-color: @color-border-radio-button-hover;
    }

    input[type="radio"]:checked + label:before {
        .selected-radio-button-styling
    }

    input[type="radio"]:disabled + label:hover:before {
        border: 1px solid @color-border-radio-button;
    }

    span[disabled] + label:before {
        .default-radio-button-styling;
        color: @color-text-grey;
        opacity: @opacity-disabled;

        &:hover:before {
            border: 1px solid @color-border-radio-button;
        }
    }
}

.legacy-radio-group--alt {
    input[type="radio"] {
        .radio-group__btn;
    }

    span {
        .radio-group__label;
    }

    input[type="radio"] + span:before {
        .default-radio-button-styling;
    }

    input[type="radio"] + span:hover:before {
        border-color: @color-border-radio-button-hover;
    }

    input[type="radio"]:checked + span:before {
        .selected-radio-button-styling
    }

    label {
        padding-left: 0px;
    }

    input[type="radio"]:disabled + span {
        color: @color-text-grey;
        opacity: @opacity-disabled;

        &:hover:before {
            border: 1px solid @color-border-radio-button;
        }
    }
}


.legacy-radio-group.horizontal {
    label {
        margin-right: 15px;
    }
}