/* ------------------------------------------------------------------------ *\
   mixins.component.bubble
\* ------------------------------------------------------------------------ */


/**
 * [bubble description]
 * @return {[type]} [description]
 */
c-bubble()
  u-padding--all--md()
  position: relative
  display: inline-block
  border-radius: nix.borders.radius
  background-color: nix.skin.color.black
  color: nix.skin.color.white
  text-align: center
  white-space: nowrap


/**
 * [bubble__arrow description]
 * @return {[type]} [description]
 */
c-bubble__arrow()
  &:after
    position: absolute
    display: block
    width: 0
    height: 0
    border: 10px solid transparent
    content: ""


/**
 * [top description]
 * @return {[type]} [description]
 */
c-bubble__arrow--top()
  &:after
    bottom: -20px
    left: 50%
    transform: translate3d(-50%, 0, 0)
    border-top-color: nix.skin.color.black


/**
 * [right description]
 * @return {[type]} [description]
 */
c-bubble__arrow--right()
  &:after
    top: 50%
    left: -20px
    transform: translate3d(0, -50%, 0)
    border-right-color: nix.skin.color.black


/**
 * [bottom description]
 * @return {[type]} [description]
 */
c-bubble__arrow--bottom()
  &:after
    top: -20px
    left: 50%
    transform: translate3d(-50%, 0, 0)
    border-bottom-color: nix.skin.color.black



/**
 * [left description]
 * @return {[type]} [description]
 */
c-bubble__arrow--left()
  &:after
    top: 50%
    right: -20px
    transform: translate3d(0, -50%, 0)
    border-left-color: nix.skin.color.black