/*
 * Tooltip Component
 * Hover-triggered tooltips with positioning variants
 */

@layer components {
  .tooltip {
    position: relative;

    &::after {
      --tooltip-background: var(--color-gray-darker);
      --tooltip-color: var(--color-white);

      background: var(--tooltip-background);
      border-radius: var(--radius);
      color: var(--tooltip-color);
      content: attr(data-tooltip);
      font-size: var(--text-normal);
      inset-block-end: calc(100% + 0.5em);
      inset-inline-start: 50%;
      opacity: 0;
      padding: 0.25em 0.5em;
      pointer-events: none;
      position: absolute;
      transform: translateX(-50%);
      transition: opacity 150ms ease;
      white-space: nowrap;
      z-index: var(--z-tooltip);
    }

    @media (any-hover: hover) {
      &:hover::after {
        opacity: 1;
        transition-delay: 300ms;
      }
    }
  }

  /* Position below */
  .tooltip--bottom::after {
    inset-block-start: calc(100% + 0.5em);
    inset-block-end: auto;
  }

  /* Position left */
  .tooltip--left::after {
    inset-block-end: auto;
    inset-block-start: 50%;
    inset-inline-end: calc(100% + 0.5em);
    inset-inline-start: auto;
    transform: translateY(-50%);
  }

  /* Position right */
  .tooltip--right::after {
    inset-block-end: auto;
    inset-block-start: 50%;
    inset-inline-start: calc(100% + 0.5em);
    transform: translateY(-50%);
  }
}