.c-tooltip {
  &::before {
    content: '';

    @apply pointer-events-none absolute left-1/2 -top-2 bottom-auto z-50 hidden h-0 w-0 -translate-x-1/2 -translate-y-3 border-8 border-transparent border-t-gray-500 opacity-0;
  }

  &::after {
    content: attr(aria-label);

    @apply pointer-events-none absolute left-1/2 z-40 hidden -translate-x-1/2 -translate-y-3 whitespace-pre break-words rounded bg-gray-500 px-2 py-0.5 text-center text-white opacity-0 shadow-lg text-xs;
  }

  &--n {
    &::after {
      @apply bottom-full mb-2;
    }
  }

  &:not(&--no-hover):hover,
  &:not(&--no-hover):active,
  &:not(&--no-hover):focus,
  &.is-active {
    &::before,
    &::after {
      @apply inline-block no-underline;

      animation-name: tooltip-appear;
      animation-duration: 0.1s;
      animation-fill-mode: forwards;
      animation-timing-function: ease-in;
      animation-delay: 0.125s;
    }
  }

  &--no-delay:not(&--no-hover):hover,
  &--no-delay:not(&--no-hover):active,
  &--no-delay:not(&--no-hover):focus {
    &::before,
    &::after {
      animation-delay: 0s;
    }
  }

  @keyframes tooltip-appear {
    from {
      @apply -translate-x-1/2 -translate-y-3 opacity-0;
    }

    to {
      @apply -translate-x-1/2 -translate-y-1 opacity-100;
    }
  }
}
