//
// Checkboxes
// --------------------------------------------------

.checkbox {
  padding-left: $abc-checkbox-size;
  margin-top: 0;
  position: relative;

  label {
    display: inline-block;
    position: relative;
    padding-left: $grid-unit-x;
    cursor: pointer;
    line-height: $grid-unit-y * 2;
    min-height: $grid-unit-y * 2;
    font-weight: $font-weight-regular;
    font-size: $font-size-base;
    font-family: $font-family-base;
    margin-bottom: 0;

    @include themes(color, color-text-dark);

    &:before {
      content: "";
      display: inline-block;
      position: absolute;
      top: 50%;
      width: $abc-checkbox-size;
      height: $abc-checkbox-size;
      left: 0;
      margin-left: -$abc-checkbox-size;
      margin-top: -($abc-checkbox-size * 0.5);
      border-radius: $border-radius-base;

      @include themes(background-color, input-bg);
      @include themes-border(color-border, $width: $abc-border-width);

      @include transition(color 0.15s ease-in-out);
    }

    &:after {
      content: none;
      display: inline-block;
      position: absolute;
      text-align: center;
      width: $abc-checkbox-size;
      height: $abc-checkbox-size;
      left: 0;
      top: 0;
      margin-left: -$abc-checkbox-size;
      padding-top: 0;
      font-size: 10px;
      line-height: $abc-checkbox-size;
      font-family: $abc-font-family-icon;
      font-weight: $font-family-awesome-weight;

      @include themes(color, color-text-dark);
    }
  }

  input[type="checkbox"],
  input[type="hidden"],
  input[type="radio"] {
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    margin: -($abc-checkbox-size * 0.5) 0 0 (-$abc-checkbox-size);
    height: $abc-checkbox-size;
    width: $abc-checkbox-size;
    position: absolute;
    top: 50%;

    &:checked + label:after,
    &[checked="checked"] + label:after {
      content: $abc-check-icon;
    }

    &:hover + label {
      &:before {
        @include themes(background-color, abc-checkbox-hover);
      }
    }

    &:indeterminate + label:after {
      display: block;
      content: "";
      width: 10px;
      height: 3px;
      border-radius: 2px;
      margin-left: -16.5px;
      margin-top: 7px;

      @include themes(background-color, color-text-default);
    }

    &:disabled {
      cursor: not-allowed;

      & + label {
        opacity: 0.65;
        cursor: not-allowed;

        &:before {
          cursor: not-allowed;

          @include themes(background-color, input-bg-disabled);
        }
      }
    }
  }

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

      &:after {
        width: 8px;
        height: 8px;
        left: 4px;
        top: 4px;
        border-radius: 50%;

        @include themes(background-color, input-color);
        @include scale(0, 0);
        @include transition-transform(0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33));
      }
    }

    input[type="checkbox"],
    input[type="hidden"],
    input[type="radio"] {
      &:checked + label:after,
      &[checked="checked"] + label:after {
        content: "";
        @include scale(1, 1);
      }
    }
  }

  &.checkbox-inline {
    margin-top: 0;
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;

    &:not(:last-child) {
      padding-right: $grid-unit-x * 2;
    }
  }

  &.checkbox-minus {
    label:after {
      content: "\f068";
    }
  }
}

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

@include checkbox-variant-indeterminate(".checkbox-primary", $brand-primary);
@include checkbox-variant-indeterminate(".checkbox-danger", $brand-danger);
@include checkbox-variant-indeterminate(".checkbox-info", $brand-info);
@include checkbox-variant-indeterminate(".checkbox-warning", $brand-warning);
@include checkbox-variant-indeterminate(".checkbox-success", $brand-success);

//
// Radios
// --------------------------------------------------

.radio {
  margin-top: 0;
  position: relative;
  padding-left: $abc-checkbox-size;

  label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: $grid-unit-x;
    min-height: $grid-unit-y * 2;
    font-weight: $font-weight-regular;
    font-size: $font-size-base;
    font-family: $font-family-base;
    margin-bottom: 0;
    line-height: $grid-unit-y * 2;
    cursor: pointer;

    @include themes(color, color-text-dark);

    &:before {
      content: "";
      display: inline-block;
      position: absolute;
      width: $abc-checkbox-size;
      height: $abc-checkbox-size;
      left: 0;
      margin-left: -$abc-checkbox-size;
      margin-top: -$abc-checkbox-size * 0.5;
      border-radius: 50%;
      top: 50%;

      @include themes(background-color, input-bg);
      @include themes-border(color-text-light, $width: $abc-border-width);

      @include transition(border 0.15s ease-in-out);
    }

    &:after {
      display: inline-block;
      position: absolute;
      content: " ";
      width: 8px;
      height: 8px;
      left: 8px;
      top: 4px;
      margin-left: -20px;
      border-radius: 50%;

      @include themes(background-color, input-color);

      @include scale(0, 0);
      @include transition-transform(0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33));
    }
  }

  input[type="radio"] {
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    position: absolute;
    width: $abc-checkbox-size;
    height: $abc-checkbox-size;
    margin-top: -$abc-checkbox-size * 0.5;
    top: 50%;
    margin-left: -$abc-checkbox-size;

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

    &:disabled,
    &:disabled + label {
      cursor: not-allowed;
    }

    &:disabled + label {
      opacity: 0.65;

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

  &.radio-inline {
    margin-top: 0;
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;

    &:not(:last-child) {
      padding-right: $grid-unit-x * 2;
    }
  }
}

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

input[type="checkbox"],
input[type="radio"] {
  &.styled:checked + label:after {
    font-family: $abc-font-family-icon;
    content: $abc-check-icon;
    font-weight: $font-family-awesome-weight;
  }
  .styled:checked + label {
    &:before {
      color: $color-white;
    }
    &:after {
      color: $color-white;
    }
  }
}

.radio-group {
  &-inline {
    margin-left: -$grid-unit-x * 2;
    margin-bottom: -(ceil($grid-unit-y * 0.5));

    &.radio-sm {
      .radio {
        margin-bottom: ceil($grid-unit-y * 0.5);
      }
    }
  }
}