@mixin internal-potato-button($color, $bgcolor, $border-color) {
  @include single-text-shadow(rgba(0, 0, 0, 0.4), 0,-1px);
  @include potato-background($bgcolor);
  @include border-radius(3px);

  display: inline-block;

  font-weight: bold;
  line-height: 14px;
  vertical-align: top;

  margin-top: 0.10em;
  margin-left: 5px;
  margin-right: 5px;
  padding: 0.5em 0.5em 0.5em 0.5em;

  border: 1px solid $border-color;
  color: $color;
  text-decoration: none;

  cursor: pointer;

  &.big {
    font-size: 18px;
  }

  &:focus {
    border: 1px solid white;
    @include box-shadow($bgcolor 0px 0px 3px 0px);
  }

  &:hover {
    color: $color;
    @include potato-background(lighten($bgcolor, 10%));
  }

}


.less-important-button {
  @include internal-potato-button( black, lighten(black, 80%), lighten(black, 65%));
  @include single-text-shadow(none);
}


.important-button, .formtastic .important-button {
  @include internal-potato-button($important-button-color, $important-button-bg-color, $important-button-border-color);
}

.disabled-button {
  @include internal-potato-button( lighten(black, 80%), white, lighten(black, 85%));
  @include single-text-shadow(none);
  cursor: default;
}

.button.next, a.next {
  float: right;
  margin-bottom: 1em;
  clear: both;
}

.confirm-or-cancel {

  .button.next, a.next {
    clear: none;
  }

  .button.cancel, a.cancel {
    float: left;
    margin-top: 2.5em;
  }

}


.dangerous-button, .formtastic .dangerous-button {
  @include internal-potato-button(white, darken($delete-color, 10%), $delete-color );
}


.formtastic .buttons {
  button, input[type='submit'] {
     height: 2.45em;
  }
}

form.formtastic .button-bar fieldset {
  margin: 0;
}

// Lame but functional, improvements welcomed.
form.formtastic .button-bar, .button-bar {
  height: 40px;
  position: relative;

  .important-button, .less-important-button, .dangerous-button {
    @include box-sizing(content-box);

    font-size: 100%;

    margin: 0;
    height: 1.3em;
    line-height: 15px;
  }

  & > fieldset {
    margin: 0;

    &.buttons:first-child {
      position: absolute;
      left: 0px;
      text-align: left;
      padding-left: 0;

      & > ol > li {
        margin-right: 0.5em;
      }
    }

    &.buttons:last-child {
      position: absolute;
      width: 65%;
      right: 0px;
      text-align: right;
      padding-right: 0;
      color: green;

      & > ol > li {
        margin-left: 0.5em;
      }

    }

    & > ol > li { display: inline-block; }
  }
}

.outline-button {
  border: 1px solid $border-color;
  @include border-radius(3px);
  padding: 3px 6px 3px 6px;

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

}