@import '../../style/';

_offset = 10px;

popover_triangle(_size, _color, _direction) {
  _dir = split('-', _direction);
  _pos = shift(_dir);

  &::before {
    triangle(_size, _color, _direction, 0)
  }
  _size = _size - 2px;
  &::after {
    triangle(_size, _white, _direction, 1px)
  }
}

triangle(_size, _color, _direction, _inner_triangle) {
  _dir = split('-', _direction);
  _pos = shift(_dir);

  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: (_size / 2);
  border-{_pos}-color: _color;

  if _direction == top-left {
    top: 100%;
    left: _offset + _inner_triangle;
  }

  if _direction == top {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  if _direction == top-right {
    top: 100%;
    right: _offset + _inner_triangle;
  }

  if _direction == bottom-left {
    bottom: 100%;
    left: _offset + _inner_triangle;
  }

  if _direction == bottom {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  if _direction == bottom-right {
    bottom: 100%;
    right: _offset + _inner_triangle;
  }

  if _direction == left-top {
    left: 100%;
    top: _offset + _inner_triangle;
  }

  if _direction == left {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
  }

  if _direction == left-bottom {
    left: 100%;
    bottom: _offset + _inner_triangle;
  }

  if _direction == right-top {
    right: 100%;
    top: _offset + _inner_triangle;
  }

  if _direction == right {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
  }

  if _direction == right-bottom {
    right: 100%;
    bottom: _offset + _inner_triangle;
  }
}

.hiui-popover {
  position: absolute;
  z-index: 199;
  background-color: #fff;
  min-width: 180px;
  border: 1px solid #ccc;
  border-radius: _border_radius;

  &-use_shadow {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
  }

  _multilocations = left, left-top, left-bottom, right, right-top, right-bottom, top, top-left, top-right, bottom, bottom-left, bottom-right;

  for _f in _multilocations {
    &-{_f} {
      popover_triangle(12px, inherit, _f)
    }
  }
}