//
// Buttons
// --------------------------------------------------


// Base styles
// --------------------------------------------------

// Core styles
.btn {
  display: inline-block;
  padding: 5px 6px 4px 8px;
  margin-top: 0;
  margin-bottom: 0; // For input.btn
  font-family: "Open Sans Condensed", sans-serif;
  font-size: @font-size-base * 1.3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: @line-height-computed;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-color: @gray-lighter;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: none;
  border-radius: 3px;
  .box-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
  outline: none !important;
  white-space: nowrap;
  .user-select(none);

  &:focus,
  &.focus {
    .tab-focus();
  }

  &:hover,
  &:focus,
  &.focus {
    background-color: lighten(@gray-lighter, 5%);
    text-decoration: none;
    .transition(background-color .1s linear);
  }

  &:active,
  &.active {
    outline: 0;
    padding: 6px 5px 3px 9px;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: @cursor-disabled;
    pointer-events: none; // Future-proof disabling of clicks
    .opacity(65);
    .box-shadow(1px 1px 0 rgba(0, 0, 0, 0.15));
  }
}