﻿.toggle-radio {
    background: #E8E4DE;
    /*border: 1px solid #e31e1e*/
}

.toggle-radio label {
    display: inline-block;
    background: #ffffff; /* 這裡是未選取時的背景色 */    
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    margin-right: 5px;
    text-align: center;
}

.toggle-radio input:checked + label {
    background: #add8e6;
    border: 1px solid #ccc
}


/* 選取時，radio 按鈕內加上 ✔ */
    .toggle-radio input:checked + label::before {
        content: "✔";
        font-size: 14px;
        font-weight: bold;
        color: #000;
        text-align: center;
        line-height: 18px;
        background-color: #add8e6;
    }

.toggle-radio input + label:not(:last-of-type) {    
    border-right: 1px solid #ccc;
}

.toggle-radio {
    border-radius: 4px
}

.toggle-radio {
    display: inline-flex
}

.toggle-radio  input[type=radio] {
    display: none
}

.toggle-radio  input[disabled] + label {
    opacity: .5
}

.toggle-radio  input[disabled] + label:hover {
    cursor: not-allowed
}

.toggle-radio input + label {
    display: inline-block;
    margin-bottom: 0;
    padding: 5px 10px;
    float: left;
    cursor: pointer;
    border: 1px solid #ccc;
}

.toggle-radio  input:checked + label {
    transition: background 300ms linear
}

.toggle-radio[data-style=rounded] {
    border-radius: 500px
}

.toggle-radio[data-style=square] {
    border-radius: 0
}

.toggle-radio[data-color=red]  input:checked + label {
    background: rgba(231,76,60,.6)
}

.toggle-radio[data-color=orange]  input:checked + label {
    background: rgba(230,126,34,.6)
}

.toggle-radio[data-color=yellow]  input:checked + label {
    background: rgba(241,196,15,.6)
}

.toggle-radio[data-color=green]  input:checked + label {
    background: rgba(46,204,113,.6)
}

.toggle-radio[data-color=blue]  input:checked + label {
    background: rgba(52,152,219,.6)
}

.toggle-radio[data-color=purple]  input:checked + label {
    background: rgba(155,89,182,.6)
}

.toggle-radio[data-color=gray]  input:checked + label {
    background: rgba(85,85,85,.6)
}
