///////////////////////////////////////
// !THEME / COMPONENTS / FORMS - RADIOS
///////////////////////////////////////


// Custom styled radios https://scottaohara.github.io/a11y_styled_form_controls/src/radio-button/
.unl .dcf-input-radio {
  @include mb-2;
  padding-left: #{ms(5)}em;
  position: relative;


  input[type="radio"] {
    cursor: pointer;
    height: #{ms(3)}em;
    left: 0;
    margin: 0;
    opacity: 0; // Hide the actual radio input
    position: absolute;
    top: 0;
    width: #{ms(5)}em; // Width should equal .dcf-input-radio padding-left for consistent hover across input and label
    z-index: 1;
  }


  label {
    cursor: pointer;
    touch-action: manipulation;
  }


  // Create radio input and selection
  label::before,
  label::after {
    border-radius: $circle;
    content: '';
    @include h-6;
    left: 0;
    position: absolute;
    top: 0;
    @include w-6;
  }

  // Style radio input
  label::before {
    @include bg-white;
    border: 1px solid $color-border-input;
  }


  // Style radio selection
  label::after {
    background-color: $darker-gray;
    opacity: 0;
    transform: translate(.01em,.01em) scale(0.3);
  }


  // Show selection
  input[type="radio"]:checked + label::after {
    opacity: 1;
    transform: translate(.01em,.01em) scale(0.5);
    transition: transform .05s;
  }


  // Hover and focus
  input:hover + label::before,
  label:hover::before,
  input[type="radio"]:focus + label::before {
    box-shadow: 0 0 $length-em-3 fade-out($color-border-input-hover,.25);
  }

}