// Variables
// ========================================================================

$checkbox-size: 20px !default;
$checkbox-icon-size: 12px !default;
$checkbox-label-gap: 10px !default;

$checkbox-sm-size: 18px !default;
$checkbox-sm-icon-size: 10px !default;
$checkbox-sm-label-gap: 8px !default;

$checkbox-lg-size: 24px !default;
$checkbox-lg-icon-size: 14px !default;
$checkbox-lg-label-gap: 12px !default;

$checkbox-inline-gap: 20px !default;

$radio-size: 20px !default;
$radio-icon-size: 6px !default;
$radio-border-width: 2px !default;
$radio-label-gap: 10px !default;

$radio-sm-size: 18px !default;
$radio-sm-icon-size: 4px !default;
$radio-sm-border-width: 2px !default;
$radio-sm-label-gap: 8px !default;

$radio-lg-size: 24px !default;
$radio-lg-icon-size: 8px !default;
$radio-lg-border-width: 2px !default;
$radio-lg-label-gap: 12px !default;

$radio-inline-gap: 20px !default;


// Checkboxes & Radios
// ========================================================================
.radio-custom,
.checkbox-custom {
  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
    margin-bottom: 0;
    font-weight: $font-weight-normal;
    cursor: pointer;
  }
}

.radio-custom input[type="radio"],
.checkbox-custom input[type="checkbox"] {
  position: absolute;
  margin-left: -20px;
  margin-top: 0;
  margin-bottom: 0;
}

.radio-custom,
.checkbox-custom {
  &.disabled,
  fieldset[disabled] & {
    label {
      cursor: $cursor-disabled;
    }
  }
}

.input-group-addon {
  .radio-custom,
  .checkbox-custom {
    margin: 0;
  }
}

// Checkboxes
// ========================================================================
.checkbox-custom {
  padding-left: $checkbox-size;

  label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: $checkbox-label-gap;

    &:empty {
      padding-left: 0;
    }

    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: $checkbox-size;
      height: $checkbox-size;
      left: 0;
      margin-left: -$checkbox-size;
      border: 1px solid $input-border;
      border-radius: $input-border-radius;
      background-color: $color-white;
      transition: all 0.3s ease-in-out 0s;
    }

    &::after {
      display: inline-block;
      position: absolute;
      width: $checkbox-size;
      height: $checkbox-size;
      line-height: $checkbox-size;
      left: 0;
      top: 0;
      margin-left: -$checkbox-size;
      text-align: center;
      padding-top: 1px;
      font-size: $checkbox-icon-size;
      color: $input-color;
    }
  }

  input[type="checkbox"],
  input[type="radio"]{
    opacity: 0;
    z-index: 1;
    width: $checkbox-size;
    height: $checkbox-size;

    &:focus + label::before {
      @include tab-focus();
    }

    &:checked + label::before {
      border-color: $input-border;
      border-width: ($checkbox-size/2);
      transition: all 300ms ease-in-out 0s;
    }

    &:checked + label::after {
      font-family: $zmdi-font-name;
      content: $zmdi-var-check;
    }

    &:disabled + label {
      opacity: 0.65;

      &::before {
        background-color: $input-bg-disabled;
        border-color: $input-border;
        border-width: 1px;
        cursor: not-allowed;
      }
    }
  }

  &.checkbox-circle label::before {
    border-radius: 50%;
  }

  &.checkbox-inline {
    margin-top: 0;
    display: inline-block;
    margin-bottom: 0;
  }
}

.checkbox-inline + .checkbox-inline {
  margin-left: $checkbox-inline-gap;
}

// Checkbox Color Modifier
// ========================================================================

@mixin checkbox-variant($color){
  input[type="checkbox"]:checked + label,
  input[type="radio"]:checked + label {
    &::before {
      background-color: $color;
      border-color: $color;
    }
    &::after {
      color: $color-white;
    }
  }
}

.checkbox-default {
  input[type="checkbox"]:checked + label,
  input[type="radio"]:checked + label {
    &::before {
      background-color: $color-white;
      border-color: $input-border;
      border-width: 1px;
    }
    &::after {
      color: $brand-primary;
    }
  }
}

.checkbox-primary {
  @include checkbox-variant($brand-primary);
}
.checkbox-danger {
  @include checkbox-variant($brand-danger);
}
.checkbox-info {
  @include checkbox-variant($brand-info);
}
.checkbox-warning {
  @include checkbox-variant($brand-warning);
}
.checkbox-success {
  @include checkbox-variant($brand-success);
}

// Checkbox Size Modifier
// ========================================================================
@mixin checkbox-size($size, $icon-size, $label-gap){
  padding-left: $size;

  label {
    padding-left: $label-gap;

    &:empty {
      padding-left: 0;
    }

    &::before, &::after {
      width: $size;
      height: $size;
      margin-left: -$size;
    }

    &::after {
      font-size: $icon-size;
      line-height: $size;
    }
  }

  input[type="checkbox"],
  input[type="radio"]{
    width: $size;
    height: $size;

    &:checked + label::before {
      border-width: ($size/2);
    }
  }
}

