@import "../variables";

.btn {
  border-width: $btn-border-width;
  font-family: $font-family-headings;
  font-weight: 700;
  font-size: $font-size-large;
  padding: 9px 12px;
}

.btn-default {
  &:focus,
  &.focus {
    background-color: $btn-default-bg-focus;
    border-color: $btn-default-bg-focus;
  }

  &:hover,
  &.hover {
    background-color: $btn-default-bg-hover;
    border-color: $btn-default-bg-hover;
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-color: $btn-default-bg-active;
    border-color: $btn-default-bg-active;

    &:hover,
    &:focus,
    &.focus {
      background-color: $btn-default-bg-active;
      border-color: $btn-default-bg-active;
    }

  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    background-image: none;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    background-color: $disabled-gray;
    border-color: $disabled-gray;

    &:hover,
    &:focus,
    &.focus {
      background-color: $disabled-gray;
      border-color: $disabled-gray;
    }
  }
}