// @page Pattern Library/Forms
// @name Toggle
//
// @description
//  Toggle buttons provide and alternative way of displaying radio groups with a small number of options to a user.
//  IE8 support is included with `radioToggle.js` which sets a `.checked` class on the radio button when clicked.
//
//  #### Best practices
//  * Use as an alternation to radio groups that have short labels for each option (Yes/No, Opt-in/Opt-out).
//  * For forms that have many short radio group questions in them, toggle buttons provide a better experience for quickly selecting answers on both desktop and mobile due to larger visible click areas for each option.
//  * Limit the number of options in the toggle group to 3.
//
// @state .us-toggle__btn--disabled - Visual styling for toggle buttons that can't be interacted with
//
// @javascript
//   var radioToggle = new RadioToggle({
//     $target: $(".us-toggle")
//   })
//
// @markup
//   <div class="us-field us-field--blocked">
//     <label>Answer truthfully</label>
//     <div class="us-toggle">
//       <label class="us-toggle__label">
//         <input class="us-form-input" name="choice" type="radio">
//         <span class="us-toggle__btn {$modifiers}">
//           Yes
//         </span>
//       </label>
//
//       <label class="us-toggle__label">
//         <input class="us-form-input" name="choice" type="radio">
//         <span class="us-toggle__btn">
//           No
//         </span>
//       </label>
//     </div>
//   </div>

$toggle-btn-padding: 5px 30px !default;
$toggle-default-bg: #fff !default;
$toggle-default-border: $c-bordergrey !default;
$toggle-hover-border: $c-typecyan !default;
$toggle-active-bg: $c-cyan-light !default;
$toggle-active-border: $c-typecyan !default;

@mixin toggle-active-style {
  background: $toggle-active-bg;
  border-color: $toggle-active-border;
}

@mixin toggle-disabled-style {
  color: $c-form-element-disabled-fg;
  background-color: $c-form-element-disabled-bg;
  border-color: $c-form-element-disabled-fg;
}

.us-toggle {
  @extend %clearfix;
  display: block;

  @include respond-to($default-grid-breakpoint, true) {
    display: inline-block;
  }
}

.us-toggle__label {
  position: relative;
  float: left;
  width: 50%;
  vertical-align: middle;
  cursor: pointer;

  @include respond-to($default-grid-breakpoint, true) {
    width: auto;
  }

  // Don't hide inputs due to tabbing
  .us-form-input {
    position: absolute;
    left: -999em;
  }
}

.us-toggle__btn {
  display: block;
  padding: $toggle-btn-padding;
  color: $c-form-element-text;
  text-align: center;
  background-color: $c-form-element-background;
  border: 1px solid $toggle-default-border;

  .us-toggle__label:hover & {
    border-color: $toggle-hover-border;
  }

  .us-toggle__label:focus &,
  .us-toggle__label .us-form-input:focus + & {
    border-color: $toggle-hover-border;
    box-shadow: inset 0 0 0 1px $toggle-hover-border;
  }

  // [nodoc] Legacy, as grouping selectors will fail on pseudo-selector :checked
  .us-toggle__label .us-form-input.checked + & {
    @include toggle-active-style;
  }

  .us-toggle__label .us-form-input:checked + & {
    @include toggle-active-style;
  }

  .us-toggle__label:first-child & {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
  }

  .us-toggle__label:last-child & {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }
}

.us-toggle__btn--disabled {
  @include form-element-disabled;
}