// Checkbox radio themes
//
// Styleguide {{guideIndex}}.0
@checkbox-radio-default-background-color:rgba(0,0,0,0.8);
@checkbox-radio-default-border-color:@checkbox-radio-default-background-color;
@checkbox-radio-default-color:rgba(0,0,0,0.3);
@checkbox-radio-default-check-color:#FFF;

.checkbox-radio-theme(
    @background-color:@checkbox-radio-default-background-color;
    @check-color:@checkbox-radio-default-check-color;
    @border-color:@checkbox-radio-default-background-color;
) {
    display: none;
    .square(@size){
        width:@size;
        height:@size;
    }
    &+label{
        position: relative;
        padding-left: 1em;
        &:before,&:after{
            content: '';
            display: inline-block;
            position:absolute;
            left:0;
            top:0.25em;
        }
        &:before{
            width: 0.6em;
            height: 0.6em;
            vertical-align: baseline;
            border:0.1em solid @border-color;
        }
        &:after {
            .square(0.35em);
            top:0.45em;
            left:0.2em;
        }
    }
    &[type="radio"]+label{
        &:before{
            border-radius:50%;
        }
        &:after{
            border-radius:50%;
        }
    }
    &[type="radio"][checked],
    &[type="radio"]:checked{
        +label{
        }
    }
    &[type="checkbox"][checked],
    &[type="checkbox"]:checked{
        +label{
            &:after{
            }
        }
    }
}

{{#each themes}}
// Checkbox radio theme {{themeName}}
//
// Generated with config: <i>{{{_description}}}</i>
//
// .checkbox-radio-theme-{{themeName}} - Normal style.
// .checkbox-radio-theme-{{themeName}}-hover - Hover style.
// .checkbox-radio-theme-{{themeName}}-active - Active style.
//
// Markup:
// <span><input type="radio" class="checkbox-radio-theme-{{themeName}} {$modifiers}"/><label>Radio</label></span>
// <span><input type="radio" class="checkbox-radio-theme-{{themeName}} {$modifiers}" checked/><label>Checked radio</label></span>
// <span><input type="checkbox" class="checkbox-radio-theme-{{themeName}} {$modifiers}"/><label>Checkbox</label></span>
// <span><input type="checkbox" class="checkbox-radio-theme-{{themeName}} {$modifiers}" checked/><label>Checked checkbox</label></span>
//
// Styleguide {{../guideIndex}}.{{themeIndex}}
.checkbox-radio-theme-{{themeName}}(
    @background-color:@checkbox-radio-default-background-color;
    @check-color:@checkbox-radio-default-check-color;
    @border-color:@checkbox-radio-default-border-color;
    ) {
    .checkbox-radio-theme(@background-color;);

    &+label{
        position: relative;
        padding-left: 1em;
        &:before{
        {{#if hasBackground}}
            background-color:@background-color;
        {{/if}}
        }
        &:after{
            opacity: 0.1;
            {{#if hasBackground}}
                background-color:@check-color;
            {{else}}
                background-color:@border-color;
            {{/if}}
        }
        &:hover{
            &:after{
                opacity: 0.75;
            }
        }
    }

    &[type="checkbox"][checked],
    &[type="checkbox"]:checked,
    &[type="radio"][checked],
    &[type="radio"]:checked{
        +label{
            &:after{
                {{#if hasBackground}}
                    background-color:@check-color;
                {{else}}
                    background-color:@border-color;
                {{/if}}
                opacity: 1;
            }
            &:hover{
                &:after{
                    opacity: 1;
                }
            }
        }
    }
}
{{/each}}