// // Default Form Elements // —————————————-

label {

display: inline-block;

}

.form-input {

background-color: $input-bgr-color;
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
color: $input-font-color;
display: block;
font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes
line-height: $line-height-regular; // set line height since it was resetted by normalize
padding: $input-padding;
width: 100%;
@include placeholder($input-font-color-placeholder);
-webkit-appearance: none;
@include transition(all $transition-time-out $transition-function);

&.hover,
&:hover { // on input fields the cursor indicates focus, so we need no hover on focuesed states
  background-color: hsv-darken($input-bgr-color, 7%, true);
  @include transition($transition-time-in, '-duration');
}

@include form-control-focus($input-bgr-color);

&.active,
&:active {
  background-color: hsv-darken($input-bgr-color, 15%, true);
}

&.disabled,
&.readonly,
&[disabled],
&[readonly] {
  background-color: $input-disabled-bgr-color;
  border-color: $input-disabled-border-color;
  color: $input-disabled-font-color;
  cursor: not-allowed;
  resize: none;
  @include placeholder($input-disabled-font-color-placeholder);
}

}

// firefox fix to prevent textareas < one line textarea.form-input { min-height: $input-min-height; }

.decoration-positive { @include input-decoration-variant($color-positive, $color-positive, $background-color-regular); } .decoration-warning { @include input-decoration-variant($color-warning, $color-warning, $background-color-regular); } .decoration-negative { @include input-decoration-variant($color-negative, $color-negative, $background-color-regular); }

.form-input-set {

display: block;
margin-bottom: building-units(1);

> label {
  display: block;
  font-size: $font-size-small;
  @include margin-top-bu(1, $font-size-small);
  @include margin-bottom-bu(.5, $font-size-small);
}

}

// default checkbox/radio style .form-radio, .form-checkbox {

width: 24px;
height: 24px;

}

.form-radio-set, .form-checkbox-set {

display: block;
margin-bottom: 12px;

label {
  display: block;
  padding-left: 36px; // reset label to left align on small screens = width + margin of radio/checkbox
  cursor: pointer;
  line-height: 24px;
}

&.disabled label {
  cursor: not-allowed;
  color: $input-disabled-font-color;
}

}

.form-radio-set .form-radio, .form-checkbox-set .form-checkbox {

vertical-align: middle;
float: left;
margin-left: -36px; // reset label to left align on small screens = width + margin of radio/checkbox
margin-right: 12px;

}

.form-fieldset {

border: 0;
padding: 0 12px;
margin: 0;
min-width: 0;

> legend {
  color: $color-gray;
  display: block;
  width: 100%;
  box-sizing: content-box;
  padding: 0 12px;
  margin: 0 -12px;
  padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular);
  border-bottom: 1px solid #b2b2b2;
}

> legend + * {
  -webkit-margin-top-collapse: separate;
  margin-top: 12px;
}

}

// fieldset width fix for ff // @-moz-document url-prefix() { // .form-fieldset { // display: table-cell; // } // }

.form-select {

background-color: #ededed;
border: 1px solid $input-border-color;
border-radius: $input-border-radius;
color: $input-font-color;
display: block;
font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes
line-height: $line-height-regular; // set line height since it was resetted by normalize
padding: $input-padding;
width: 100%;

option {
  background-color: #fff; // reset background color
}

&.focus,
&:focus {
  background-color: #ededed;
  outline: 0;
}

&.hover,
&:hover {
  background-color: hsv-darken(#ededed, 7%, true);
}

&.active,
&:active {
  background-color: hsv-darken(#ededed, 15%, true);
}

&.disabled,
&.readonly,
&[disabled],
&[readonly] {
  background-color: #f7f7f7;
  border-color: $input-disabled-border-color;
  color: $input-disabled-font-color;
  cursor: not-allowed;
  resize: none;
  @include placeholder($input-disabled-font-color-placeholder);
}

}

.has-icon {

position: relative;

.form-input {
  padding-left: 36px;

  .input-group-large & {
    padding-left: 52px;
  }
}

}

.form-icon {

position: absolute;
top: 0;
left: 0;
z-index: 3;
display: block;
text-align: center;
pointer-events: none;
width: 36px;
height: 36px;
line-height: 36px;

}