// Forms - Media Option Field
//
// Custom single or multi-select option styles to mimic behavior of radio buttons and checkboxes.
// Progressively enhanced to look beautiful on modern browsers.
//
// Markup:
//   <div class="form-item">
//     <label class="media-option -radio">
//       <input type="radio" value="value1" name="item" id="option1" checked="checked">
//       <img alt="kitten overlords" src="/styleguide/assets/placeholder-small.jpg">
//     </label>
//     <label class="media-option -radio">
//       <input type="radio" value="value2" name="item" id="option2">
//       <img alt="kitten overlords" src="/styleguide/assets/placeholder-small.jpg">
//     </label>
//   </div>
//
// Styleguide Forms - Media Option Field
.media-option {
  position: relative;
  display: block;
  height: auto;
  padding-left: $base-spacing;
  cursor: pointer;

  input {
    position: absolute;
    top: 2px;
    left: 0;
  }
}


.modernizr-checked.modernizr-label-click .media-option {
  position: relative;
  float: left;
  padding-left: $base-spacing * 2;

  &:before {
    display: block;
    position: absolute;
    top: 50%;
    left: $base-spacing * (-1/2);
    width: 40px;
    height: 30px;
    margin: -15px 0 0 15px;
    font-size: $font-regular;
    font-weight: $weight-sbold;
    text-align: center;
    text-transform: uppercase;
  }

  input {
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1; // Put the input behind the label so it doesn't overlay text
  }

  img {
    cursor: pointer;
    border: 2px solid $med-gray;
    border-radius: $sm-border-radius;
    width: 100%;
    max-width: 100px;
  }

  input:active ~ img {
    border-color: darken($med-gray, $tint);
  }

  input:checked ~ img {
    border-color: $blue;
  }

  input:checked:active ~ img {
    border-color: darken($blue, $tint);
  }

  // "OR" label applied to radio buttons.
  &.-radio {
    &:before {
      content: "or";
    }
  }

  // Hide "OR" label on first element.
  &:first-child {
    padding-left: 0;

    &:before {
      content: "";
    }
  }
}