.p-tooltip {
    @apply absolute hidden max-w-48
}

.p-tooltip-right,
.p-tooltip-left {
    @apply py-0 px-1
}

.p-tooltip-top,
.p-tooltip-bottom {
    @apply py-1 px-0
}

.p-tooltip-text {
    @apply whitespace-pre-line break-words  bg-surface-700 text-surface-0 py-2 px-3
        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
}

.p-tooltip-arrow {
    @apply absolute w-0 h-0 border-solid border-transparent
}

.p-tooltip-right .p-tooltip-arrow {
    @apply -mt-1 border-[.25rem] border-l-0 border-r-surface-700
}

.p-tooltip-left .p-tooltip-arrow {
    @apply -mt-1 border-[.25rem] border-r-0 border-l-surface-700
}

.p-tooltip-top .p-tooltip-arrow {
    @apply -ml-1 border-[.25rem] border-b-0 border-t-surface-700
}

.p-tooltip-bottom .p-tooltip-arrow {
    @apply -ml-1 border-[.25rem] border-t-0 border-b-surface-700
}