form {
  @extend %reset-margin;
  @extend %reset-padding;
}

label {
  @extend %bold-elements;
  @include padding-leader;
  display: inline-block;
}

input,
%button { background-image: none; }

input[type="text"],
%button {
  @include rhythm-borders(1px, .5);
  display: block;
  border: {
    color: $color-border;
    radius: $border-radius;
  }
  padding: {
    right: $gutter-width;
     left: $gutter-width;
  }
  width: 100%;
  vertical-align: middle;

  @include breakpoint($mobile-large) {
    display: inline-block;
    width: auto;
  }
}


input {
  &[type="text"] {
    @each $placeholder in "-moz", ":-moz", "-ms", ":-webkit" {
      &:#{$placeholder}-placeholder { color: $color-text-weak; }
    }
    box-shadow: 0 1px 1px $color-shadow inset;
    transition: color-border ease-in-out 0.15s,
                box-shadow ease-in-out 0.15s;

    &:focus {
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
                  0 0 8px rgba(red($color-accent),
                               green($color-accent),
                               blue($color-accent), 0.6);
      color-border: $color-accent;
      outline: 0;
      background: $color-background;
    }
  }

  &[type="radio"],
  &[type="checkbox"] {
    @extend %tab-focus;
    margin: 4px 0 0 {
      top: 1px \9;
    }
    line-height: normal;
  }
}

%button {
  @extend %bold-elements;
  box-shadow: 0 2px 1px $color-shadow;
  white-space: nowrap;
  background: $color-background-shade;
  vertical-align: middle;
  cursor: pointer;
  text-align: center;

  &,
  &:hover,
  &:focus { color: $color-text-strong; }

  &:hover,
  &:focus {
    background: lighten(mix($color-background-shade, $color-accent), 25);
  }

  &:focus { @extend %tab-focus; }

  &:active,
  &.active {
    box-shadow: inset 0 3px 5px $color-shadow;
    outline: 0;
  }
}

button { @extend %button; }

%tab-focus {
  outline: thin dotted $color-text;
  outline: 5px auto -webkit-focus-ring-color {
    offset: -2px;
  }
}