/**
 * Radio:
 * `.Radio` Fancy radio buttons. `.Radio--inline` is probably what you want for
 * inline radio buttons.
 * * TODO: Convert magic numbers and refactor
 *
 *     @example
 *     div.Radio
 *       label.Radio-label.single
 *         input.Radio-input(name="pricing_options", type="radio", value="no")
 *         span.Radio-icon
 *         span.Radio-text Only one size, color or material
 *     div.Radio
 *       label.Radio-label.single
 *         input.Radio-input(name="pricing_options", type="radio", value="yes")
 *         span.Radio-icon
 *         span.Radio-text Multiple sizes, colors or materials
 *     div.Radio.Radio--inline
 *       label.Radio-label.single
 *         input.Radio-input(name="pricing_options", type="radio", value="no")
 *         span.Radio-icon
 *         span.Radio-text Only one size, color or material
 *     div.Radio.Radio--inline
 *       label.Radio-label.single
 *         input.Radio-input(name="pricing_options", type="radio", value="yes")
 *         span.Radio-icon
 *         span.Radio-text Multiple sizes, colors or materials
 */

@import "./config";

.Radio {
  height: @radio-size;
  vertical-align: middle;
  padding: 0;
  margin-right: @radio-margin;
  margin-bottom: @radio-margin;

  &:last-child {
    margin-right: 0;
    margin-bottom: 0;
  }
}

.Radio--inline {
  display: inline-block;
  margin-bottom: 0;
}

.Radio-label {
  margin: 0;
  font-weight: normal;
}

.Radio-input {
  display: none;
}

.Radio-icon {
  display: inline-block;
  position: relative;
  width: @radio-size;
  height: @radio-size;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  background: #fff;
  // Ensure it appears above other siblings
  z-index: 2;
  border: 1px solid @radio-border-color;
  vertical-align: middle;
  border-radius: 50%;
  outline: none;
}

.Radio-text {
  color: @blue-darker;
  font-size: @radio-text-font-size;
  line-height: 1;
  vertical-align: middle;
  margin-left: @radio-text-margin-left;
}

.Radio-icon:before,
.Radio-icon:before {
  display: block;
  content:'';
  position: absolute;
  right: auto;
  background: @green;
  border-radius: 50%;
  top: @radio-tick-gap;
  left: @radio-tick-gap;
  right: @radio-tick-gap;
  bottom: @radio-tick-gap;
  transition: opacity @radio-transition;
  opacity: 0;
}

.Radio-input:checked ~ .Radio-icon:before,
.Radio-input:indeterminate ~ .Radio-icon:before {
  opacity: 1;
}

.Radio-input:indeterminate ~ .Radio-icon:before {
  opacity: 0.4;
}