@import "./kdfn"

div.kdtooltip
  // transform                   translate3d(0,0,0)
  bg                          color, transparent
  top                         -100%
  left                        -100%
  width                       auto
  height                      auto
  min-width                   200px
  min-height                  50px
  overflow                    visible
  z-index                     100000
  borderBox()
  abs()
  // vendor                      transition, opacity 0.1s ease-out

  &.animate-movement
    vendor                      transition, left 0.15s ease-in \, top 0.15s ease-in // \, opacity 0.1s ease-out

  &:after
    content                   ""
    size                      0, 0
    border                    5px solid transparent
    z-index                   9002
    abs()

  div.wrapper
    bg                        color, white
    shadow                    0 10px 20px 5px rgba(0,0,0,0.15)
    padding                   5px
    width                     100%
    height                    100%
    min-height                50px
    min-width                 200px
    z-index                   9001
    rounded                   5px
    borderBox()
    rel()

  &.direction-right
    div.wrapper
      text-align              left

  &.direction-left
    div.wrapper
      text-align              right

  &.placement-top
    &:after
      border-top-color       #fff
      bottom                 -10px

    &.direction-right
      &:after
        left                  5px
    &.direction-left
      &:after
        right                 5px
    &.direction-center
      &:after
        margin-left           -9px
        left                  50%

  &.placement-bottom
    &:after
      border-bottom-color     #fff
      top                     -9px

    &.direction-right
      &:after
        left                  5px
    &.direction-left
      &:after
        right                 5px
    &.direction-center
      &:after
        margin-left           -9px
        left                  50%

  &.placement-left
    &:after
      border-left-color      #fff
      right                  -9px

    &.direction-top
      &:after
        bottom                5px
    &.direction-bottom
      &:after
        top                   5px
    &.direction-center
      &:after
        top                   50%
        margin-top            -5px

  &.placement-right
    &:after
      border-right-color      #fff
      left                    -9px

    &.direction-top
      &:after
        bottom                5px
    &.direction-bottom
      &:after
        top                   5px
    &.direction-center
      &:after
        top                   50%
        margin-top            -5px

  &.out
    opacity                   0

  &.in
    opacity                   1

  &.just-text
    margin-left               0
    min-height                5px
    min-width                 20px
    max-width                 300px

    div.wrapper
      shadow                  0 3px 7px rgba(0, 0, 0, 0.25)
      rounded                 3px
      bg                      color, rgba(0,0,0,0.65)
      min-height              5px
      min-width               20px
      color                   white
      white-space             normal
      text-align              center
      hyphens                 auto
      direction               ltr
      text-rendering          optimizeLegibility
      word-wrap               break-word

      font-size               12px
      font-weight             300

    &.placement-right
      &:after
        border-right-color    rgba(0,0,0,0.65)

      &.direction-center
        &:after
          top                 50%
          margin-top          -5px
    &.placement-left
      &:after
        border-left-color     rgba(0,0,0,0.65)

      &.direction-center
        &:after
          top                 50%
          margin-top          -5px
    &.placement-bottom
      &:after
        border-bottom-color   rgba(0,0,0,0.65)

      &.direction-left
        margin-left           10px
      &.direction-center
        &:after
          margin-left         -5px
          left                50%
    &.placement-top
      &:after
        border-top-color      rgba(0,0,0,0.65)

      &.direction-left
        margin-left           10px
      &.direction-center
        &:after
          margin-left         -5px
          left                50%