.tooltip {
  @apply relative inline-block text-center;
  --tooltip-tail: 0.1875rem;
  --tooltip-color: theme(colors.neutral);
  --tooltip-text-color: theme(colors.neutral-content);
  --tooltip-tail-offset: calc(100% + 0.0625rem - var(--tooltip-tail));
}
.tooltip:before,
.tooltip:after {
  @apply opacity-0 transition delay-100 duration-200 ease-in-out;
}
.tooltip:after {
  @apply absolute;
}
.tooltip:before {
  @apply max-w-xs rounded px-2 py-1 text-sm;
  background-color: var(--tooltip-color);
  color: var(--tooltip-text-color);
  width: max-content;
}
.tooltip.tooltip-open:before {
  @apply opacity-100 delay-75;
}
.tooltip.tooltip-open:after {
  @apply opacity-100 delay-75;
}
.tooltip:hover:before {
  @apply opacity-100 delay-75;
}
.tooltip:hover:after {
  @apply opacity-100 delay-75;
}
.tooltip:has(:focus-visible):after,
.tooltip:has(:focus-visible):before {
  @apply opacity-100 delay-75;
}
.tooltip:not([data-tip]):hover:before,
.tooltip:not([data-tip]):hover:after {
  visibility: hidden;
  opacity: 0;
}

.tooltip:after {
  content: "";
  border-style: solid;
  border-width: var(--tooltip-tail, 0);
  width: 0;
  height: 0;
  display: block;
  position: absolute;
}
.tooltip,
.tooltip-top {
  &:after {
    transform: translateX(-50%);
    border-color: var(--tooltip-color) transparent transparent transparent;
    top: auto;
    left: 50%;
    right: auto;
    bottom: var(--tooltip-tail-offset);
  }
}
.tooltip-bottom {
  &:after {
    transform: translateX(-50%);
    border-color: transparent transparent var(--tooltip-color) transparent;
    top: var(--tooltip-tail-offset);
    left: 50%;
    right: auto;
    bottom: auto;
  }
}
.tooltip-left {
  &:after {
    transform: translateY(-50%);
    border-color: transparent transparent transparent var(--tooltip-color);
    top: 50%;
    left: auto;
    right: calc(var(--tooltip-tail-offset) + 0.0625rem);
    bottom: auto;
  }
}
.tooltip-right {
  &:after {
    transform: translateY(-50%);
    border-color: transparent var(--tooltip-color) transparent transparent;
    top: 50%;
    left: calc(var(--tooltip-tail-offset) + 0.0625rem);
    right: auto;
    bottom: auto;
  }
}
.tooltip {
  &-primary {
    --tooltip-color: theme(colors.primary);
    --tooltip-text-color: theme(colors.primary-content);
  }
  &-secondary {
    --tooltip-color: theme(colors.secondary);
    --tooltip-text-color: theme(colors.secondary-content);
  }
  &-accent {
    --tooltip-color: theme(colors.accent);
    --tooltip-text-color: theme(colors.accent-content);
  }
  &-info {
    --tooltip-color: theme(colors.info);
    --tooltip-text-color: theme(colors.info-content);
  }
  &-success {
    --tooltip-color: theme(colors.success);
    --tooltip-text-color: theme(colors.success-content);
  }
  &-warning {
    --tooltip-color: theme(colors.warning);
    --tooltip-text-color: theme(colors.warning-content);
  }
  &-error {
    --tooltip-color: theme(colors.error);
    --tooltip-text-color: theme(colors.error-content);
  }
}
