.tooltip {
  position: relative;

  .text {
    display: none;

    position: absolute;

    z-index: 1;
    background-color: var(--gray-12);
    color: var(--gray-1);
    border-radius: var(--space-3);

    padding: var(--space-2) var(--space-3);

    white-space: nowrap;

    &[data-side="top"] {
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);

      margin-bottom: var(--space-3);
    }

    &[data-side="left"] {
      top: 50%;
      right: 100%;
      transform: translateY(-50%);

      margin-right: var(--space-3);
    }
  }

  &:hover,
  &:focus-within {
    .text {
      display: block;
    }
  }
}