// Form (generic components) ------------------------------ */
.form {
  button {
    line-height: 1.4em;
    border-radius: 4px;
    padding: .25em .75em;
    border: 1px solid $formagic-positive-color;
    color: $formagic-positive-color;
    background-color: $white-color;

    &:hover {
      background-color: $formagic-positive-color;
      border-color: $formagic-positive-color;
      color: $white-color;
    }
  }
}

// General
.form-input {
  @include position(relative);
  @include bottom-border($formagic-border-color);

  padding : .5em 1em .9em;
  display : block;

  &:last-child { @include no-bottom-border; }

  textarea, input {
    @include no-outline;
    @include placeholder { color: $formagic-placeholder-color; }
    width : 100%;
  }

  .label {
    line-height : 1.8;
    display     : block;
    color       : $formagic-label-color;
  }
}

// Validation error
.error-message {
  margin-left : .5em;
  font-size   : .8em;
  color       : $formagic-assertive-color;
}

// Required
.input-required .label:before {
  @include position(absolute, null null null .45em);
  content : '*';
  color   : $formagic-assertive-color;
}

// Disabled
.input-disabled {
  textarea, input {
    color : lighten($formagic-base-color, 50%);
  }
}

// Character counter
.input-character-counter {
  margin-left : .5em;
  font-size   : .8em;

  &.exceeds {
    color : $formagic-assertive-color;
  }
}

// Information box
.form-information {
  background : $formagic-border-color;
  text-align : center;
  margin     : 1em 1em 0;
  padding    : 1em;
}