/* Tooltip */
.ui-tooltip {
  @apply relative inline-flex;
}

/* 吹き出し本体。配置と矢印は --top / --bottom / --left / --right で付ける。 */
.ui-tooltip__content {
  @apply pointer-events-none invisible absolute z-10 rounded-md bg-gray-900 px-3 py-2 text-center text-xs leading-4 whitespace-nowrap text-white opacity-0 transition-opacity;
}

.ui-tooltip:hover .ui-tooltip__content,
.ui-tooltip:focus-within .ui-tooltip__content {
  @apply visible opacity-100;
}

/* 三角矢印。border の一辺だけ着色し、着色した辺の向きにトリガーを指す。 */
.ui-tooltip__content::after {
  @apply absolute;
  content: "";
  border-width: 5px;
  border-style: solid;
}

/* 上に表示。矢印は下辺から下向き。 */
.ui-tooltip__content--top {
  @apply bottom-full left-1/2 mb-2 -translate-x-1/2;
}

.ui-tooltip__content--top::after {
  @apply top-full left-1/2 -translate-x-1/2 border-x-transparent border-b-transparent border-t-gray-900;
}

/* 下に表示。矢印は上辺から上向き。 */
.ui-tooltip__content--bottom {
  @apply top-full left-1/2 mt-2 -translate-x-1/2;
}

.ui-tooltip__content--bottom::after {
  @apply bottom-full left-1/2 -translate-x-1/2 border-x-transparent border-t-transparent border-b-gray-900;
}

/* 左に表示。矢印は右辺から右向き。 */
.ui-tooltip__content--left {
  @apply top-1/2 right-full mr-2 -translate-y-1/2;
}

.ui-tooltip__content--left::after {
  @apply top-1/2 left-full -translate-y-1/2 border-y-transparent border-r-transparent border-l-gray-900;
}

/* 右に表示。矢印は左辺から左向き。 */
.ui-tooltip__content--right {
  @apply top-1/2 left-full ml-2 -translate-y-1/2;
}

.ui-tooltip__content--right::after {
  @apply top-1/2 right-full -translate-y-1/2 border-y-transparent border-l-transparent border-r-gray-900;
}