@layer components {
  /* Tooltip theme */
  .tippy-box[data-theme~="coco-tooltip"] {
    @apply bg-background-dark-2 text-white text-label-sm rounded-lg shadow-xl;

    .tippy-content {
      @apply px-3 py-2 truncate max-w-[240px];
    }

    /* arrow background */
    .tippy-svg-arrow > svg:first-child {
      @apply hidden;
    }

    .tippy-svg-arrow > svg:last-child {
      @apply fill-gray-900;
    }
  }
}