@import "tippy.js/dist/tippy";
@import "tippy.js/dist/svg-arrow";
@import "tippy.js/dist/border.css";

/* Tippy  */
@layer components {
  [data-tippy-root] {
    @apply !z-[10010];
  }

  .tippy-box[data-theme^="coco-"] {
    @apply bg-transparent text-gray-900 coco-label-md whitespace-normal;

    .tippy-content {
      @apply p-0;
    }

    /* arrow border */
    .tippy-svg-arrow > svg:first-child {
      @apply fill-transparent;
    }

    /* arrow background */
    .tippy-svg-arrow > svg:last-child {
      @apply fill-transparent;
    }
  }

  /* Tooltip theme */
  .tippy-box[data-theme~="coco-tooltip"] {
    @apply bg-background-dark-2 text-white coco-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;
    }
  }
}