.tooltip {
  @apply z-50 block;
  @apply max-w-xs;
}
.tooltip .tooltip-inner {
  @apply px-4 py-2 font-medium rounded bg-navi-pure text-light text-14;
}
.tooltip .tooltip-arrow {
  z-index: 1;
  @apply absolute w-0 h-0 m-1 border border-navi-pure;
}
.dark .tooltip .tooltip-inner {
  @apply bg-dark-300 text-light;
}
.dark .tooltip .tooltip-arrow {
  @apply border-dark-300;
}
.tooltip[x-placement^='top'] {
  @apply mb-1;
}
.tooltip[x-placement^='top'] .tooltip-arrow {
  border-width: 4px 4px 0 4px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  bottom: -4px;
  left: calc(50% - 4px);
  @apply my-0;
}
.tooltip[x-placement^='bottom'] {
  @apply mt-1;
}
.tooltip[x-placement^='bottom'] .tooltip-arrow {
  border-width: 0 4px 4px 4px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  top: -4px;
  left: calc(50% - 4px);
  @apply my-0;
}
.tooltip[x-placement^='right'] {
  @apply ml-1;
}
.tooltip[x-placement^='right'] .tooltip-arrow {
  border-width: 4px 4px 4px 0;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  left: -4px;
  top: calc(50% - 4px);
  @apply mx-0;
}
.tooltip[x-placement^='left'] {
  @apply mr-1;
}
.tooltip[x-placement^='left'] .tooltip-arrow {
  border-width: 4px 0 4px 4px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  right: -4px;
  top: calc(50% - 4px);
  @apply mx-0;
}
.tooltip[aria-hidden='true'] {
  transition: opacity 0.15s, visibility 0.15s;
  @apply invisible opacity-0;
}
.tooltip[aria-hidden='false'] {
  @apply visible opacity-100;
  transition: opacity 0.15s;
}