// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.

$label-offset: 27px;

.radio, .checkbox, .form-group .radio, .form-group .checkbox, .form-group.radio, .form-group.checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;

  label {
    min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
    padding-left: $label-offset;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    font-size: $font-small;
    text-transform: none;
    color: $ink-light;
    line-height: inherit;
  }
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -($label-offset);
  margin-top: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid $form-border-color;
  cursor: pointer;
  @include transition-property(all);
  @include transition-duration(.2s);
  @include transition-timing-function(cubic-bezier(.7, 0, .3, 1));
  &:hover {
    // transform: scale(1.1);
  }
}

.radio input[type="radio"],
.radio-inline input[type="radio"] {
  border-radius: $border-rad-mega;
  width: 17px;
  height: 17px;
  &:checked {
    border-color: $power-royal;
    background: $power-royal;
    &:after {
      content: " ";
      background: $white;
      width: 7px;
      height: 7px;
      display: block;
      border-radius: $border-rad-mega;
      left: 4px;
      top: 4px;
      position: absolute;
    }
  }
}
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  border-radius: $border-rad-light;
  background-image: linear-gradient(to bottom, $white 10%, $gray-1 100%);
  &:checked {
    background: $power-royal;
    border-color: $power-royal;
    ~ span {
      color: $ink-light;
      font-weight: $bold;
    }
    &:after {
      content: "";
      display: block;
      width: 15px;
      height: 11px;
      background-image: image-url('pb-check.svg');
      background-repeat: no-repeat;
      position: absolute;
      top: 2px;
      @include center;
    }
  }
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
}

// Override for our custom columnar grouping of options.
.form-group {
  &.radio-checkbox-columns {
    .checkbox,
    .radio {
      margin-top: -5px;
    }
  }
}

// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px; // space out consecutive inline controls
}

// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"] {
  &[disabled],
  &.disabled,
  fieldset[disabled] & {
    cursor: $cursor-disabled;
  }
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
  &.disabled,
  fieldset[disabled] & {
    cursor: $cursor-disabled;
  }
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
  &.disabled,
  fieldset[disabled] & {
    label {
      cursor: $cursor-disabled;
    }
  }
}