// ========================================================================
// COMPONENTS => BUTTONS
// ========================================================================

/// `.button` contains the base styles.
/// Add additional modifier classes as needed.
/// 
/// @name     Button
/// @group    Components
/// 
/// @since    1.0.0
/// @access   public
/// @author   [William Pansky](mailto:william.pansky@sabre.com)
/// 
/// @example markup
///   <a class="button button-primary" href="#" />
///   <a class="button button-ghost button-large" href="#" />
/// 
/// @link     https://getuikit.com/ Button styles & core props forked via UIkit

/***
| TABLE OF CONTENTS
=======================
|– SETTINGS
|– SUMMARY
|– USAGE
|– FORKS & SOURCES
|
|– BASE CLASS:    .button
|  |------------- ::pseudo, cursor, etc.
|
|– MODIFIERS:     .button-primary
|  |------------- .button-secondary
|  |------------- .button-ghost
|  |------------- .button-danger
|  |------------- .button-disabled
|  |------------- .button-large
|  |------------- .button-small
|
|– STATE(s):      .active
***/



// SETTINGS
// ========================================================================
// -- globals
$button-border-radius:              0;
$button-font-size:                  1rem;
$button-line-height:                1.5;

// -- primary
$button-primary-color:              color(white, base);
$button-primary-background:         color(primary, base);
$button-primary-hover-color:        color(black, base);
$button-primary-hover-background:   color(accent, base);
$button-primary-active-color:       color(black, base);
$button-primary-active-background:  color(accent, base);

// -- secondary
$button-secondary-color:            color(black, base);
$button-secondary-background:       color(secondary, base);
$button-secondary-hover-color:      color(white, base);
$button-secondary-hover-background: color(accent, base);
$button-secondary-active-color:     color(white, base);
$button-secondary-active-background:color(accent, base);

// -- ghost
$button-ghost-border:               1px solid color(gray, light);
$button-ghost-color:                color(gray, dark);
$button-ghost-background:           color(white, base);
$button-ghost-hover-border-color:   color(gray, dark);
$button-ghost-hover-color:          color(black, base);
$button-ghost-hover-background:     color(white, base);
$button-ghost-active-border-color:  color(gray, dark);
$button-ghost-active-color:         color(black, base);
$button-ghost-active-background:    color(white, base);

// -- danger
$button-danger-color:               color(black, base);
$button-danger-background:          color(accent, base);
$button-danger-hover-color:         color(white, base);
$button-danger-hover-background:    color(accent, dark);
$button-danger-active-color:        color(white, base);
$button-danger-active-background:   color(accent, dark);

// -- disabled
$button-disabled-cursor:            not-allowed;
$button-disabled-color:             color(white, base);
$button-disabled-background:        color(gray, base);

// -- large
$button-large-font-size:            2.25rem;
$button-large-line-height:          1.625;
$button-large-padding-horizontal:   1.5rem;

// -- small
$button-small-font-size:            0.875rem;
$button-small-line-height:          1.15;
$button-small-padding-horizontal:   1rem;



// BASE CLASS
// ========================================================================
.button {
  box-sizing: border-box;
  display: inline-block;
  border: none;                     // Remove default borders from `button` elems.
  border-radius: $button-border-radius;
  color: inherit;                   // Correct `color` prop `button` elems.
  font: inherit;                    // Correct `font` prop `button` elems.
  font-size: $button-font-size;
  line-height: $button-line-height; // [*]
  text-align: center;               // Align text if button has a width.
  text-decoration: none;            // Required for `a` elems.
  text-transform: none;             // Remove the inheritance of in Edge, Firefox, and IE.
  padding: 0;
  margin: 0;                        // Remove margins in Chrome, Safari, and Opera.
  overflow: visible;                // Address `overflow: hidden` in IE.
  vertical-align: middle;

  /***
  [*] `line-height` is used to create a height because it also centers the 
      text vertically for `a class="button"` elements. Better would be to 
      use height and flexbox to center the text vertically (`vertical-align`) 
      but Flexbox doesn't work in Firefox on button elements.
  ***/

  // misc. additional props
  &:not(:disabled) { cursor: pointer; }
  &:hover { text-decoration: none; }
  &:focus { outline: none; }

  // Remove the inner border and padding in Firefox.
  &::-moz-focus-inner {
    border: 0;
    padding: 0;
  }
}



// MODIFIERS
// ========================================================================
// -- primary
.button-primary {
  color: $button-primary-color;
  background-color: $button-primary-background;

  &:hover, &:focus {
    color: $button-primary-hover-color;
    background-color: $button-primary-hover-background;
  }

  &:active, &.active {
    background-color: $button-primary-active-background;
    color: $button-primary-active-color;
  }
}


// -- secondary
.button-secondary {
  color: $button-secondary-color;
  background-color: $button-secondary-background;

  &:hover, &:focus {
    color: $button-secondary-hover-color;
    background-color: $button-secondary-hover-background;
  }

  &:active, &.active {
    background-color: $button-secondary-active-background;
    color: $button-secondary-active-color;
  }
}


// -- ghost (aka "outline")
.button-ghost {
  border: $button-ghost-border;
  color: $button-ghost-color;
  background-color: $button-ghost-background;
  
  &:hover, &:focus {
    border-color: $button-ghost-hover-border-color;
    color: $button-ghost-hover-color;
    background-color: $button-ghost-hover-background;
  }

  &:active, &.active {
    background-color: $button-ghost-active-background;
    color: $button-ghost-active-color;
  }
}


// -- danger
.button-danger {
  color: $button-danger-color;
  background-color: $button-danger-background;

  &:hover, &:focus {
    color: $button-danger-hover-color;
    background-color: $button-danger-hover-background;
  }

  &:active, &.active {
    background-color: $button-danger-active-background;
    color: $button-danger-active-color;
  }
}


// -- disabled
// We can use an array and @each here due to the shared props.
$buttons-disabled:
  (primary),
  (secondary),
  (ghost),
  (danger);

@each $key in $buttons-disabled {
  .button-#{$key}:disabled {
    cursor: $button-disabled-cursor;
    color: $button-disabled-color;
    background-color: $button-disabled-background;
  }
}


// -- large
.button-large {
  font-size: $button-large-font-size;
  line-height: $button-large-line-height;
  padding: 0 $button-large-padding-horizontal;
}


// -- small
.button-small {
  font-size: $button-small-font-size;
  line-height: $button-small-line-height;
  padding: 0 $button-small-padding-horizontal;
}