/**
 * Tooltip styles
 * @countermeasure/web-components/display/tooltip
 */

.cmm-tooltip {
  position: fixed;
  z-index: var(--z-toast);
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  line-height: 1.4;
  max-width: 200px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  word-wrap: break-word;
}

.cmm-tooltip--visible {
  opacity: 1;
}

/* Arrow base */
.cmm-tooltip__arrow {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: hsl(var(--foreground));
  transform: rotate(45deg);
}

/* Arrow positions: named by which edge of the tooltip the arrow sits on */
.cmm-tooltip__arrow--bottom {
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
}

.cmm-tooltip__arrow--top {
  top: -3px;
  left: 50%;
  margin-left: -3px;
}

.cmm-tooltip__arrow--right {
  right: -3px;
  top: 50%;
  margin-top: -3px;
}

.cmm-tooltip__arrow--left {
  left: -3px;
  top: 50%;
  margin-top: -3px;
}
