@import (reference) "~ui/styles/variables";

.vis-tooltip,
.vis-tooltip-sizing-clone {
  visibility: hidden;
  line-height: 1.1;
  font-size: 12px;
  font-weight: normal;
  background: @tooltip-bg;
  color: @tooltip-color;
  border-radius: 4px;
  position: fixed;
  z-index: 120;
  word-wrap: break-word;
  max-width: 40%;
  overflow: hidden;
  pointer-events: none;

  > :last-child {
    margin-bottom: @tooltip-space;
  }

  > * {
    margin: @tooltip-space @tooltip-space 0;
  }

  table {
    td,th {
      padding: @tooltip-space-tight;

      &.row-bucket {
        word-break: break-all;
      }
    }

    // if there is a header, give it a border that matches
    // those in the body
    thead tr {
      border-bottom: 1px solid;
      border-bottom-color: @tooltip-table-border;
    }

    // only apply to tr in the body, not the header
    tbody tr {
      border-top: 1px solid;
      border-top-color: @tooltip-table-border;
      &:first-child {
        border-top: none;
      }
    }
  }
}

.vis-tooltip-header {
  margin: 0 0 @tooltip-space 0;
  padding: @tooltip-space-tight @tooltip-space;
  display: flex;
  align-items: center;

  &:last-child {
    margin-bottom: 0;
  }

  &-icon {
    flex: 0 0 auto;
    padding-right: @tooltip-space;
  }

  &-text {
    flex: 1 1 200px;
  }

  + * {
    margin-top: @tooltip-space;
  }
}

.vis-tooltip-sizing-clone {
  visibility: hidden;
  position: fixed;
  top: -500px;
  left: -500px;
}
