:root {
  --radio-button-background-active: rgba(0, 0, 0, 0);
  --radio-button-indicator-color: var(--highlight-color);
  --radio-button-background: transparent;
  --radio-button-border: 3px solid var(--radio-button-indicator-color);
  --radio-button-size: 24px;
  --material-radio-button-size: 20px;
  --material-radio-button-shadow-size: calc((48px - var(--material-radio-button-size)) / 2);

  --radio-button: {
    @apply(--reset-box-model);
    position: relative;
    display: inline-block;
    vertical-align: top;
    @apply(--reset-cursor);
    @apply(--reset-font);
    @apply(--hide-input-parent);
  }

  --radio-button__label: {
    position: relative;
    display: inline-block;
    vertical-align: top;
    @apply(--reset-cursor);
  }

  --radio-button--before: {
    content: '';
    position: absolute;
    border-radius: 100%;
    @apply(--reset-box-model);
  }

  --radio-button--after: {
    content: '';
    position: absolute;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  --radio-button--disabled: {
    @apply(--disabled);
  }
}

/*~
  name: Radio Button
  category: Radio Button
  elements: ons-input
  markup: |
    <label class="radio-button">
      <input type="radio" class="radio-button__input" name="r" checked="checked">
      <div class="radio-button__checkmark"></div>
      Label
    </label>

    <label class="radio-button">
      <input type="radio" class="radio-button__input" name="r">
      <div class="radio-button__checkmark"></div>
      Label
    </label>

    <label class="radio-button">
      <input type="radio" class="radio-button__input" name="r">
      <div class="radio-button__checkmark"></div>
      Label
    </label>
*/

.radio-button__input {
  @apply(--hide-input);
}

.radio-button__input:active,
.radio-button__input:focus {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.radio-button {
  @apply(--radio-button__label);
  @apply(--hide-input-parent);
  line-height: var(--radio-button-size);
  text-align: left;
}

.radio-button__checkmark:before {
  @apply(--radio-button--before);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background: transparent;
  border: none;
  border-radius: var(--checkbox-size);
  left: 0;
}

.radio-button__checkmark {
  @apply(--radio-button);
  position: relative;
  width: var(--radio-button-size);
  height: var(--radio-button-size);
  background: var(--radio-button-background);
  pointer-events: none;
}

.radio-button__checkmark:after {
  @apply(--checkmark);
}

:checked + .radio-button__checkmark {
  background: var(--radio-button-background-active);
}

:checked + .radio-button__checkmark:after {
  opacity: 1;
}

:checked + .radio-button__checkmark:before {
  background: transparent;
  border: none;
}

:disabled + .radio-button__checkmark {
  @apply(--radio-button--disabled);
}

/*~
  name: Material Radio Button
  category: Radio Button
  elements: ons-input
  markup: |
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="r" checked="checked">
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="r">
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled checked>
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled>
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
*/

.radio-button--material {
  line-height: calc(var(--material-radio-button-size) + 2px);
  @apply(--material-font);
}

.radio-button--material__input:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: var(--material-radio-button-size);
  height: var(--material-radio-button-size);
  box-shadow: 0 0 0 var(--material-radio-button-shadow-size) var(--material-radio-button-inactive-color);
  border: none;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: var(--material-radio-button-inactive-color);
  pointer-events: none;
  display: block;
  transform: scale3d(0.2, 0.2, 0.2);
  transition: opacity 0.25s ease-out, transform 0.1s ease-out;
}

.radio-button--material__input:checked:before {
  box-shadow: 0 0 0 var(--material-radio-button-shadow-size) var(--material-radio-button-active-color);
  background-color: var(--material-radio-button-active-color);
}

.radio-button--material__input:active:before {
  opacity: .15;
  transform: scale3d(1, 1, 1);
}

.radio-button--material__checkmark {
  width: var(--material-radio-button-size);
  height: var(--material-radio-button-size);
  overflow: visible;
}

.radio-button--material__checkmark:before {
  background: transparent;
  border: 2px solid var(--material-radio-button-inactive-color);
  box-sizing: border-box;
  border-radius: 50%;
  width: var(--material-radio-button-size);
  height: var(--material-radio-button-size);
  transition: border 0.2s ease;
}

.radio-button--material__checkmark:after {
  transition: background 0.2s ease, transform 0.2s ease;
  top: calc(var(--material-radio-button-size) / 4);
  left: calc(var(--material-radio-button-size) / 4);
  width: calc(var(--material-radio-button-size) / 2);
  height: calc(var(--material-radio-button-size) / 2);
  border: none;
  border-radius: 50%;
  transform: scale(0);
}

:checked + .radio-button--material__checkmark:before {
  background: transparent;
  border: 2px solid var(--material-radio-button-active-color);
}

.radio-button--material__input + .radio-button__checkmark:after {
  background: var(--material-radio-button-inactive-color);
  opacity: 1;
  transform: scale(0);
}

:checked + .radio-button--material__checkmark:after {
  opacity: 1;
  background: var(--material-radio-button-active-color);
  transform: scale(1);
}

:disabled + .radio-button--material__checkmark {
  opacity: 1;
}

:disabled + .radio-button--material__checkmark:after {
  background-color: var(--material-radio-button-disabled-color);
  border-color: var(--material-radio-button-disabled-color);
}

:disabled + .radio-button--material__checkmark:before {
  border-color: var(--material-radio-button-disabled-color);
}