// vf-form__radio

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

.vf-form__radio {
  opacity: 0; // hide it
  position: absolute; // take it out of document flow

  & + .vf-form__label {
    color: color(grey--dark);
    cursor: pointer;
    display: flex;
    padding: 0;
    position: relative;
  }

  // Radio Button
  & + .vf-form__label::before {
    background: ui-color(white);
    border: 2px solid color(grey);
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 1rem;
    margin-right: 8px;
    min-width: 1rem;
    position: relative;
    top: 4px; // need to look at a better way to do this that keeps the semantics of a label
    width: 1rem;
  }

  // Radio Button hover
  &:hover + .vf-form__label::before,
  &:focus + .vf-form__label::before {
    border-color: color(grey--dark);
    box-shadow: 0 0 0 .125rem color(grey--dark);
  }

  // Radio Button checked
  &:checked + .vf-form__label::before {
    background: color(blue);
    border-color: color(blue);
  }

  // Disabled state .vf-form__label.
  &:disabled + .vf-form__label {
    color: color(grey);
    cursor: not-allowed;

  }

  // Disabled box.
  &:disabled + .vf-form__label::before {
    background-color: color(grey--lightest);
    box-shadow: none;
  }
}

.vf-form__item--radio {
  & .vf-form__helper {
    margin-left: 29px;
  }
}


.vf-form__legend + .vf-cluster__inner {
  margin-top: 1rem !important;
}