/**
* @section Buttons
*/

/**
* __Usage:__ For general actions and secondary actions.
*
* Buttons that follow other buttons automatically get left margin for nice spacing. If you don't want this behavior, add class `no-autospace` to any buttons that you don't want margin-left automatically applied.
*
* Add the class `danger` for buttons with irreversible/dangerous actions.
*
* @section Default Button
* @sectionof Buttons
* @example
* <button>Default Button</button>
* <button class="disabled">Disabled Default Button</button>
* <div style="margin-top: 1em;">
*   <button>Button</button>
*   <button class="no-autospace">Button</button>
*   <button class="danger">Danger button</button>
* </div>
*/
button {
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  background-color: @clr-button;
  color: @clr-text;
  line-height: 1.6em;
  text-align: center;
  border: 1px solid @clr-frame;
  border-radius: 4px;
  margin-bottom: 0; // For input.btn
  padding: 0.25em 0.75em;
  box-shadow: 0 1px 0 @clr-frame;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
  &.danger {
    color: @clr-red;
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      color: @clr-red;
    }
  }
  & + button:not(.no-autospace),
  & + a.button-spacing:not(.no-autospace),
  & + bs-tooltip-container + button:not(.no-autospace) {
    margin-left: 0.75em;
  }
  &:hover,
  &:focus,
  &.focus {
    color: @clr-text;
    text-decoration: none;
    box-shadow: 0 1px 0 @clr-frame, inset 0 -1px 2px rgba(0,0,0,0.1);
    outline: none;
  }
  &:active,
  &.active {
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.25);
    transform: translateY(1px);
  }
  &.flush {
    padding: 0;
    border: none;
  }
  &.flush-sides {
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0px;
    border-right-width: 0px;
  }
  &.flush-icon:before {
    margin: 0;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
    opacity: 0.65;
    pointer-events: none;
    &:active {
      box-shadow: 0 1px 0 @clr-frame;
      transform: none;
    }
  }
  a& {
    &.disabled,
    fieldset[disabled] & {
      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
    }
  }
}

/**
* __Usage:__ Add an associated color to a button. For use with graph controls, where the button's color is associated with the color of a data point.
*
* Add the class `active` if the button is activated.
*
* __To set a color__, name-space the button and style the `border-top-color` and `.active` `background-color`.
* You may also need to set the `.active` color to `#333` (or `@clr-text`) if the color you're using is too light for white text.
*
* _Example:_
* ```
* button.my-button-class {
*   border-top-color: green;
*   &.active,
*   &:active {
*     background-color: green;
*   }
* }
* ```
*
* @section Key Button
* @sectionof Buttons
* @example
* <button class="key">Show Data Point</button>
* <button class="key active">Data Point Showing</button>
*/
button.key {
  border-top: 3px solid darken(@clr-frame, 25);
  padding-top: 0.2em;
  &:active,
  &.active {
    background-color: darken(@clr-frame, 25);
    color: white;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.25);
  }
}

/**
* __Usage:__ Only for the "next logical step", such as "save", "next", etc. Only one per view.
*
* The user should expect that they can reliably click this to progress without having to really read it.
*
* Add the class `danger` to make a red primary button. For when an action is irreversible/dangerous.
*
* @section Primary Button
* @sectionof Buttons
* @example
* <button class="primary">Primary Button</button>
* <button class="primary disabled">Disabled Primary Button</button>
* <button class="primary danger">Dangerous Primary Button</button>
*/
button.primary {
  background-color: @clr-primary;
  border-color: @clr-primary-border;
  color: white;
  box-shadow: 0 1px 0 @clr-primary-border;
  &.danger {
    background-color: @clr-red;
    border-color: darken(@clr-red, 10);
    box-shadow: 0 1px 0 darken(@clr-red, 10);
    &:hover,
    &:focus,
    &.focus {
      background-color: lighten(@clr-red, 10);
      color: white;
    }
  }
  &:hover,
  &:focus,
  &.focus {
    background-color: lighten(@clr-primary, 5);
  }
  &:active,
  &.active {
    box-shadow: inset 0 3px 5px rgba(0,0,0,.25);
  }
}

/**
* __Usage:__ Rarely used. Only for actions that trigger a journey, such as "+ New Survey". Only 1 per view (if any).
*
* @section Special Action Button
* @sectionof Buttons
* @example
* <button class="special-action">Special Action Button</button>
* <button class="special-action disabled">Disabled Special Action Button</button>
*/
button.special-action {
  background-color: @clr-orange;
  border-color: darken(@clr-orange, 12);
  color: white;
  box-shadow: 0 1px 0 darken(@clr-orange, 12);
  text-shadow: 0 0.5px 2px darken(@clr-orange, 30);
  &:hover,
  &:focus,
  &.focus {
    background-color: lighten(@clr-orange, 5);
  }
  &:active,
  &.active {
    box-shadow: inset 0 3px 5px rgba(0,0,0,.25);
  }
}

