//----form style----//

//--checkbox
%unchecked{

  width:       #{$unchecked_width};
  height:      #{$unchecked_height};
  background:  $unchecked_background;
  border:      $unchecked_borderWidth $unchecked_borderStyle $unchecked_borderColor;
  position: absolute;
  // top: calc(50% - #{$unchecked_width / 2});
  top: 50%;
  transform: translateY(-50%);
  // left: set-position($checkbox_position, before);
  left: 0;


}
%checked{

  width:       #{$checked_width};
  height:      #{$checked_height};
  background:  $checked_background;
  border:      $checked_borderWidth $checked_borderStyle $checked_borderColor;
  position: absolute;
  // top: calc(50% - #{($checked_height / 2) - $unchecked_borderWidth });
  top: 50%;
  transform: translateY(-50%);
  left: #{$unchecked_width - $checked_width + 0px};
}
input[type="checkbox"]{
  opacity: 0;
  position: absolute;
  // @extend .isHidden;
}
input[type="checkbox"] + label{
  display: block;
  position: relative;
  @if $checkbox_position == "left" {
    padding-right: #{$unchecked_width + 15px};
  }@else{
    padding-left: #{$unchecked_width + 15px};
  }

  cursor: pointer;

  &::before, &::after{
    content: '';
    display: block;
    cursor: pointer;
  }
  &::before{
    @extend %unchecked;
  }
  &::after{
    @extend %checked;
    opacity: 0;
  }
}
input[type="checkbox"]:checked{
  & + label::after{
    opacity: 1;
  }
}