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

//--input

%input{
  // font-size
  @include rem-size( $input_fontSize );

  font-family:    $input_fontFamily;
  font-style:     $input_fontStyle;
  font-weight:    $input_fontWeight;
  color:          $input_color;
  background:     $input_background;
  text-transform: $input_textTransform;
  border:         $input_border;
  border-radius:  $input_borderRadius;
  padding:        $input_padding;
  width:          $input_width;
}

input{
  padding: 10px;
  @extend %input;
}

%textarea{
  // font-size
  @include rem-size( $textarea_fontSize );

  font-family:    $textarea_fontFamily;
  font-style:     $textarea_fontStyle;
  font-weight:    $textarea_fontWeight;
  color:          $textarea_color;
  background:     $textarea_background;
  text-transform: $textarea_textTransform;
  border:         $textarea_border;
  padding:        $textarea_padding;
  width:          $textarea_width;
  height:         $textarea_height;
  max-width:      $textarea_maxWidth;
  max-height:     $textarea_maxHeight;

  resize: none;
}

textarea{
  padding: 10px;
  @extend %textarea;
}


//--placeholder
%placeholder{
  // font-size
  @include rem-size( $placeholder_fontSize );

  font-family:    $placeholder_fontFamily;
  font-style:     $placeholder_fontStyle;
  font-weight:    $placeholder_fontWeight;
  color:          $placeholder_color;
  text-transform: $placeholder_textTransform;

}

input::placeholder, textarea::placeholder {
  @extend %placeholder;
}