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

//--radio
%unradio{

  width:       #{$unradio_width};
  height:      #{$unradio_height};
  background:  $unradio_background;
  border:      $unradio_borderWidth $unradio_borderStyle $unradio_borderColor;
  border-radius: $unradio_borderRadius;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  // top: calc(50% - #{$unradio_height / 2});
  left: set-position($radio_position, before);

}

%radio{

  width:       #{$radio_width};
  height:      #{$radio_height};
  background:  $radio_background;
  border:      $radio_borderWidth $radio_borderStyle $radio_borderColor;
  border-radius: $radio_borderRadius;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  // top: calc(50% - #{($radio_height / 2) });
  left: 0;
}
input[type="radio"]{
  opacity: 0;
  position: absolute;
  // @extend .isHidden;
}
input[type="radio"] + label{
  display: inline-block;
  position: relative;

  @if $radio_position == "left" {
    padding-left: #{$unradio_width + 15px};
  }@else{
    padding-right: #{$unradio_width + 15px};
  }
  cursor: pointer;

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