/* Shared tooltip styles for info icons */
/* Used by: flextime_widget, forecast tracks, workspace metrics */

.info-icon {
  position: relative;
  cursor: pointer;
}

.info-tooltip {
  display: none;
  position: absolute;
  top: 20px;
  right: 0;
  width: 300px;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  border-radius: 8px;
  border: 1px solid var(--grey-grey200, #e1e1e1);
  background: var(--base-white, #fcfcfc);
  box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.04);
  padding: 14px 16px;
  z-index: 1000;
}

.info-icon:hover + .info-tooltip,
.info-icon:hover ~ .info-tooltip {
  display: block;
}

@supports (position-area: block-end) {
  .info-tooltip[style*="position-anchor"] {
    position: fixed;
    inset: auto;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-inline, flip-block;
    margin-top: 4px;
  }
}