/*

* Pretty Check Radio
* 
* Requires pretty_checkradio.js
*
* Example DOM:
* div.pretty-checkradio
*   span.pretty-checkradio-layer
*   input.is-input
* 
* conf Object
* conf.$el $ DOM Object
*/

@import “../sadui”;

.pretty-checkradio {

@include inline-block;
@include user-select(none);

position: relative;//*crosses fingers*

cursor: pointer;

background: $colorInactive;

> * {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

// assume input type = radio|checkbox
input[type="radio"],
input[type="checkbox"] {
    z-index: $zTemplate + 2;
    @include opacity(0);
    background: $colorInactive;// for some reason gives layout
}

// This will be visible when input is checked to allow for smooth transitions
.pretty-checkradio-layer {
    z-index: $zTemplate + 1;
    background: $colorActive;
    display: none;
}

&.is-selected .pretty-checkradio-layer {
    background: $colorActive;
    display: block;
}

&.is-disabled .pretty-checkradio-layer {
    background: rgba($colorInactive, 0.5);
    display: block;
}

}