// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.

// apply if no positioning like 'absolute' or 'relative' is present
// on the parent of the popover. This ensures that the popover is positioned
// relative to the dimension of the parent it's summoned in.
[data-popover]:hover
  cursor: pointer

.has-popover,
.has-tooltip
  position: relative

.popover,
.tooltip
  position: absolute
  background-color: $white
  color: $dark
  border: .1rem solid $border
  border-radius: $radius
  padding: $gap/2 $gap
  box-shadow: 0px 2px 4px rgba($black, .1)
  transition: opacity 100ms linear, transform 100ms linear
  max-width: 20rem
  word-break: break-all
  white-space: pre-wrap

  +dark-mode
    color: $text-color-dark
    background-color: $dark
    border-color: $border-dark

  &.in
    z-index: 2
  &:not(.in)
    opacity: 0
    pointer-events: none
    transform: translateY($gap)

  &:after,
  &:before
    content: ""
    position: absolute
    pointer-events: none
    height: 0
    width: 0

  &.is-top
    bottom: calc(100% + #{$gap})
    &:after, &:before
      border: solid transparent
      left: 50%
      top: calc(100% + 1px)
    &:after
      border-top-color: $white
      border-width: 7px
      margin-left: -7px
      +dark-mode
        border-top-color: $dark
    &:before
      border-top-color: $border
      border-width: 8px
      margin-left: -8px
      +dark-mode
        border-top-color: $border-dark


.tooltip
  width: auto
  white-space: nowrap
  top: 0
  left: 0
  transform: none
  font-size: .8rem
  font-weight: 500
  padding: $gap/4 $gap/2
  transition: opacity 100ms linear
  pointer-events: none
  &:not(.in)
    transform: none
