// Forms
form {
  max-width: 100%;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea {
  max-width: 100%;
  height: $gutter;
  line-height: ($gutter - $borderWeight*2);
  padding: 0 $gutter/2;
  font-size: 1.125rem;
  border: $borderWeight $borderStyle $colorTwo;
  border-radius: $borderRadius;
  -webkit-appearance: none;
  @media only screen and (max-width: $s) {
    width: 100%;
    clear: both;
    margin-bottom: $gutter/3;
  }
  &.error {
    border-color: $colorThree;
  }
}
textarea {
  height: initial;
  line-height: $lineHeight;
  padding: $gutter/2;
  font-family: inherit; // for Firefox
}
label {
  line-height: inherit;
}
button, .button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select {
  max-width: 100%;
  height: $gutter;
  line-height: ($gutter - $borderWeight*2);
  padding: 0 $gutter/1.5;
  font-size: 1.125rem;
  color: lighten($colorOne, 25%);
  background-color: $colorOne;
  border: $borderWeight $borderStyle $colorOne;
  border-radius: $borderRadius;
  -webkit-appearance: none;
  -moz-appearance: none;
  @include transition();
  option {
    // for Firefox
    background-color: $colorBackground;
    border: 0;
    display: block;
    color: $colorText;
  }
  &:hover {
    background-color: darken($colorOne, 5%);
    border-color: darken($colorOne, 5%);
    color: lighten($colorOne, 35%);
    cursor: pointer;
  }
  &.alternate {
    color: lighten($colorTwo, 25%);
    background-color: $colorTwo;
    border: $borderWeight $borderStyle $colorTwo;
    &:hover {
      background-color: darken($colorTwo, 5%);
      border-color: darken($colorTwo, 5%);
      color: lighten($colorTwo, 35%);
    }
  }
  &:disabled, &.disabled {
    cursor: default;
    background-color: lighten($colorTwo, 30%);
    border-color: lighten($colorTwo, 30%);
    color: lighten($colorTwo, 0%);
    &:hover {
      @extend .disabled
    }
  }
  @include s() {
    width: 100%;
    clear: both;
    margin-bottom: $gutter/3;
  }
}
a.button {
  display: inline-block;
  text-decoration: none;
}
.select-wrapper {
  display: inline-block;
  position: relative;
  @media only screen and (max-width: $s) {
    width: 100%;
    clear: both;
    margin-bottom: $gutter/3;
  }
}
.errors, .note {
  padding: $gutter/3.5;
  margin: $gutter/2 auto;
  color: lighten($colorThree, 50%);
  background-color: $colorThree;
  border: $borderWeight $borderStyle $colorThree;
  border-radius: $borderRadius;
  li {
    margin-bottom: $gutter/3;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  a {
    color: lighten($colorThree, 50%);
  }
}
