// CHECKBOX
$checkbox-text-color: white !default;
$checkbox-bg-color: $color-blue !default;
$checkbox-border-color: $color-blue !default;

.ingaia-checkbox {
  label { display: inline-block; }
  span {
    cursor: pointer;
    &:before {
      border: 3px solid $checkbox-border-color;
    }
    &:hover:before {
      box-shadow: inset 0px 0px 3px $checkbox-border-color, 0px 0px 3px $checkbox-border-color;
    }
  }

  input[type=checkbox] {
    display: none
  }

  input[type=checkbox] + span:before {
    content: "";
    width: 22px;
    height: 22px;
    font-size: .75rem;
    line-height: 18px;
    display: inline-block;    
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
    border-radius: 20%;
    text-align: center;    
    cursor: pointer;
    position: relative;
    background: transparent;
    padding: 0;
    margin-right: 5px;
    vertical-align: text-bottom;
  }

  input[type=checkbox]:checked + span:before {
    font-family: 'ingaia-font-icons';
    content: "\E0D3";
    color: $checkbox-text-color;
    background-color: $checkbox-bg-color;
    display: inline-block;
    vertical-align: text-bottom;
  }

  &.check-lg {
    input[type=checkbox] + span:before {
      width: 27px;
      height: 27px;
      font-size: .875rem;      
      line-height: 23px;
    }
  }

  &.check-sm {
    input[type=checkbox] + span:before {
      width: 19px;
      height: 19px;
      font-size: .625rem;      
      line-height: 15px;
    }
  }
}

// RADIO
$radio-border-color: $color-blue !default;
$radio-text-color: white !default;
$radio-bg-color: $color-blue !default;

.ingaia-radio {
  label {
    display: inline-block;    
  }

  span {
    cursor: pointer;
    &:before {
      border: 3px solid $radio-border-color;
    }
    &:hover:before {
      box-shadow: inset 0px 0px 3px $radio-border-color, 0px 0px 3px $radio-border-color;
    }
  }

  input[type=radio] {
    display: none
  }

  input[type=radio] + span:before {
    content: "";
    width: 22px;
    height: 22px;
    font-size: .75rem;
    line-height: 18px;
    display: inline-block;
    visibility: visible;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    text-align: center;    
    cursor: pointer;    
    position: relative;
    background: transparent;
    padding: 0;    
    margin-right: 5px;
    vertical-align: text-bottom;    
  }

  input[type=radio]:checked + span:before {
    font-family: 'ingaia-font-icons';    
    content: "\E0D3";
    color: $radio-text-color;
    background-color: $radio-bg-color;
    display: inline-block;
    vertical-align: text-bottom;
  }

  &.radio-lg {
    input[type=radio] + span:before {
      width: 27px;
      height: 27px;
      font-size: .875rem;      
      line-height: 23px;
    }
  }

  &.radio-sm {
    input[type=radio] + span:before {      
      width: 19px;
      height: 19px;
      font-size: .625rem;      
      line-height: 15px;
    }
  }
}