// SPDX-FileCopyrightText: 2022 Gregor Kleen <gregor.kleen@ifi.lmu.de>
//
// SPDX-License-Identifier: AGPL-3.0-or-later
// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design

@use "../../common" as *

.tooltip
  position: relative
  display: inline-block
  vertical-align: middle

  &:hover .tooltip__content
    display: inline-block

  &.tooltip--initialized .tooltip__content
    display: none

  &.tooltip--initialized.tooltip--active .tooltip__content
    display: inline-block

.tooltip__handle
  color: var(--color-light)
  height: 1.5rem
  line-height: 1.5rem
  font-size: 1.2rem
  display: inline-block
  text-align: center
  margin: 0 10px
  cursor: default
  position: relative
  
  &::before
    position: absolute
    top: 0
    left: 0
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    font-size: 15px

  &.tooltip__handle.urgency__success
    color: var(--color-success)

  &.tooltip__handle.urgency__warning
    color: var(--color-warning)

  &.tooltip__handle.urgency__error
    color: var(--color-error)

  &:hover, .tooltip--active &
    color: var(--color-dark)

    &.tooltip__handle.urgency__success
      color: var(--color-success-dark)

    &.tooltip__handle.urgency__warning
      color: var(--color-warning-dark)

    &.tooltip__handle.urgency__error
      color: var(--color-error-dark)

  .table__th &
    color: white

.tooltip.tooltip__inline
  .tooltip__handle
    height: 1.0rem
    line-height: 1.0rem
    font-size: 1.0rem

.tooltip__content
  position: absolute
  display: none
  top: -10px
  transform: translateY(-100%)
  left: 3px
  min-width: 150px
  max-width: 400px
  min-height: 30px
  z-index: 10
  background-color: #fafafa
  border-radius: 7px
  padding: 13px 17px
  box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.2)

  .table__th &
    color: var(--color-font)
    font-weight: normal

  &::after
    content: ''
    width: 16px
    height: 16px
    background-color: #fafafa
    transform: rotate(45deg)
    position: absolute
    left: 10px
    bottom: -8px

    .tooltip--right &
      left: unset
      right: 10px
    .tooltip--bottom &
      bottom: unset
      top: -8px

.tooltip--initialized
  .tooltip__content
    position: fixed
    z-index: 23
    left: unset
    top: unset
    transform: unset

.tooltip--spread
  width: 100%
  height: 100%

.tooltip--no-handle
  position: relative
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.2)
  padding: 4px 17px 4px 4px

  &::after
    @extend .fas
    @extend .fa-fw

    content: '\f129'
    position: absolute
    right: 2px
    top: 6px
    color: rgba(0,0,0,0.2)
    font-size: 12px

  &:hover, &.tooltip--active
    box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.4)

    &::after
      color: rgba(0,0,0,0.4)

  .table__td-content &.tooltip--spread
    box-shadow: unset
    padding: 2px 15px 2px 2px
    background-color: rgba(0,0,0,0.05)

td.tooltip-only, th.tooltip-only
  .table--condensed &
    width: 22px
    padding: 4px

  .tooltip__handle
    margin: 0