.checkbox-sm {
  @include checkbox-size($checkbox-sm-size, $checkbox-sm-icon-size, $checkbox-sm-label-gap);
}

.checkbox-lg {
  @include checkbox-size($checkbox-lg-size, $checkbox-lg-icon-size, $checkbox-lg-label-gap);
}


// Radios
// ========================================================================

.radio-custom {
  padding-left: $radio-size;

  label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: $radio-label-gap;

    &:empty {
      padding-left: 0;
    }

    &::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: $radio-size;
      height: $radio-size;
      left: 0;
      margin-left: -$radio-size;
      border: 1px solid $input-border;
      border-radius: 50%;
      background-color: $color-white;
      transition: border 300ms ease-in-out 0s, color 300ms ease-in-out 0s;
    }

    &::after {
      display: inline-block;
      position: absolute;
      content: " ";
      width: $radio-icon-size;
      height: $radio-icon-size;
      left: (($radio-size - $radio-icon-size)/2);
      top: (($radio-size - $radio-icon-size)/2);
      margin-left: -$radio-size;
      border: $radio-border-width solid $gray-dark;
      border-radius: 50%;
      background-color: transparent;
      transform: scale(0, 0);

      transition: .1s cubic-bezier(.8,-0.33,.2,1.33);
      //curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
    }
  }

  input[type="radio"]{
    width: $radio-size;
    height: $radio-size;
    opacity: 0;
    z-index: 1;

    &:focus + label::before{
      @include tab-focus();
    }
    &:checked + label::before {
      border-color: $input-border;
      border-width: ($radio-size/2);
    }

    &:checked + label::after {
      transform: scale(1, 1);
    }

    &:disabled + label{
      opacity: 0.65;

      &::before{
        cursor: not-allowed;
      }
    }
  }

  &.radio-inline {
    margin-top: 0;
    display: inline-block;
    margin-bottom: 0;
  }
}

.radio-inline + .radio-inline {
  margin-left: $radio-inline-gap;
}

// Rdios Color Modifier
// ========================================================================

@mixin radio-variant($color){
  input[type="radio"]:checked + label {
    &::before {
      // background-color: $color;
      border-color: $color;
    }
    &::after {
      border-color: $color-white;
    }
  }
}

.radio-default {
  input[type="radio"]:checked + label {
    &::before {
      background-color: $color-white;
      border-color: $input-border;
      border-width: 1px;
    }
    &::after {
      border-color: $brand-primary;
    }
  }
}

.radio-primary {
  @include radio-variant($brand-primary);
}
.radio-danger {
  @include radio-variant($brand-danger);
}
.radio-info {
  @include radio-variant($brand-info);
}
.radio-warning {
  @include radio-variant($brand-warning);
}
.radio-success {
  @include radio-variant($brand-success);
}

// Rdios Size Modifier
// ========================================================================
@mixin radio-size($size, $icon-size, $border-width, $label-gap){
  padding-left: $size;

  label {
    padding-left: $label-gap;

    &:empty {
      padding-left: 0;
    }

    &::before {
      width: $size;
      height: $size;
      margin-left: -$radio-size;
    }

    &::after {
      width: $icon-size;
      height: $icon-size;
      left: (($size - $icon-size)/2);
      top: (($size - $icon-size)/2);
      margin-left: -$radio-size;
      border-width: $border-width;
    }
  }

  input[type="radio"]{
    width: $size;
    height: $size;

    &:checked + label::before {
      border-width: ($size/2);
    }
  }
}

.radio-sm {
  @include radio-size($radio-sm-size, $radio-sm-icon-size, $radio-sm-border-width, $radio-sm-label-gap);
}

.radio-lg {
  @include radio-size($radio-lg-size, $radio-lg-icon-size, $radio-lg-border-width, $radio-lg-label-gap);
}

// Form inline
// ========================================================================
.form-inline {
  @include media-breakpoint-up(md) {
    .radio-custom,
    .checkbox-custom {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;

      label {
        padding-left: 0;
      }
    }

    .radio-custom input[type="radio"],
    .checkbox-custom input[type="checkbox"] {
      position: relative;
      margin-left: 0;
    }

    .radio-custom {
      label {
        padding-left: $radio-label-gap;
      }
    }

    .checkbox-custom {
      label {
        padding-left: $checkbox-label-gap;
      }
    }

    .checkbox-custom input[type="checkbox"] {
      position: absolute;
      margin-left: -$checkbox-size;
    }

    .radio-custom input[type="radio"] {
      position: absolute;
      margin-left: -$radio-size;
    }
  }
}
// Horizontal forms
// ========================================================================
.form-horizontal {
  .radio-custom,
  .checkbox-custom {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: ($padding-base-vertical + pxToRem(1px));
  }

  .radio-custom,
  .checkbox-custom {
    min-height: (pxToRem($line-height-computed) + $padding-base-vertical + pxToRem(1px));
  }
}