/**
 * HoverCard styles
 * @countermeasure/web-components/display/hover-card
 */

.cmm-hover-card {
  position: fixed;
  z-index: var(--z-popover);
  background-color: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 320px;
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.cmm-hover-card--visible {
  opacity: 1;
  pointer-events: auto;
}

.cmm-hover-card__content {
  padding: 1rem;
}

/* Arrow base */
.cmm-hover-card__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  transform: rotate(45deg);
}

/* Arrow positions: named by which edge of the card the arrow sits on */
.cmm-hover-card__arrow--bottom {
  bottom: -5px;
  left: 50%;
  margin-left: -4px;
  border-top: none;
  border-left: none;
}

.cmm-hover-card__arrow--top {
  top: -5px;
  left: 50%;
  margin-left: -4px;
  border-bottom: none;
  border-right: none;
}

.cmm-hover-card__arrow--right {
  right: -5px;
  top: 50%;
  margin-top: -4px;
  border-bottom: none;
  border-left: none;
}

.cmm-hover-card__arrow--left {
  left: -5px;
  top: 50%;
  margin-top: -4px;
  border-top: none;
  border-right: none;
}
