// Radio Buttons
// -------------------------------

.radio-buttton-list .list-item-content {
  /* give some room to the right for the checkmark icon */
  padding-right: $list-item-padding * 4;
}

.radio-buttton-list .list-item-icon {
  /* checkmark icon will be hidden by default */
  visibility: hidden;
}

.radio-buttton-list input[type="radio"] {
  /* hide any radio button inputs elements (the ugly circles) */
  display: none;

  &:checked ~ .list-item-content {
    /* style the list item content when its checked */
    background: #f7f7f7;
  }

  &:checked ~ .list-item-icon {
    /* show the checkmark icon when its checked */
    visibility: visible;
  }
}