/******************************************************
  Radio buttons/Check boxes
******************************************************/

// Check variable values
@if ($radio-size % 2 == 1) { @error '$radio-size must be even'; }
// round to nearest even number
@if ($radchk-pip-size % 2 == 1) { $radchk-pip-size: $radchk-pip-size - 1; }

input[type="checkbox"] {
  //position: relative;
  display: inline-block;

  width:  $checkbox-size - 2;
  height: $checkbox-size - 2;

  //border-radius: 100%;
  outline: none !important;
  -webkit-appearance: none;
  
  &::before {
    position: relative;
    top:  -$radchk-border-width;
    left: -$radchk-border-width;
    display: block;
    content: '';


    background: $radchk-unchecked-bg;
    border: $radchk-border-width solid $radchk-unchecked-border;
    //border-radius: 100%;
    box-shadow: $radchk-inset-shadow;

    width:  $checkbox-size;
    height: $checkbox-size;
  }

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

  // Checker
  // ---

  &::after {
    position: relative;
    top: -($checkbox-size / 2) - $radchk-border-width;
    left: ($checkbox-size / 2) - $radchk-border-width;


    display: block;
    content: '';

    background: $radchk-pip-color;
    border-radius: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);

    width:  0;
    height: 0;
  }

  &:checked::after {
    transition: all ease-in-out $radchk-transition-speed 0;

    top:  floor(
            - ($checkbox-size / 2)
            - ($radchk-pip-size / 2)
            - $radchk-border-width
            //- .5
          );

    left: floor(
            + ($checkbox-size / 2)
            - ($radchk-pip-size / 2)
            - $radchk-border-width
            //+ 1
          );

    width:  $radchk-pip-size;
    height: $radchk-pip-size;
  }

  &:disabled::after {
    background: $radchk-disabled-pip-color;
  }
}

input[type="radio"] {
  @extend input[type="checkbox"];

  width:  $radio-size - 2;
  height: $radio-size - 2;

  &::before {
    border-radius: 100%;

    width:  $radio-size;
    height: $radio-size;
  }
  &::after {
    border-radius: 100%;

    top: -($radio-size / 2) - $radchk-border-width;
    left: ($radio-size / 2) - $radchk-border-width;
  }
  &:checked::after {
    transition: all ease-in-out $radchk-transition-speed 0;

    top:  floor(
            - ($radio-size / 2)
            - ($radchk-pip-size / 2)
            - $radchk-border-width
            //- .5
          );

    left: floor(
            + ($radio-size / 2)
            - ($radchk-pip-size / 2)
            - $radchk-border-width
            //+ 1
          );

    width:  $radchk-pip-size;
    height: $radchk-pip-size;
  }
}