@import 'mixins'

$border-width: .1em
$arrow-width: 1.5em
$arrow-height: 1em
$popover-margin: 1em
$arrow-margin: calc(100% - #{$border-width + .05})

.help-popover
  opacity: 0
  transition: opacity 350ms
  -webkit-transition: opacity 350ms
  z-index: 9
  position: absolute
  color: $gray
  font-size: .8em
  /* positioning */
  &.popover-top
    margin-top: -$popover-margin
    .arrow-top
      display: block
  &.popover-right
    margin-right: $popover-margin
    .arrow-right
      display: block
  &.popover-bottom
    margin-top: $popover-margin
    .arrow-bottom
      display: block
  &.popover-left
    margin-left: -$popover-margin
    .arrow-left
      display: block
  /* themes */
  &.help-popover-error
    .popover-content
      border-color: $red
    polygon
      stroke: $red
  &.help-popover-info
    .popover-content
      border-color: $blue
    polygon
      stroke: $blue
  /* animations */
  &.show
    opacity: 1
  /* content */
  .popover-content
    background-color: white
    padding: .8em
    border-radius: .3em
    border: $border-width solid
  /* arrow */
  .popover-arrow
    display: none
    position: absolute
    polygon
      fill: #fff
      stroke-width: $border-width
      stroke-dasharray: 25,30
  /* arrow directions */
  .arrow-top
    width: $arrow-width
    top: $arrow-margin
    /* override the JS calculated position */
    left: initial !important
    right: calc(50% - #{$arrow-width * .75})
  .arrow-right
    width: $arrow-height
    right: $arrow-margin
    top: calc(50% - #{$arrow-height * .75})
  .arrow-bottom
    width: $arrow-width
    bottom: $arrow-margin
    /* override the JS calculated position */
    left: initial !important
    right: calc(50% - #{$arrow-width * .75})
  .arrow-left
    width: $arrow-height
    left: $arrow-margin
    top: calc(50% - #{$arrow-height * .75})