/*
 * This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 * 
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 * 
 * Copyright (C) 2018 by via donau 
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 * 
 * Author(s):
 * Thomas Junk <thomas.junk@intevation.de>
 */
.tooltip
  display: block !important
  z-index: 10000

  .tooltip-inner
    background: black
    color: white
    border-radius: 16px
    padding: 5px 10px 4px

  .tooltip-arrow
    width: 0
    height: 0
    border-style: solid
    position: absolute
    margin: 5px
    border-color: black
    z-index: 1

  &[x-placement^="top"]
    margin-bottom: 5px

    .tooltip-arrow
      border-width: 5px 5px 0 5px
      border-left-color: transparent !important
      border-right-color: transparent !important
      border-bottom-color: transparent !important
      bottom: -5px
      left: calc(50% - 5px)
      margin-top: 0
      margin-bottom: 0

  &[x-placement^="bottom"]
    margin-top: 5px

    .tooltip-arrow
      border-width: 0 5px 5px 5px
      border-left-color: transparent !important
      border-right-color: transparent !important
      border-top-color: transparent !important
      top: -5px
      left: calc(50% - 5px)
      margin-top: 0
      margin-bottom: 0

  &[x-placement^="right"]
    margin-left: 5px

    .tooltip-arrow
      border-width: 5px 5px 5px 0
      border-left-color: transparent !important
      border-top-color: transparent !important
      border-bottom-color: transparent !important
      left: -5px
      top: calc(50% - 5px)
      margin-left: 0
      margin-right: 0

  &[x-placement^="left"]
    margin-right: 5px

    .tooltip-arrow
      border-width: 5px 0 5px 5px
      border-top-color: transparent !important
      border-right-color: transparent !important
      border-bottom-color: transparent !important
      right: -5px
      top: calc(50% - 5px)
      margin-left: 0
      margin-right: 0

  &.popover
    $color: #f9f9f9

    .popover-inner
      background: $color
      color: black
      padding: 24px
      border-radius: 5px
      box-shadow: 0 5px 30px rgba(black, 0.1)

    .popover-arrow
      border-color: $color

  &[aria-hidden="true"]
    visibility: hidden
    opacity: 0
    transition: opacity 0.15s, visibility 0.15s

  &[aria-hidden="false"]
    visibility: visible
    opacity: 1
    transition: opacity 0.15s