/*
  Forms
*/

form {

  &.small {
    @include span-columns(6);
  }

  &.medium {
    @include span-columns(9);
  }

  &.large {
    @include span-columns(12);
  }

  @include span-columns(12);
  margin-bottom: 20px;

  > .field_with_errors:first-child,
  > label {
    @include span-columns(3);
    padding: 11px 0;
    line-height: 16px;
  }

  > .field_with_errors {

    input {
      border: $input-border-width solid $flash-error;

      &:hover,
      &:focus {
        border-color: $flash-error;
      }

      &:focus {
        color: $input-text;
      }
    }
  }

  input {

    @include span-columns(9);
    background-color: $input-primary;
    color: $input-text;
    font-size: 16px;
    padding: $input-padding;
    height: 44px;
    border: none;

    &:hover {
      border: $input-border-width solid lighten($input-secondary, 20%);
      padding: $input-padding ($input-padding - $input-border-width);
    }

    &:focus {
      border: $input-border-width solid $input-secondary;
      padding: $input-padding ($input-padding - $input-border-width);
      color: $input-secondary;
      outline: none;
      background: transparent;
    }
  }

  .controls {
    @include span-columns(9);
    @include shift(3);
    margin-bottom: 20px;

    input {

      @include button($button-secondary);
      margin-bottom: 0;
      outline: none;
    }
  }
}