//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
//++

//***** Tooltips *****

// tooltips used for arbitrary elements

$tooltipBackground: #e3f5ff
$tooltipBorder: none
$tooltipHeight: 22px
$tooltipTextColor: $body-font-color
$tooltipArrowSize: 6px

%top-bottom
  &:before, &:after
    left: 50%
    transform: translateX(-50%)

  &:after
    width: auto

  &.-multiline
    &:before, &:after
      transform: translateY(50%)
      margin-bottom: 0
      filter: blur(10px)

%left-right
  &:before, &:after
    bottom: 50%
  &:before
    margin-bottom: $tooltipArrowSize * -1 + 1
  &:after
    margin-bottom: $tooltipHeight/-1.5

  &.-multiline
    &:before, &:after
      transform: translateY(50%)
      margin-bottom: 0

@mixin colorize($color:$tooltipBackground, $textColor:$tooltipTextColor)
  @each $position in top, right, bottom, left
    &.tooltip-#{$position}
      &:before
        border-#{$position}-color: $color
      &:after
        background-color: $tooltipBackground
        color: $tooltipTextColor

[data-tooltip]
  position: relative
  display: inline-block
  box-sizing: content-box
  // TODO: this "fixes" the spacing issue in text, we need to find a better way for that
  padding-right: 5px

  &:before, &:after
    position: absolute
    visibility: hidden
    opacity: 0
    z-index: 99999
    box-sizing: content-box
    transform: translate3d(0, 0, 0)

  &:before
    content: ''
    border: $tooltipArrowSize solid transparent

  &:after
    height: $tooltipHeight
    padding: $tooltipHeight/2 $tooltipHeight/2 0 $tooltipHeight/2
    font-size: 13px
    line-height: $tooltipHeight/2
    white-space: nowrap
    content: attr(data-tooltip)
    border: $tooltipBorder

  &:hover, &:focus
    background-color: transparent
    &::before, &::after
      opacity: 1
      visibility: visible
  +colorize

  &.-multiline
    &:before
    &:after
      height: auto
      width: 150px
      padding: $tooltipHeight/2
      line-height: $tooltipHeight - 3px
      white-space: normal
      text-align: left

  @each $position in left, right
    &.tooltip-#{$position}
      @extend %left-right
      @if $position == 'right'
        &:before, &:after
          left: 100%
        &:before
          margin-left: -2px
        &:after
          margin-left: 10px
      @else
        &:before, &:after
          right: 100%
        &:before
          margin-right: -2px
        &:after
          margin-right: 10px

  @each $position in top, bottom
    &.tooltip-#{$position}
      @extend %top-bottom
      @if $position == 'top'
        &:before, &:after
          bottom: 100%
        &:before
          margin-bottom: $tooltipArrowSize * -1 + 1
        &:after
          margin-bottom: 7px
        &:hover
          &:before, &:after
            transform: translate(-50%, 0px)
      @else
        &:before, &:after
          top: 100%
        &:before
          margin-top: $tooltipArrowSize * -1 + 1
        &:after
          margin-top: 7px
        &:hover
          &:before, &:after
            transform: translate(-50%, 0)

// tooltips for table content (TODO: legacy?)
table
  .tooltip
    position: relative
    z-index: 24
    &.hover, &:hover
      z-index: 25
      color: #000
    span.tip
      display: none
      text-align: left

  div.tooltip
    &:hover span.tip, &.hover span.tip
      display: block
      position: absolute
      top: 12px
      left: 24px
      width: 270px
      border: 1px solid #555
      background-color: #fff
      padding: 4px
      font-size: 0.8em
      color: #505050