/*
    label_radio 及 label_checkbox 使用範例

    <label class="label_radio">
        <input type="radio" />
        <span class="label_icon"></span>
        <span class="label_text">要顯示在旁邊的文字</span>
    </label>

    <label class="label_checkbox">
        <input type="checkbox" />
        <span class="label_icon"></span>
        <span class="label_text">要顯示在旁邊的文字</span>
    </label>
*/


/*共用樣式*/
.label_radio,
.label_checkbox {
    margin-right: 10px;
}

    .label_radio:last-child,
    .label_checkbox:last-child {
        margin-right: 0;
    }

    /*label_icon共用樣式*/
    .label_radio .label_icon,
    .label_checkbox .label_icon {
        zoom: 0.8; /*label_icon 的大小縮放*/
        top: 2px; /*label_icon 的高低調整*/
        width: 18px;
        height: 18px;
        position: relative;
        display: inline-block;
        background-color: #fff;
        border: 1px solid #aaa;
        box-shadow: 0 1px 1px #ccc;
        background: #f7f7f7;
        background: linear-gradient(to bottom, #f7f7f7 0%,#f2f2f2 49%,#eaeaea 50%,#fefefe 100%);
        transition: linear 0.2s;
    }

    .label_radio .label_text,
    .label_checkbox .label_text {
        user-select: none;
    }

    /*label_radio的樣式*/
    .label_radio input[type=radio],
    .label_radio input[type=checkbox] {
        display: none;
    }

    .label_radio .label_icon {
        border-radius: 100%;
    }

    .label_radio input[type=radio]:checked ~ .label_icon,
    .label_radio input[type=checkbox]:checked ~ .label_icon {
        background: #b4e391;
        background: linear-gradient(to bottom, #b4e391 0%,#61c419 50%,#b4e391 100%);
        box-shadow: 0 1px 1px #ccc,0 0 0 3px #f7f7f7 inset;
    }

    /*label_checkbox的樣式*/
    .label_checkbox input[type=radio],
    .label_checkbox input[type=checkbox] {
        display: none;
    }

    .label_checkbox .label_icon {
        border-radius: 3px;
        transition: linear 0.2s;
    }

        .label_checkbox .label_icon::after {
            font-family: 'FontAwesome'; /*label_icon 的 icon 字體*/
            content: '\f00c'; /*label_icon 的 icon 字碼*/
            font-weight: 900;
            font-size: 30px;
            color: #61c419; /*label_icon 的 icon 顏色*/
            top: -8px; /*label_icon 的勾選前 icon 位置*/
            left: -6px; /*label_icon 的勾選前 icon 位置*/
            position: absolute;
            opacity: 0;
            transition: linear 0.2s;
        }

    .label_checkbox input[type=radio]:checked ~ .label_icon::after,
    .label_checkbox input[type=checkbox]:checked ~ .label_icon::after {
        font-size: 16px;
        top: 1px; /*label_icon 的勾選後 icon 位置*/
        left: 1px; /*label_icon 的勾選後 icon 位置*/
        opacity: 1;
    }

    .label_radio input[type=radio]:checked ~ .label_text,
    .label_radio input[type=checkbox]:checked ~ .label_text,
    .label_checkbox input[type=radio]:checked ~ .label_text,
    .label_checkbox input[type=checkbox]:checked ~ .label_text {
        color: #ff6a00;
    }

    /*disabled樣式*/
    .label_radio input[type=radio]:disabled ~ .label_icon,
    .label_radio input[type=checkbox]:disabled ~ .label_icon,
    .label_checkbox input[type=radio]:disabled ~ .label_icon,
    .label_checkbox input[type=checkbox]:disabled ~ .label_icon {
        cursor: not-allowed;
    }

        .label_radio input[type=radio]:disabled ~ .label_icon::before,
        .label_radio input[type=checkbox]:disabled ~ .label_icon::before,
        .label_checkbox input[type=radio]:disabled ~ .label_icon::before,
        .label_checkbox input[type=checkbox]:disabled ~ .label_icon::before {
            font-family: 'FontAwesome';
            content: '\f05e';
            font-weight: 900;
            font-size: 16px;
            color: #f00;
            top: 1px;
            left: 2px;
            position: absolute;
        }

        .label_radio input[type=radio]:disabled ~ .label_icon::after,
        .label_radio input[type=checkbox]:disabled ~ .label_icon::after,
        .label_checkbox input[type=radio]:disabled ~ .label_icon::after,
        .label_checkbox input[type=checkbox]:disabled ~ .label_icon::after {
            width: 100%;
            height: 100%;
            color: rgba(0, 0, 0, 0);
            content: 'd';
            background-color: #000;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.1;
        }

        .label_radio input[type=radio]:disabled ~ .label_icon::after,
        .label_radio input[type=checkbox]:disabled ~ .label_icon::after {
            border-radius: 100%;
        }

        .label_checkbox input[type=radio]:disabled ~ .label_icon::after,
        .label_checkbox input[type=checkbox]:disabled ~ .label_icon::after {
            border-radius: 3px;
        }