@layer base {
  .content {
    max-width: 24rem;
    padding: var(--spacing-4);
    background-color: var(--popup);
    color: var(--popup-foreground);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    line-height: 1.5;
    box-shadow: var(--shadow-lg);
    font-family: var(--font-family-base);
    z-index: var(--z-overlay);
    overflow-wrap: break-word;
    word-break: keep-all;

    animation-duration: var(--animation-duration-normal);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
  }

  .content[data-state="open"][data-side="top"] {
    animation-name: slideDownAndFade;
  }

  .content[data-state="open"][data-side="bottom"] {
    animation-name: slideUpAndFade;
  }

  .content[data-state="open"][data-side="left"] {
    animation-name: slideRightAndFade;
  }

  .content[data-state="open"][data-side="right"] {
    animation-name: slideLeftAndFade;
  }

  @keyframes slideUpAndFade {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideDownAndFade {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideLeftAndFade {
    from {
      opacity: 0;
      transform: translateX(8px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideRightAndFade {
    from {
      opacity: 0;
      transform: translateX(-8px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}