@use "../../../ui/vars" as *;

.info-tooltip {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  position: relative;

  .icon {
    color: var(--text-secondary);
  }

  .tooltip-popup {
    --tooltip-offset: 0;
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-shadow: 1px 1px 2px var(--border-primary);
    color: var(--text-primary);
    font-size: smaller;
    left: 50%;
    max-width: min(100vw, 20rem);
    padding: 0.5rem;
    position: absolute;
    text-align: center;
    top: 100%;
    transform: translateX(var(--tooltip-offset));
    visibility: hidden;
    width: max-content;
    z-index: 1;
  }

  &:hover .tooltip-popup,
  &:focus .tooltip-popup {
    visibility: visible;
  }
}