/*
 * component radio
 */
/*
 * HTML template example:
 * <input type="radio" class="radio" name="radio" id="r1">
 * <label for="r1">Click here</label>
 */

/*
 * radio variables (you can change them)
 */

$radio-color: $color-alpha;
$radio-background: $white;
$radio-size: 2rem;
$radio-border-radius: 50%;

/*
 * radio styles
 */

.radio {
  border-radius: $radio-border-radius;
}

.radio {
  -webkit-appearance: none;
  appearance: none;
  width: $radio-size;
  height: $radio-size;
  vertical-align: text-bottom;
  outline: 0;
  box-shadow: inset 0 0 0 1px $color-alpha;
  background-color: $radio-background;
  transition: background-size 0.15s;
  cursor: pointer;
}

.radio + label {
  cursor: pointer;
}

.radio:disabled {
  opacity: 0.6;
}

.radio:disabled + label {
  opacity: 0.6;
  cursor: not-allowed;
}

.radio:checked {
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
  background-size: 70% 70%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: $color-alpha;
}