@import variables

.tooltip-arrow:after
  background: #fff
  border: 1px solid #aaaaaa
  box-shadow: 0 0 5px #aaa

div.ui-tooltip
  min-width: 200px
  max-width: 600px

.tooltip-arrow
  width: 20px
  height: 10px
  overflow: hidden
  position: absolute
  &.top
    top: -10px
  &.bottom
    bottom: -10px
  &.align-left
    left: 10px
  &.align-right
    right: 10px
  &:after
    content: ""
    position: absolute
    width: 14px
    height: 14px
    -webkit-transform: rotate(45deg)
    -ms-transform: rotate(45deg)
    transform: rotate(45deg)
  &.bottom:after
    top: -10px
  &.top:after
    bottom: -10px
  &.align-left:after
    left: 0
  &.align-right:after
    right: 0

.tooltip-large
  width: 600px

.ui-tooltip-content .markdown p
  margin-bottom: 0

.ui-tooltip li
  list-style-type: none

.tooltip .fa-info-circle
  color: color('light')