/*
 * Wire
 * Copyright (C) 2016 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

@bubble-bg-color:             #fff;
@bubble-shadow-color:         rgba(0,0,0,.24);
@bubble-shadow-size:          8px;
@bubble-arrow-size:           15px;
@bubble-arrow-diagonal:       floor(sqrt(@bubble-arrow-size * @bubble-arrow-size * 2));

.bubble {
  display: none;
  position: absolute;
  padding: 4px;
  min-width: 128px;
  min-height: 64px;
  background-color: @bubble-bg-color;
  box-shadow: 0 0 @bubble-shadow-size @bubble-shadow-color;
  box-sizing: border-box;
  border-radius: 4px;

  // close
  transition-property: transform, opacity;
  transition-duration: @animation-timing-fast;
  transition-timing-function: @ease-in-expo;
  opacity: 0;

  &.bubble-bottom,
  &.bubble-bottom-right {
    transform: translate(0, 12px);
  }

  &.bubble-top,
  &.bubble-top-right {
    transform: translate(0, -12px);
  }

  &.bubble-left,
  &.bubble-left-bottom,
  &.bubble-left-top {
    transform: translate(-12px, 0);
  }

  &.bubble-right,
  &.bubble-right-bottom,
  &.bubble-right-top {
    transform: translate(12px, 0);
  }

  // show
  &.bubble-animation-show {
    transition-property: transform, opacity;
    transition-duration: @animation-timing-slow;
    transition-timing-function: @ease-out-expo, @ease-out-expo;
    transform: translate(0, 0);
    opacity: 1;
  }

  &.bubble-show {
    display: inline-block;
  }

  &:before {
    z-index: -1;
    box-shadow: 0 0 @bubble-shadow-size @bubble-shadow-color;
    background-color: @bubble-bg-color;
  }

  &:after {
    background: linear-gradient(-45deg, @bubble-bg-color 0%, @bubble-bg-color 50%, transparent 50%, transparent 100%);
  }

  &:before,
  &:after {
    position: absolute;
    display: none;
    content: "";
    width: (@bubble-arrow-diagonal - 1);
    height: (@bubble-arrow-diagonal - 1);
  }

  &.bubble-bottom {
    &:before {
      display: block;
      bottom: -@bubble-arrow-size / 2;
      left: ~'calc(50% - @{bubble-arrow-diagonal} / 2)';
      transform: rotate(45deg) translate3d(0,0,0);
    }
    &:after {
      display: block;
      bottom: -@bubble-arrow-size / 2;
      left: ~'calc(50% - @{bubble-arrow-diagonal} / 2)';
      transform: rotate(45deg) translate3d(0,0,0);
    }
  }
  &.bubble-top {
    &:before {
      display: block;
      top: -@bubble-arrow-size / 2;
      left: ~'calc(50% - @{bubble-arrow-diagonal} / 2)';
      transform: rotate(180 + 45deg) translate3d(0,0,0);
    }
    &:after {
      display: block;
      top: -@bubble-arrow-size / 2;
      left: ~'calc(50% - @{bubble-arrow-diagonal} / 2)';
      transform: rotate(180 + 45deg) translate3d(0,0,0);
    }
  }
  &.bubble-right {
    &:before {
      display: block;
      top: ~'calc(50% - @{bubble-arrow-diagonal} / 2)';
      right: -@bubble-arrow-size / 2;
      transform: rotate(270 + 45deg) translate3d(0,0,0);
    }
    &:after {
      display: block;
      top: ~'calc(50% - @{bubble-arrow-diagonal} / 2)';
      right: -@bubble-arrow-size / 2;
      transform: rotate(270 + 45deg) translate3d(0,0,0);
    }
  }
  &.bubble-left {
    &:before {
      display: block;
      top: ~'calc(50% - @{bubble-arrow-diagonal} / 2)';
      left: floor(-@bubble-arrow-size / 2) - 1px;
      transform: rotate(90 + 45deg) translate3d(0,0,0);
    }
    &:after {
      display: block;
      top: ~'calc(50% - @{bubble-arrow-diagonal} / 2)';
      left: floor(-@bubble-arrow-size / 2) - 1px;
      transform: rotate(90 + 45deg) translate3d(0,0,0);
    }
  }
  &.bubble-left-top {
    &:before {
      display: block;
      top: @bubble-arrow-diagonal;
      left: floor(-@bubble-arrow-size / 2) - 1px;
      transform: rotate(90 + 45deg) translate3d(0,0,0);
    }
    &:after {
      display: block;
      top: @bubble-arrow-diagonal;
      left: floor(-@bubble-arrow-size / 2) - 1px;
      transform: rotate(90 + 45deg) translate3d(0,0,0);
    }
  }
  &.bubble-left-bottom {
    &:before {
      display: block;
      bottom: @bubble-arrow-diagonal;
      left: floor(-@bubble-arrow-size / 2) - 1px;
      transform: rotate(90 + 45deg) translate3d(0,0,0);
    }
    &:after {
      display: block;
      bottom: @bubble-arrow-diagonal;
      left: floor(-@bubble-arrow-size / 2) - 1px;
      transform: rotate(90 + 45deg) translate3d(0,0,0);
    }
  }


  &.bubble-bottom-right {
    &:before {
      display: block;
      bottom: -@bubble-arrow-size / 2;
      right: @bubble-arrow-diagonal;
      transform: rotate(45deg) translate3d(0,0,0);
    }
    &:after {
      display: block;
      bottom: -@bubble-arrow-size / 2;
      right: @bubble-arrow-diagonal;
      transform: rotate(45deg) translate3d(0,0,0);
    }
  }

  &.bubble-top-right {
    &:before {
      display: block;
      top: -@bubble-arrow-size / 2;
      right: @bubble-arrow-diagonal;
      transform: rotate(180 + 45deg) translate3d(0,0,0);
    }
    &:after {
      display: block;
      top: -@bubble-arrow-size / 2;
      right: @bubble-arrow-diagonal;
      transform: rotate(180 + 45deg) translate3d(0,0,0);
    }
  }
}