/* 
 *  Created on : 11.02.2017, 23:09:24
 *  @copyright : Samet Tarim
 *  @author    : Samet Tarim
 *  @link      : http://www.samet-tarim.de/
 */

.st-radio-image {

    position: relative;
    display: table;

    .mb-sf-left-image { background-image: url('../img/settings/left.png'); }
    .mb-sf-top-image { background-image: url('../img/settings/top.png'); }
    .mb-sf-right-image { background-image: url('../img/settings/right.png'); }
    .mb-sf-bottom-image { background-image: url('../img/settings/bottom.png'); }

    &-cart {

        display: inline-block;
        width: 100px;
        height: 100px;
        
        margin: .3em;
        
        border: 1px solid @mb;

        background-size: contain;
        background-repeat: no-repeat;

        -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
        -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
        filter: brightness(1.8) grayscale(1) opacity(.7);

        cursor: pointer;

        .transition(all 100ms ease-in);

        &:hover {

            -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
            -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
        }
    }

    label { 
        
        display: table-cell;
        margin-left: 7px;
        text-align: center;
        vertical-align: middle;
    }
    
    input[type="radio"] {
        
        visibility: hidden;
    }
    
    input {

        position: absolute;
        z-index: 999;
        margin: 5px 0 0 12px;

        &:active {

            opacity: 1;
        }
        
        &:hover {

            opacity: 1;
        }

        &:checked + .st-radio-image-cart {

            -webkit-filter: none;
            -moz-filter: none;
            filter: none;
            opacity: 1;
            
            border: 1px solid @mb;
        }
    }
}