// Forms
//
// TODO: More variety
//
// Markup:
// <legend>Legend</legend>
// Input: <input/>
// <label>Label</label>
// Select:
// <select>
//    <option>Option 1</option>
//    <option>Option 2</option>
// </select>
// <textarea>Textarea</textarea>
//
// Styleguide elements.forms


form {
  text-align: left;
}

fieldset {
  border-top: 1px solid $base-border-color;
  padding-bottom: $base-padding;

  > fieldset {
    border-top: none;
  }
}

legend {
  @extend .sr-only;
}

input,
label,
select {
  display: block;
  font-size: $base-font-size;

}

label {
  color: $gray-darkest;
  margin-bottom: $base-line-height / 4;

  &.required:after {
    content: '*';
  }

  abbr {
    display: none;
  }
}

textarea,
#{$all-text-inputs},
select[multiple=multiple] {
  font-size: $base-font-size;

  @include placeholder {
    color: $gray-darkest;
    font-weight: $weight-book;
    opacity: 1;
  }

  @include transition(border-color);

  background-color: $white;
  border: 1px solid $form-border-color;
  border-radius: $form-border-radius;
  box-shadow: none;
  box-sizing: border-box;
  margin-bottom: $base-padding;
  padding: 0.6em 0.8em;
  width: 100%;

  &:hover {
    border-color: $form-border-color-hover;
  }

  &:focus {
    outline: none;
  }
}

textarea {
  resize: vertical;
}


input[type='file'] {
  margin-bottom: $base-line-height / 2;
  padding-bottom: ($base-line-height / 3);
  width: 100%;
}

select {
  @include appearance(none);

  background-color: $gray-pale;
  background-image: url('../img/icons/chevron-down-sprite.svg');
  background-position: 99% 54%;
  background-repeat: no-repeat;
  background-size: 1.5rem;
  border: 0;
  border-radius: $form-border-radius;
  color: $gray-darkest;
  font-weight: $weight-light;
  height: 40px;
  margin-bottom: 1em;
  overflow: hidden;
  padding: 0.5em 14% 0.5em 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;

  &:focus {
    box-shadow: $form-box-shadow-focus;
    outline: none;
  }

  &::-ms-expand {
    display: none;
  }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}
