/*------------------------------------*\
  #FORM ELEMENTS
\*------------------------------------*/

input, select, textarea {
  @include font-size(base);
  transition: all .1s ease;
  background-color: palette(gray, lightest);
  border: 1px solid palette(gray, lighter);
  border-radius: 3px;
  color: palette(gray, dark);
  padding: 10px $spacing-unit;
}

input, select, textarea {
  &:focus {
    outline: 3px solid palette(blue);
    background-color: palette(gray, lightest);
    outline-offset: -3px;
  }
}

label {
  font-weight: bold;
  @include font-size(small);
}

::-webkit-input-placeholder /* Chrome/Opera/Safari */,
::-moz-placeholder /* Firefox 19+ */,
:-ms-input-placeholder /* IE 10+ */,
:-moz-placeholder /* Firefox 18- */, {
  color: palette(gray, dark);
  opacity: 1;
}

button {
  font: inherit;
  -webkit-appearance: none;
}