@import "./_mixins.less";

:host {
  --tooltip-border: var(--divider-color);
  --tooltip-color: var(--background-color);
  --tooltip-text: var(--color);

  --tooltip-arrow-color: white;
  --tooltip-arrow-width: 10px;
  --tooltip-arrow-height: 10px;
  --tooltip-arrow-half-width: 7px;
  --tooltip-arrow-half-height: 7px;

  --tooltip-arrow-border: 2px;
  --tooltip-arrow-inner-color: var(--icon-color);
  --tooltip-arrow-inner-width: calc(var(--tooltip-arrow-width) - var(--tooltip-arrow-border));
  --tooltip-arrow-inner-height: calc(var(--tooltip-arrow-height) - var(--tooltip-arrow-border));
  --tooltip-arrow-inner-half-width: calc(var(--tooltip-arrow-half-width) - var(--tooltip-arrow-border));
  --tooltip-arrow-inner-half-height: calc(var(--tooltip-arrow-half-height) - var(--tooltip-arrow-border));
}

:host {
  // TODO: contain: layout style paint;
  width: max-content;
  font-size: var(--font-size);
  position: fixed;
  padding: 5px;
  border: 1px solid var(--tooltip-border);
  color: var(--tooltip-text);
  background-color: var(--tooltip-color);
  opacity: 0.95;
  z-index: var(--bokeh-top-level);
  margin: 0; // cancel native popover styling
}

:host(.bk-non-interactive) {
  pointer-events: none;
}

.bk-arrow {
  pointer-events: none;
  position: fixed;
  width: 0;
  height: 0;
  content: " ";
  border-style: solid;
  border-color: transparent;
}

:host(.bk-left), :host(.bk-right) {
  .bk-arrow {
    border-width: var(--tooltip-arrow-half-height) 0 var(--tooltip-arrow-half-height) 0;
  }
}

:host(.bk-above), :host(.bk-below) {
  .bk-arrow {
    border-width: 0 var(--tooltip-arrow-half-width) 0 var(--tooltip-arrow-half-width);
  }
}

:host(.bk-left) .bk-arrow {
  transform: translate(0%, -50%);
  border-right-width: var(--tooltip-arrow-width);
  border-right-color: var(--tooltip-arrow-color);
}

:host(.bk-right) .bk-arrow {
  transform: translate(-100%, -50%);
  border-left-width: var(--tooltip-arrow-width);
  border-left-color: var(--tooltip-arrow-color);
}

:host(.bk-above) .bk-arrow {
  transform: translate(-50%, 0%);
  border-bottom-width: var(--tooltip-arrow-height);
  border-bottom-color: var(--tooltip-arrow-color);
}

:host(.bk-below) .bk-arrow {
  transform: translate(-50%, -100%);
  border-top-width: var(--tooltip-arrow-height);
  border-top-color: var(--tooltip-arrow-color);
}

.bk-arrow-inner {
  pointer-events: none;
  position: fixed;
  width: 0;
  height: 0;
  content: " ";
  border-style: solid;
  border-color: transparent;
}

:host(.bk-left), :host(.bk-right) {
  .bk-arrow-inner {
    border-width: var(--tooltip-arrow-inner-half-height) 0 var(--tooltip-arrow-inner-half-height) 0;
  }
}

:host(.bk-above), :host(.bk-below) {
  .bk-arrow-inner {
    border-width: 0 var(--tooltip-arrow-inner-half-width) 0 var(--tooltip-arrow-inner-half-width);
  }
}

:host(.bk-left) .bk-arrow-inner {
  left: calc(+1 * var(--tooltip-arrow-border));
  transform: translate(0%, -50%);
  border-right-width: var(--tooltip-arrow-inner-width);
  border-right-color: var(--tooltip-arrow-inner-color);
}

:host(.bk-right) .bk-arrow-inner {
  left: calc(-1 * var(--tooltip-arrow-border));
  transform: translate(-100%, -50%);
  border-left-width: var(--tooltip-arrow-inner-width);
  border-left-color: var(--tooltip-arrow-inner-color);
}

:host(.bk-above) .bk-arrow-inner {
  top: calc(+1 * var(--tooltip-arrow-border));
  transform: translate(-50%, 0%);
  border-bottom-width: var(--tooltip-arrow-inner-height);
  border-bottom-color: var(--tooltip-arrow-inner-color);
}

:host(.bk-below) .bk-arrow-inner {
  top: calc(-1 * var(--tooltip-arrow-border));
  transform: translate(-50%, -100%);
  border-top-width: var(--tooltip-arrow-inner-height);
  border-top-color: var(--tooltip-arrow-inner-color);
}

:host(:not(.bk-show-arrow)) .bk-arrow {
  display: none;
}

.bk-tooltip-content > div:not(:first-child) {
  // gives space when multiple elements are being hovered over
  margin-top: 5px;
  border-top: var(--tooltip-border) 1px dashed;
}

.bk-tooltip-row-label {
  text-align: right;
  color: #26aae1;  /* blue from toolbar highlighting */
}

.bk-tooltip-row-value {
/* XXX: 'default' is not a color
  color: default; // seems to be necessary for notebook
*/
  color: none;
}

.bk-tooltip-color-block {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  margin-right: 5px;
  outline: #dddddd solid 1px;
  display: inline-block;
}

:host(.bk-closable) {
  padding-right: 17px; // 5px + close button width
}

:host(:not(.bk-closable)) {
  .bk-close {
    display: none;
  }
}

.bk-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  cursor: pointer;

  .icon-mask(var(--bokeh-icon-x), gray);

  &:hover {
    background-color: red;
  }
}
