// Button
//
// In addition to the default styling of `<button>` and
// `<input type="submit|image|reset|button">` elements, the `.button` class and
// its variants can apply buttons styles to various elements (like an `<a>`
// link).

.button,
%button {
  background: color(button-bg);
  border-bottom: 2px solid color(form-element-border);
  color: color(button-color);
  font-weight: weight(bold);

  &:hover,
  &:focus {
    background-color: color(button-bg-hover);
    border-color: color(form-element-border-hover);
    color: color(button-color-hover);
    text-decoration: none;
  }

  // Re-set default cursor for disabled elements.
  &[disabled] {
    @include opacity(.65);
    color: color(text);

    &:hover,
    &:focus {
      background-color: color(button-bg);
      border-color: color(form-element-border);
      color: color(text);
    }
  }

  &--large {
    font-weight: weight(bold);
  }

  &--wide {
    // Inherit from agov_base.
  }
}