/**
* __Usage:__ Indicates a supporting action, typically inside of a tab or accordion menu.
*
* This may also be used for an icon only button, otherwise always accompany a text button with an icon to differentiate from a standard link.
*
* Add the class `flush` to remove button padding.
*
* Add the class `flush-sides` to remove only the left/right padding.
*
* @section Text Button
* @sectionof Buttons
* @example
* <button class="text icon-add">Text Button</button>
* <button class="text icon-add disabled">Disabled Text Button</button>
* <button class="text icon-add flush">Flush Text Button</button>
* <button class="text icon-add flush-sides">Sides Flushed Text Button</button>
* <button class="text icon-add flush-icon"><span class="sr-only">Add</span></button>
*/
button.text {
  background-color: transparent;
  border-color: transparent;
  color: @clr-link;
  box-shadow: none;
  &:hover,
  &:focus {
    color: darken(@clr-link, 10);
  }
  &:active {
    color: darken(@clr-link, 10);
    box-shadow: none;
    transform: none;
  }
}

/**
* __Usage:__ For "remove" or "cancel" actions.
*
* Add the class `flush` to remove button padding.
*
* Add the class `flush-icon` to remove the icon's default margin.
*
* @section Clear Button
* @sectionof Buttons
* @example
* <button class="clear">Cancel</button>
* <button class="clear disabled">Cancel</button>
* <button class="clear icon-remove flush-icon"><span class="sr-only">Remove</span></button>
*/
button.clear {
  background-color: transparent;
  border-color: transparent;
  color: @clr-remove;
  box-shadow: none;
  &:hover,
  &:focus {
    color: @clr-red;
  }
  &:active {
    color: darken(@clr-red, 5);
    box-shadow: none;
    transform: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {color: @clr-remove;}
  }
}

/**
* __Usage:__ For toggle controls.
*
* Add class `active` to the activated button option.
*
* @section Button Group
* @sectionof Buttons
* @example
* <style>
*   button.option-one {border-top-color: blue;}
*   button.option-two.active {
*     background-color: purple;
*     border-top-color: purple;
*   }
*   button.option-three {border-top-color: forestgreen;}
*   button.option-four {border-top-color: brown;}
* </style>
* <div class="btn-group">
*   <button>Option 1</button>
*   <button>Option 2</button>
*   <button class="active">Option 3</button>
*   <button>Option 4</button>
* </div>
* <div style="margin-top: 1em;"></div>
* <div class="btn-group">
*   <button class="key option-one">Option 1</button>
*   <button class="key option-two active">Option 2</button>
*   <button class="key option-three">Option 3</button>
*   <button class="key option-four">Option 4</button>
* </div>
*
* @code
* <div class="btn-group">
*   <button>Option 1</button>
*   <button>Option 2</button>
*   <button class="active">Option 3</button>
*   <button>Option 4</button>
* </div>
* <div class="btn-group">
*   <button class="key option-one">Option 1</button>
*   <button class="key option-two active">Option 2</button>
*   <button class="key option-three">Option 3</button>
*   <button class="key option-four">Option 4</button>
* </div>
*/
.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  button {
    margin: 0;
    position: relative;
    float: left;
    & + button,
    & + bs-tooltip-container + button {
      margin-left: -1px;
    }
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
    &:first-child:not(:last-child) {
      margin-left: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:last-child:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &.active {
      background-color: @clr-blue;
      color: white;
      box-shadow: inset 0 3px 5px rgba(0,0,0,.25);
      transform: translateY(1px);
    }
    &:hover,
    &:focus,
    &:active,
    &.active {
      z-index: 2;
    }
  }
}

/**
* @section Button Sizes
* @sectionof Buttons
* @example
* <button class="small">Small Button</button>
* <button>Normal</button>
* <button class="large">Large Button</button>
* <div style="margin-top: 1em;">
*   <button class="block">Block Button</button>
* </div>
* @code
* <button class="small">Small Button</button>
* <button>Normal</button>
* <button class="large">Large Button</button>
* <button class="block">Block Button</button>
*/
button {
  &.small {
    padding-bottom: 0.35em;
  }
  &.large {
    padding-bottom: 0.35em;
  }
  &.block {
    display: block;
    margin: 0;
    width: 100%;
  }
}

/**
* Remember that [links are not buttons](http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/).
*
* Add the class `button-spacing` to add the same padding as buttons, for when links are inline with buttons. Add the class `flush-sides` to an `a.button-spacing` to flush the left and right padding.
*
* @section Links
* @sectionof Buttons
*
* @example
* <a href="#0">Standard Link</a>
* <a href="#0" class="button-spacing">Link w/ Button Spacing</a>
* <button>Button to Compare With</button>
* <a href="#0" class="button-spacing flush-sides">Link w/ Button Spacing & Flushed Sides</a>
*/
a.button-spacing {
  line-height: 1.6em;
  display: inline-block;
  vertical-align: middle;
  padding: 0.25em 0.75em;
  border: 1px solid transparent;
  & + button,
  & + &,
  & + bs-tooltip-container + button,
  & + bs-tooltip-container + & {
    margin-left: 0.75em;
  }
  &.flush-sides {
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0px;
    border-right-width: 0px;
  }
  &.flush-icon:before {
    margin: 0;
  }
}