.tooltip-box {
  @apply bg-dark-cerulean rounded-card p-4 flex flex-row items-start;
  max-width: 375px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

  p {
    @apply m-0 text-white font-bold text-base flex-grow;
  }

  .close {
    @apply text-white outline-none border-none ml-2 bg-transparent p-1 -mr-1;
  }
}

.ui-tooltip-panel {
  .triangle {
    width: 30px;
    z-index: -1;
    polygon {
      fill: #1f466c;
    }
  }

  /* triangle top right*/
  &.x-position-after.y-position-below {
    margin-top: 3px;
    .triangle {
      @apply absolute;
      top: -10px;
      right: 2px;
    }
  }

  /* triangle top left*/
  &.x-position-before.y-position-below {
    margin-top: 3px;
    .triangle {
      @apply absolute;
      top: -10px;
      left: 2px;
    }
  }

  /* triangle bottom left*/
  &.x-position-before.y-position-above {
    margin-bottom: 3px;
    .triangle {
      @apply absolute  transform rotate-180 origin-center;
      bottom: -10px;
      left: 2px;
    }
  }

  /* triangle bottom right*/
  &.x-position-after.y-position-above {
    margin-bottom: 3px;
    .triangle {
      @apply absolute transform rotate-180 origin-center;
      bottom: -10px;
      right: 2px;
    }
  }
}
