.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; }


  // nested form
  .nested-forms {
    & > .label { margin-bottom: .25em; }
    & > ul { margin: 0; padding: 0; }
    & > ul > li { list-style-type: none; margin-top: 1em; @include position(relative); border: 1px solid $neutralColor; }
    & > ul > li:first-child { margin-top: 0; }
    & > ul > li > .icon-reorder { left: 0; top: 1em; }
    & > ul li.reorderable { background-color: $white; }
    & > ul li.reorderable > .input-stacked:first-child { padding-left: 2.4em; }
  }

  .nested-form-new {
    color: $positiveColor; margin-top: .75em; display: inline-block; font-size: .9em;
    &:hover { opacity: .5; }
  }

  .nested-form-delete {
    @include position(absolute, .35em .3em null null); border-radius: 1em;
    @include hide-text; width: 1.5em; height: 1.5em;  background-color: rgba(0,0,0,.05);
    &:before { content: '\00d7'; color: $stableColor; line-height: 1.35em; @include position(absolute, null 7px null null); }
    &:hover  { background-color: $positiveColor; &:before { color: $white; } }
  }


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


  // disabled
  .input-disabled { textarea, input { color: $stableColor; } }


  // string
  .input-string  {
    .twitter-typeahead { width: 100%; }
    .tt-suggestions    { padding: .1em .5em; margin: 0 0 0 -.5em; background: rgba(255,255,255, .95); }
    .tt-suggestion     { cursor: pointer; opacity: .5;
      p                { line-height: 1.5; margin: 0; }
      &.tt-cursor      { opacity: 1; }
    }
  }

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


  // text
  .input-text { min-height: 82px;
    textarea { resize: none; overflow: auto; box-sizing: border-box; min-height: 20px; }
  }


  // select
  .input-select select { margin-top: 0.15em; }


  // checkbox
  .input-checkbox { padding: .8em 1em 1em;
    input  { display: inline; width: auto; margin-right: .5em; }
    .label { display: inline; cursor: pointer; }
  }


  // switch
  .input-switch { padding-top: .75em;
    .label  { cursor: pointer; }
    .switch { @include switch; float: right; }
  }


  // color
  .input-color {
    position: relative; padding-left: 4.75em;

    .preview {
      @include position(absolute, .65em null null 1em);
      width: 50px; height: 50px; border-radius: 4px; background-color: #eee;
    }
  }


  // list
  .input-list {
    input   { padding-left: 2em; margin-top: .1em; }
    ul      { line-height: 1.5; margin: 0 0 0 2em; list-style: none; padding: 0; }
    ul li   { @include user-select(none); position: relative; }
    ul li a { color: $assertiveColor; font-size: .75em; }

    .slip-reordering { color: $positiveColor; }

    .icon-reorder {
      width:  25px;
      height: 25px;
      left:  -1.75em;
      &:before { left: 0; top: 9px; }
      &:after  { left: 0; top: 14px; }
    }

    .twitter-typeahead       { width: 100%; }
    .twitter-typeahead:after {
      content: '+';
      display: block;
      width: 40px;
      height: 24px;
      position: absolute; left: 12px; top: -3px;
      font-size: 22px;
      color: $contrastColor;
    }

    .tt-suggestions { padding: .1em .5em; margin: 0 0 0 1.55em; background: rgba(255,255,255, .95); }
    .tt-suggestion  { cursor: pointer; opacity: .5;
      p             { line-height: 1.5; margin: 0; }
      &.tt-cursor   { opacity: 1; }
    }
  }


  // file
  .input-file { min-height: 102px; // NOTE: calculated based on image thumbnail size

    a { color: $positiveColor; @include truncate; }
    a:hover { text-decoration: underline; }

    input[type=file] { margin-top: .5em; margin-left: 1.75em; }
    input[type=checkbox] { display: inline; width: auto; margin-right: .5em; margin-left: 1em; }
    label { display: inline; font-size: .8em; }

    &.empty {
      img, a, label, input[type=checkbox] { @include hide; }
      input[type=file] { margin-top: .2em; }
    }
  }

  .input-file-clear {
    display: inline-block; width: 1.5em; height: 1.5em;  background-color: rgba(0,0,0,.05);
    @include position(absolute); border-radius: 1em; margin-top: -22px;
    &:before { content: '\00d7'; color: $stableColor; line-height: 1.35em; @include position(absolute, null 7px null null); }
    &:hover  { background-color: $positiveColor; &:before { color: $white; } }
  }


  // input
  .input-image { @extend .input-file; }
  .input-image:not(.empty) {
    padding-left: 6.5em;
    position: relative;
    img {
      position: absolute;
      border-radius: 4px;
      left: 1em;
      top: .8em;
      width: 4.7em;
    }
  }
}