ujiro99/tlt

.tooltip {
  $this: .tooltip;
  @apply relative;
  
  z-index: 2;

  &__inner {
    @apply py-1;
    @apply px-2;
    @apply bg-gray-700;
    @apply font-medium;
    @apply text-xs;
    @apply text-white;
    @apply rounded-lg;
    @apply shadow;
  }

  &__arrow {
    --triangle-height: 4px;

    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--triangle-height);
    border-color: transparent transparent transparent transparent;
    @apply absolute;

    @at-root {
      $(this)[data-popper-placement^='top'] > $(this)__arrow {
        right: 14px;
        bottom: calc(0px - var(--triangle-height));
        border-bottom-width: 0;
        @apply border-t-gray-700;
      }

      $(this)[data-popper-placement^='bottom'] > $(this)__arrow {
        right: 14px;
        top: calc(0px - var(--triangle-height));
        border-top-width: 0;
        @apply border-b-gray-700;
      }

      $(this)[data-popper-placement^='left'] > $(this)__arrow {
        top: 6px;
        right: calc(0px - var(--triangle-height));
        border-right-width: 0;
        @apply border-l-gray-700;
      }

      $(this)[data-popper-placement^='right'] > $(this)__arrow {
        top: 6px;
        left: calc(0px - var(--triangle-height));
        border-left-width: 0;
        @apply border-r-gray-700;
      }
    }
  }
}