@layer components {
    .tooltip {
        @apply fixed z-10 py-2 px-3 text-sm text-white bg-gray-900 rounded-lg;
        @apply shadow-sm pointer-events-none transition-opacity max-w-[18rem] text-center opacity-0;

        &::after {
            @apply content-[""] absolute border-5;
        }

        &.show {
            @apply opacity-100;
        }

        &.tooltip-bottom {
            &::after {
                @apply bottom-full left-1/2 -translate-x-1/2;
                border-color: transparent transparent var(--color-gray-900) transparent;
            }
        }

        &.tooltip-top {
            &::after {
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                border-color: var(--color-gray-900) transparent transparent transparent;
            }
        }

        &.tooltip-start {
            &::after {
                inset-inline-start: 100%;
                top: 50%;
                transform: translateY(-50%);
                border-color: transparent transparent transparent var(--color-gray-900);
            }

            @variant rtl {
                &::after {
                    border-color: transparent var(--color-gray-900) transparent transparent;
                }
            }
        }

        &.tooltip-end {
            &::after {
                inset-inline-end: 100%;
                top: 50%;
                transform: translateY(-50%);
                border-color: transparent var(--color-gray-900) transparent transparent;
            }

            @variant rtl {
                &::after {
                    border-color: transparent transparent transparent var(--color-gray-900);
                }
            }
        }
    }
}