// Buttons
//
// Use any of the available button classes to quickly create a styled button.
//
// Styleguide Components.button

.btn {
  @include button-size($btn-default);

  display: inline-block;
  cursor: pointer;
  user-select: none;

  margin-bottom: 0; // For input.btn

  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 0 solid transparent;
  border-bottom-width: $btn-edge-width;

  font-weight: $btn-font-weight;
  text-align: center;
  vertical-align: middle;

  transition: $btn-transition;

  &:focus {
    @include tab-focus();
  }

  &:hover,
  &:focus {
    text-decoration: none;
  }

  &:hover,
  &:active {
    outline: none;
  }

  &:active,
  &.active {
    // "Depressed" effect. We swap the border width to the top so we don't
    // affect surrounding layout.
    border: $btn-edge-width solid transparent;
    background-clip: padding-box;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
    pointer-events: none; // Future-proof disabling of clicks
    opacity: .65;
    box-shadow: none;
  }
}


// Alternate buttons
// We intentionally make .btn's more specific to resolve color conflicts with
// .u-bg-dark handling for standard links. Selectors are repeated to bump up
// specificity (without using !important)
// see: http://cssguidelin.es/#hacking-specificity

// Button sizes
//
//
// Markup:
// <div class="row">
//     <div class="col-xs-12 col-md-6">
//         <button class="btn btn-primary {{modifier_class}}">Button Element</button>
//         <input class="btn btn-secondary {{modifier_class}}" type="button" value="Input Button" />
//         <input class="btn btn-tertiary {{modifier_class}}" type="button" value="Tertiary" />
//     </div>
// </div>
//
// .btn-lg - Large sized button
// .btn-sm - Small sized button
// .btn-xs - Extra-small sized button
// .btn-block - Block sized button
//
// Styleguide Components.button.sizes

.btn.btn.btn-success   { @include button-variant($btn-success)  }
.btn.btn.btn-danger    { @include button-variant($btn-danger)   }


// Button Sizes
// --------------------------------------------------

.btn-lg,
%btn-lg {
  @include button-size($btn-lg);

  border-bottom-width: $btn-lg-edge-width;

  &:active,
  &.active {
    border-top-width: $btn-outline-width;
    border-bottom-width: $btn-outline-width;
  }
}

.btn-sm,
%btn-sm {
  @include button-size($btn-sm);
}

.btn-xs,
%btn-xs {
  @include button-size($btn-xs);

  border-bottom-width: $btn-xs-edge-width;

  &:active,
  &.active {
    border-top-width:    $btn-xs-edge-width;
    border-bottom-width: 0;
  }
}


// Block button
// --------------------------------------------------

.btn-block {
  display: block;
  width: 100%;

  // Vertically space out multiple block buttons
  + .btn-block {
    margin-top: 5px;
  }
}

// Specificity overrides
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}

// Button colors
//
//
// Markup:
// <button class="btn {{modifier_class}}">Button Element</button>
// <input class="btn {{modifier_class}}" type="button" value="Input Button" />
//
// .btn-primary - Primary / Default
// .btn-secondary - Secondary
// .btn-tertiary - Tertiary
// .btn-primary.active - Primary active state
// .btn-secondary.active - Secondary active state
// .btn-tertiary.active - Tertiary active state
// .btn-primary.disabled - Primary disabled state
// .btn-secondary.disabled - Secondary disabled state
// .btn-tertiary.disabled - Tertiary disabled state
//
// Styleguide Components.button.colors

// Primary buttons
// -------------------------
.btn-primary, .btn.btn.btn-primary, .btn.btn.btn-default, .btn-default,  {
  background-color: $semantic-color-primary;
  color: ui-color(u-white);

  font-family: "Circular", Helvetica, sans-serif;

    &:hover {
      background: #ff8355;
    }

    &:active,
    &.active {
      background: #dd3b00;
    }
}


// Link buttons
// -------------------------

// Make a button look and behave like a link
.btn-tertiary, .btn-link, .btn.btn.btn-tertiary {
  @include link-color();
  @include link-state-colors();
  @include btn-link-negative-margin($btn-default);

  cursor: pointer;
  border-radius: 0;
  font-weight: normal;

  &,
  &:active,
  &[disabled],
  fieldset[disabled] & {
    background-color: transparent;
    box-shadow: none;
  }

  &,
  &:hover,
  &:focus,
  &:active {
    // Remove .btn border styles
    border: 0 solid transparent;
  }

  &:hover,
  &:focus {
    background-color: transparent;
  }

  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      color: $btn-link-disabled-color;
      text-decoration: none;
    }
  }

  &.btn-lg { @include btn-link-negative-margin($btn-lg); }
  &.btn-sm { @include btn-link-negative-margin($btn-sm); }
  &.btn-xs { @include btn-link-negative-margin($btn-xs); }

  .text-center &,
  .btn + &,
  &.btn-block {
    margin-left: initial;
  }

  &:hover {
    background: #fafafa;
  }

  &:active,
  &.active {
    background: #eaeaea;
    color: #00577d;
  }

}


// Outline Buttons
// --------------------------------------------------



.btn-secondary, .btn-outline, .btn.btn.btn-secondary {
  @include link-color();
  @include link-state-colors();

  background-color: transparent;
  border: $btn-outline-width solid currentColor;

  &:hover,
  &:focus,
  &:active {
    border: $btn-outline-width solid #00577d;
    background-color: $btn-outline-hover-bg;
    color: #00577d;
  }

  &:active,
  &.active {
    background-color: #00577d;
    color: ui-color(u-white);
  }

  &:hover {
    box-shadow: inset 0 0 0 1px #00577d;
  }
}