// <div data-element="hover_tip">
//   <div class="content">...</div>
// </div>

[data-element="hover_tip"]
  display: inline-block
  margin: 0 .55em
  position: relative

  &, & table
    font-size: 13px
  
  &:before
    content: "i"
    display: inline-block
    width: 1.1em
    height: 1.1em
    font: italic bold 13px/1.25em serif
    text-align: center
    color: #ccc
    background: #fff
    border: 1px solid #ccc
    border-radius: 50%
    cursor: pointer

  &[data-type="contacts"]:before
    content: "\a0"
    width: 1.15em
    height: 1.15em
    background: url("/res/common/phone.svg") 50% 50%/cover no-repeat
    border: none
    opacity: .3

  & > .content
    display: none
    background: #fff
    border: 1px solid #f8f8f8
    box-shadow: 0 0 6px rgba(0,0,0,.2)
    padding: 4px 12px
    transform: translate(-50%, -100%)
    margin-left: 7px
    margin-top: -21px
    position: absolute
    z-index: 9000

    &:before
      content: ""
      display: block
      width: 8px
      height: 8px
      background: #fff
      border: 1px solid #f8f8f8
      box-shadow: 0 0 6px rgba(0,0,0,.2)
      transform: rotate(45deg)
      margin-left: -4px
      margin-top: -4px
      position: absolute
      left: 50%
      top: 100%
      z-index: -1

    &:after
      content: ""
      display: block
      background: #fff
      position: absolute
      left: 0
      right: 0
      top: 0
      bottom: 0
      z-index: -1

    th, td
      vertical-align: top
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      padding: 2px 8px

      .extra
        margin-left: .3em

    th
      font-weight: normal
      text-align: end
      color: #999

    td
      text-align: start

      .extra
        color: #aaa

    .shaded
      opacity: .25

  &:hover > .content
    display: block

  &[data-ready="false"] > .content

    &:after
      background: #fff url("/res/common/dots.svg") 50% 50%/30px no-repeat

    & > div, & > table, & > p
      visibility: hidden

  &[data-orientation="bottom"]

    & > .content
      left: auto
      transform: translate(-50%, 0)
      margin-left: 7px
      margin-top: 3px

      &:before
        margin-left: -4px
        margin-top: -4px
        left: 50%
        top: 0

  &[data-orientation="left"]

    & > .content
      left: auto
      transform: translate(-14px, 4px)
      margin: 0

      &:before
        left: 16px

  &[data-orientation="right"]

    & > .content
      left: auto
      right: 0
      transform: translate(14px, 4px)
      margin: 0

      &:before
        left: auto
        right: 16px

[data-role="hover_tip_container"],
[data-role="hover_tip_cell"]
  display: inline-flex
  align-items: center
  overflow: visible

  & > .value
    white-space: nowrap
    text-overflow: ellipsis
    overflow: hidden
