.button {
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  background: $blue;
  color: white;
  display: inline-block;
  border: 0;
  line-height: 1;

  &:focus,
  &:active,
  &:hover {
    background: $darkBlue;
    color: white;
    cursor: pointer;
  }
}

.form-explanation {
  margin-top: -0.3em;
  color: $charcoal;

  @include susy-breakpoint($tablet) {
    @include span(10);
    clear: both;
    text-align: right;
  }
}

.form-error {
  margin-top: -0.3em;
  color: $red;

  @include susy-breakpoint($tablet) {
    @include prefix(4);
    @include span(10);
    clear: both;
  }
}

.form-input-error input {
  border-color: $red !important;
}

.form-select {
  font-size: 0.8em;
  font-weight: bold;
}

.form-input-radio {
  position: relative;

  > label {
    position: relative;
    left: 1.5em;
  }

  > input {
    position: absolute;
    top: 0.2em;
    left: 0;
  }
}

.form-input-checkbox {
  position: relative;
  padding-bottom: 0.2em;
}

.form-actions {
  margin: 0.6em 0;
  text-align: right;
}

.form-actions-big {
  margin: 0.6em 0;

  > input,
  button {
    display: inline-block;
    padding: 0.6em 1.2em;
  }

  > a {
    margin: 0.6em 1.2em;
  }
}

label {
  font-weight: bold;
  line-height: 1.6;
}

label.required:after {
  content: '*';
  color: $red;
}

fieldset {
  padding-top: 1em;
  border: 1px solid $lightGrey;
  border-radius: 3px;
}

@-webkit-keyframes autofill {
  to {
    color: $grey;
    background: $white;
  }
}

input[type='text'],
input[type='password'],
input[type='url'],
input[type='email'],
select,
textarea {
  width: 100%;
  padding: 0 10px;
  margin-bottom: 0.5em;
  border: 1px solid $charcoal;
  border-radius: 3px;
  background: $white;
  color: $black;
  line-height: 1.6;

  &:focus {
    border-color: $blue;
  }

  &:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
  }
}

@include susy-breakpoint($tablet) {
  .form-inputs {
    .input {
      padding-bottom: 0.3em;
      overflow: hidden;
    }

    label {
      @include span(4);
      text-align: right;
      clear: left;
    }

    input[type='text'],
    input[type='password'],
    input[type='url'],
    input[type='email'],
    select,
    textarea,
    .form-select {
      @include span(6);
    }
  }

  .form-inputs-big {
    label {
      margin: 1em 0 0.3em 0;
      display: block;
    }

    input[type='text'],
    input[type='password'],
    input[type='url'],
    input[type='email'],
    textarea,
    .form-select {
      display: block;
      padding: 0.6em 1.2em;
    }

    .form-explanation {
      width: 100%;
    }
  }

  .form-actions {
    @include span(10);
  }

  .form-actions-big {
    margin: 1.2em 0;
  }

  .control-label abbr {
    border: none;
    color: $red;
  }

  .form-control {
    &:after,
    &:before {
      content: '';
      display: block;
      clear: both;
    }
  }
}

.form-checkbox-group {
  margin: 0 0 1.5em 0;
  padding: 0;

  li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    @include susy-clearfix();
  }

  label {
    display: block;
    font-weight: normal;
    width: 100%;
  }

  input {
    margin-right: 0.25em;
  }

  @include susy-breakpoint($tablet) {
    @include span(6);

    label {
      text-align: left;
    }
  }
}