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

@layer utilities {
  .tippy-dropdown-box {
    @apply bg-background-light-2 text-coco-gray-900 label-sm border border-solid border-gray-blend-100 shadow-xl rounded-lg;
  }
}

[data-tippy-root] {
  @apply !z-[10010];
}

.tippy-box[data-theme^="coco-"] {
  @apply bg-transparent text-coco-gray-900 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 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-coco-gray-900;
  }
}

/*
  * Tippy dropdown theme
  */
.tippy-box[data-theme~="coco-app-dropdown"],
.tippy-box[data-theme~="coco-menu"] {
  @apply tippy-dropdown-box;
}

.tippy-box[data-theme~="coco-naked-dropdown"] {
  width: min-content;
}