// ------------------------------------
// STYLE RADIO BUTTON
// ------------------------------------
.style-picker {
    input[type="radio"] {
        visibility:hidden;
        display: none;
    }
    > label{
        margin-right:8px;
    }
    .style-picker-item, .menu-style-picker{
        padding: 11px;
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #ddd;
        margin-bottom: 10px;
        svg {
            vertical-align: middle;
            margin-right:10px;
        }
        label {
            font-weight:normal;
            margin-bottom: 0px;
            margin-right:5px;
        }
        &:hover {
            background-color: #f6f6f6;
            border-color: #8C8C8C;
            svg #shape {
                fill: #ababab;
            }
            svg #border {
                stroke: #ababab;
            }
        }


        &_small {
            padding: 6px;
            font-size: 85%;
        }
    }
}
// ------------------------------------
// MENU LAYOUT RADIO BUTTON CHECKED ---------------
// ------------------------------------
input:checked + .menu-style-picker {
    padding: 10px;
    border: 2px solid #428bca;
    background: #eff6fe;
    &:hover {
        border-color: #428bca;
        svg #outer {
            stroke: #428bca;
        }
        svg #inner{
            stroke: #428bca;
        }
    }
    svg #outer {
        stroke: #428bca;
    }
    svg #inner {
        stroke: #428bca;
    }
}

input:checked + .menu-style-picker {
    padding: 10px;
    border: 2px solid #428bca;
    background: #eff6fe;
    &:hover {
        border-color: #428bca;
        svg #outer {
            stroke: #428bca;
        }
        svg #inner{
            stroke: #428bca;
        }
    }
    svg #outer {
        stroke: #428bca;
    }
    svg #inner {
        stroke: #428bca;
    }
}


// ------------------------------------
// STYLE RADIO BUTTON CHECKED ---------------
// ------------------------------------
input:checked + .style-picker-item  {
    padding: 10px;
    border: 2px solid #428bca;
    background: #eff6fe;
    &:hover {
        border-color: #428bca;
        svg #shape {
            fill: #428bca;
        }
        svg #border {
            stroke: #428bca;
        }
    }
    svg #shape {
        fill: #428bca;
    }
    svg #border {
        stroke: #428bca;
    }
    &_small {
        padding: 5px;
        font-size: 85%;
    }
}



// ------------------------------------
// GRADIENT PICKER STYLING
// ------------------------------------
.gradient-wrapper {
    max-width: 300px;
    .kolorPicker {
        display: inline-block;
        & + .kolorPicker {
            display: none;
        }
    }
}

// ------------
// SOLID/GRADIENT CHECK BOX PREVIEWS
// ------------
.gradient-preview {
    width: 20px;
    height: 20px;
    margin-right: 3px;
    display: inline-block;
    vertical-align: bottom;
    border: 1px solid #ddd;
    border-radius: 350px;
    &.solid {
        background: rgb(239, 239, 239);
    }
    &.gradient {
        background: linear-gradient(to right, rgba(246,246,246,1) 0%,rgba(201,201,201,1) 100%);
    }
}

input:checked + .style-picker-item  {
    .gradient-preview {
        border-color:#428bca;
        &.solid {
            background: rgb(204, 228, 255);
        }
        &.gradient {
            background: linear-gradient(to right, rgba(239,246,254,1) 0%,rgba(169,208,252,1) 100%);
        }
    }
}





.gradient-preview-bar-wrapper {
    position: relative;

// ------------
// GRADIENT PREVIEW BAR
// ------------
.gradient-preview-bar {
    height: 25px;
    margin: 10px 30px 15px 0;
    position: relative;
    border:1px solid #ededed;
    display: none;


    &.visible {
        display: block;
    }
}




// ------------
// GRADIENT DIRECTION BUTTON
// ------------

.gradient-direction-wrapper {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;


    label {
        padding: 0;
    }


    input[type="checkbox"]{
        display: none;
    }

    .horizontal, .vertical {
    padding: 2px 8px;
    vertical-align: top;
    display: block;

    }

    .vertical {
        display: none;
    }


    input:checked {
        & ~  .vertical {
            display: block;
        }

        & ~ .horizontal {
            display: none;
        }

    }

}

}



// ------------
// SOLID/GRADIENT SHOW BAR WHEN GRADIENT IS PICKED
// ------------

.gradient-wrapper.gradient-active {

    // ------------
    // SHOW GRADIENT BAR AND SECOND PICKER
    // ------------
    .gradient-preview-bar, .kolorPicker + .kolorPicker, .gradient-direction-wrapper {
        display: block;
    }
    // ------------
    // HIDE APPLY COLOR BUTTONS
    // ------------
    .apply-color {
        display: none;
    }
}
