/* ------------------------------------------------------------------------ *\
   mixins.element.button
\* ------------------------------------------------------------------------ */


/**
 * [color description]
 * @param  {[type]} bg-color: color-default [description]
 * @param  {[type]} fg-color: color-white   [description]
 * @return {[type]}           [description]
 */
e-button--color(bg-color = nix.skin.color.default, fg-color = nix.skin.color.white)
  background-color: bg-color
  color: fg-color
  border: 1px solid transparent

  &:not(:disabled)
    &:hover
      background-color: lighten(bg-color, nix.skin.tint)

    &:focus
      border: 1px solid color-blue
      box-shadow: inset 0 0 0 2px nix.skin.color.secondary

    &:active, .button--active
      background-color: darken(bg-color, nix.skin.tint)



/**
 * [ghost description]
 * @param  {[type]} color:            color-default [description]
 * @param  {[type]} hover-text-color: color-white   [description]
 * @return {[type]}                   [description]
 */
e-button--ghost(color = nix.skin.color.default, color-hover = nix.skin.color.white)
  background-color: transparent
  border: 1px solid color
  color: color

  &:not(:disabled)
    &:hover
      background-color: nix.skin.color.default
      color: color-hover

    &:focus {
      border: 1px solid nix.skin.color.primary;
      box-shadow: inset 0 0 0 2px nix.skin.color.secondary
    }

    &:active, .button--active
      background-color: darken(color, nix.skin.tint)
      border: 1px solid darken(color, nix.skin.tint)
      color: color-hover


/**
 * [button description]
 * @return {[type]} [description]
 */
e-button()
  u-padding--all--sm()
  e-text--size--md()
  u-button--color()
  display: inline
  margin: 0
  max-width: 100%
  border-radius: nix.borders.radius
  border: 0
  outline: 0
  overflow: hidden
  text-decoration: none
  text-transform: uppercase
  text-overflow: ellipsis
  white-space: nowrap
  vertical-align: middle
  cursor: pointer
  user-select: none
  appearance: none

  &:disabled
    e-text--quiet()
    background-color: nix.skin.color.gray--light
    font-style: italic
    cursor: not-allowed



/**
 * [rounded description]
 * @return {[type]} [description]
 */
e-button--rounded()
  border-radius: nix.borders.rounded


/**
 * [close description]
 * @return {[type]} [description]
 */
e-button--close()
  e-button--color(transparent, inherit);
  e-text--loud()
  u-padding--all--0()
  outline: 0
  position: absolute
  right: nix.sizes.md
  font-size: 1.4em
  line-height: 1


/**
 * [block description]
 * @return {[type]} [description]
 */
e-button--block()
  display: inline-block
  width: 100%


/**
 * [group description]
 * @return {[type]} [description]
 */
e-button-group()
  display: inline-flex


/**
 * [grouped description]
 * @return {[type]} [description]
 */
e-button--grouped()
  border-radius: 0

  &:first-child
    border-radius: nix.borders.radius 0 0 nix.borders.radius


  &:last-child
    border-radius: 0 nix.borders.radius nix.borders.radius 0


/**
 * [rounded description]
 * @return {[type]} [description]
 */
e-button-group--rounded()
  border-radius: 0

  &:first-child
    border-radius: nix.borders.rounded 0 0 nix.borders.rounded

  &:last-child
    border-radius: 0 nix.borders.rounded nix.borders.rounded 0


/**
 * [left description]
 * @return {[type]} [description]
 */
e-button__icon-left()
  padding-right: nix.sizes.sm


/**
 * [right description]
 * @return {[type]} [description]
 */
e-button__icon-right()
  padding-left: nix.sizes.sm