/**
 * @stylesheet bubble.less Bubbles
 * @parent styles-viewer 2
 *
 * Bubbles are used to represent the words of the guide or the client throughout A2J interviews in the Viewer application.
 *
 * @demo demos/bubble/demo.html
 *
 * Bubbles can also be used on their own. The basic markup for a bubble is:
 *
 * ```
 * <div class="bubble top">
  <span class="bubble-arrow"></span>
    <div class="bubble-content">
      ...
    </div>
    <button type="button" class="btn btn-default">Continue</button>
</div>

 * ```
 *
 * @demo demos/bubble/bubble-variation.html
 *
 * Any content inside `bubble-content` will be automatically scrolled depending on the height of the bubble and the viewport. Content outside this container will not be scrolled.
 *
 * ## Bubble Arrows
 *
 * The bubble's arrow is generated using CSS pseudo elements. It's a CSS triangle with a background color (white) and a border on two sides (gray).
 *
 * ```
 * <span class="bubble-arrow"></span>
 * ```
 *
 * While the bubble would normally be inside the `bubble` div container so that it's attached to the bubble, in the A2J Viewer application the bubble arrow is actually part of the Avatar image so that the arrow is pointed at the avatar's face.
**/

@bubble-width: 40%;

.bubble {
	width: 60%;
	.border-box;
	.bubble-generator;
	.box-shadow;
	z-index: 20;
	position: absolute;
	top: 0;
  margin-right: @grid-gutter-width/2;

  &.has-avatar-picker {
    width: 70%;
  }

	&.vertical {
    .vertical-align(absolute);
  }

	.bubble-content {
    max-height: calc(~"80vh - 40px");
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 15px;
	}

	&.left {
    margin-right: 0;
    margin-left: @grid-gutter-width/2;;
	}
}

.bubble-generator(
	@bubble-background: @bubble-color,
	@bubble-border: 1px solid @bubble-border,
	@bubble-radius: 12px,
	@bubble-fontcolor: @text-color,
	@bubble-padding: @grid-gutter-width/2,
	@bubble-angle: 75
	) {

  background: @bubble-background;
  .text-smoothing;
  color: @bubble-fontcolor;
  padding: @bubble-padding;
  position: relative;
  border: @bubble-border;
  .border-radius(@bubble-radius);


  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
  }
}


.bubble-arrow {
	background: #ffffff;
	border: 1px solid #ccc;
  position: absolute;
  display: block;
  top: @grid-gutter-width;
  z-index: @zindex-dropdown;
  right: -1px;
  width: 0px;

  &:after, &:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-color: rgba(255, 255, 255, 0);
    border-left-color: #ffffff;
    border-width: 15px;
    margin-top: -15px;
  }
  &:before {
    border-color: rgba(204, 204, 204, 0);
    border-left-color: #ccc;
    border-width: 16px;
    margin-top: -16px;
  }
  &.left:after, &.left:before {
    right: 100%;
    left: auto;
  }

  &.left:after {
    border-left-color: rgba(255, 255, 255, 0);
    border-right-color: #ffffff;
  }
  &.left:before {
    border-left-color: rgba(255, 255, 255, 0);
    border-right-color: #ccc;
  }
}

.client-wrapper {
  .bubble-arrow, .bubble{
    left: 25%;
    margin: 0;
  }

  .bubble-arrow.has-wheelchair {
    left: 38%;
    top: 18%;
    margin: 0;
  }

  .bubble.has-wheelchair {
    left: 38%;
    top: 7%;
    margin: 0;
  }
}

.guide-wrapper {
  .bubble-arrow, .bubble {
    right: 29%;
    margin: 0;

    &.right {
      left: 105%;
    }
  }
}