// form ::: generic components

.form {

  // General

  .input-stacked {
    @include position(relative); padding: .5em 1em .9em;
    @include bottom-border($neutralColor); &:last-child { @include no-bottom-border; }

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

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

  // Validation error

  .error-message { color: $assertiveColor; font-size: .8em; margin-left: .5em; }

  // Required

  .input-required .label:before { content: '*'; color: $assertiveColor; @include position(absolute, null null null .38em); }

  // Disabled

  .input-disabled { textarea, input { color: lighten($black, 20%); } }

  // Character counter

  .input-character-counter { font-size: .8em; margin-left: .5em; &.exceeds { color: $assertiveColor; } }

  // Information box

  .form-information {
    margin     : 1em 1em 0;
    padding    : 1em;
    background : $neutralColor;
    text-align : center;
  }

}