// form ::: generic components

.form {

  // label

  label { display: block; }

  // 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: $stableColor; } }

  // character counter

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

}