// @page Pattern Library/Forms
// @name Radios and checkboxes
//
// @description
//   Browsers that support screen density media features display our font icon tick or a box shadow circle. Other browsers fallback to default styling.
//
//   #### Best practices
//   * Like select boxes, radio buttons are good for making a selection from a mutually exclusive list of options. The main difference between the two is that with radio buttons, the user must choose exactly one of the options.
//   * Use radio buttons when each of the choices matters to the user. Each needs to be considered before they make their choice.
//   * Checkboxes in a group should be used for choosing zero or more options from a list of independent options. Toggling one should not change the state of others in the group.
//   * A stand-alone checkbox is good for toggling something on/off or opting in/out.
//   * Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.
//   * Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.
//
// @state us-form-input--disabled - Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with.
//
// @markup
//   <div class="us-field us-field--blocked">
//     <label>Do you have a different billing address?</label>
//     <div class="us-field-toggle">
//       <label>
//         <input checked="checked" class="us-form-input {$modifiers}" name="null" type="radio">
//         Yes
//       </label>
//
//       <label>
//         <input class="us-form-input" name="null" type="radio">
//         No
//       </label>
//     </div>
//   </div>
//
//   <div class="us-field us-field--blocked">
//     <label>How would you like to be contacted?</label>
//     <div class="us-field-toggle">
//       <label>
//         <input checked="checked" class="us-form-input {$modifiers}" name="null" type="checkbox">
//         Mobile
//       </label>
//
//       <label>
//         <input class="us-form-input" name="null" type="checkbox">
//         Email
//       </label>
//     </div>
//   </div>

.us-form-input {
  @include hidpi(1) {
    &[type="checkbox"] {
      &:after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 1em;
        height: 1em;
        margin: -.5em 0 0 -.5em;
        pointer-events: none;
        background-image: inline-svg("forms/checkbox.svg");
        background-position: 0 75%;
        background-size: cover;
        content: "";
        opacity: 0;
      }

      &:checked:after {
        opacity: 1;
      }

      &.us-form-input--disabled,
      &:disabled {
        background: $c-form-element-disabled-bg;

        // scss-lint:disable NestingDepth
        &:after {
          opacity: 0;
        }
      }

      &.us-form-input--disabled {

        // scss-lint:disable NestingDepth
        &:checked:after {
          background-position: 0 50%;
          opacity: .35;
        }
      }
    }

    &[type="radio"] {

      &:checked,
      &:checked:focus {
        background: $c-form-element-border-hover;
      }

      &:focus {
        box-shadow: inset 0 0 0 1px $c-form-element-border-hover;
      }

      &:checked {
        box-shadow: inset 0 0 0 .35em #fff;
      }

      &:checked:focus {
        box-shadow: inset 0 0 0 1px $c-form-element-border-hover, inset 0 0 0 .35em #fff;
      }

      &.us-form-input--disabled:checked {
        background: $c-form-element-disabled-fg;
        box-shadow: inset 0 0 0 .35em $c-form-element-disabled-bg;
      }
    }
  }

  &[type="checkbox"],
  &[type="radio"] {
    position: relative;
    width: 1.6em;
    height: 1.6em;
    padding: 0;
    font-size: .8em;
    cursor: pointer;

    .us-field-toggle & {
      margin-top: .1em;
      margin-right: .5em;
      vertical-align: top;
    }
  }

  &[type="radio"] {
    border-radius: 50%;
  }

  &[type="checkbox"] {
    border-radius: .3em;
  }
}