/*CONVERT RADIO BUTTONS TO IMAGES*/

/*Some special HTML and CSS trickery which does the following:
  -hides the standard radio button circles
  -allow images (labels) to receive the input click which would select a radio button
   for attribute of <label> needs to match id attribute of <input>
  -style the image to indicate which radio button is selected

  CSS background image method is preferred. iOS Safari does not like <img> inside <label>.
  HTML structure is roughly like this if using CSS background image property to supply the image:
  <div class="option-selector">
    <input id="option1"/>
    <label for="option1"
           class="option-label"
           ng-style="{'background-image': 'url(./img/{{option.id}}.jpg)'}">
    </label>
    <p>Option Caption</p>
  </div>

  HTML structure is roughly like this if using an <img> tag to supply the image:
  <div class="option-selector">
    <input id="option1"/>
    <label for="option1"
           class="option-label">
      <img src="..."></img>
    </label>
    <p>Option Caption</p>
  </div>
*/

.option-selector input,
.option-selector input[type="radio"],
.option-selector input[type="radio"]:after{
    margin:0;
    padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    display:none;
    width:0;
    height:0;
}
.option-selector input:active +.option-label{
    opacity: 1;
}
.option-selector input:checked +.option-label{
    border: 1px solid #73CC21;
    box-shadow: 0 0 4px #73CC21, 1px 1px 3px #999999 inset;
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}

.option-selector input:disabled +.option-label{
    cursor: not-allowed;
    opacity: 0.3;
}
.option-selector p{
    min-height: 20px;
}
.option-selector .opt-caption-sm{
    min-height: 20px;
}
.option-label{
    cursor: pointer;
    background: whitesmoke no-repeat center / contain;
    background-origin: content-box;
    padding: 5px;
    width: 100%;
    display:inline-block;
    border-radius: 3px;
    border: 1px solid #999999;
    box-shadow: 1px 1px 3px #999999;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    /*-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);*/
}
.option-label:hover{
    -webkit-filter: brightness(0.9) grayscale(0) opacity(1);
    -moz-filter: brightness(0.9) grayscale(0) opacity(1);
    filter: brightness(0.9) grayscale(0) opacity(1);
}

/* TESTING WITH UI BOOTSTRAP UIB-BTN-RADIO */
.option-label.active{
    background-color: #dddddd;
    border: 1px solid #73CC21;
    box-shadow: 0 0 4px #73CC21, 1px 1px 3px #999999 inset;
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}
/* TESTING WITH UI BOOTSTRAP UIB-BTN-RADIO */
.option-label.disabled{
    cursor: not-allowed;
    opacity: 0.3;
}