/* ------------------------------------------------------------------------ *\
   components.bubble
\* ------------------------------------------------------------------------ */


/**
 * settings
 */
name = "bubble"
selector = prefix + name


/* styles
\* ------------------------------------------------------------------------ */

[{selector}~="container"]
  c-bubble()


[{selector}~="__arrow"]
  c-bubble__arrow()

  &[{selector}~="--top"]
    c-bubble__arrow--top()

  &[{selector}~="--right"]
    c-bubble__arrow--right()

  &[{selector}~="--bottom"]
    c-bubble__arrow--bottom()

  &[{selector}~="--left"]
    c-bubble__arrow--left()