/* Tooltip — inverts with the theme (1g) */

.mint-tooltip {
  display: inline-flex;
}

.mint-tooltip__content {
  position: absolute;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--bg-card);
  background: var(--text-primary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

/* Multi-line opt-in via maxWidth prop */
.mint-tooltip__content--multiline {
  white-space: normal;
  line-height: 1.4;
}

.mint-tooltip__body {
  display: inline;
}

/* Keyboard shortcut chip */
.mint-tooltip__shortcut {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.3125rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  background: color-mix(in srgb, var(--bg-card) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--bg-card) 24%, transparent);
  border-radius: 3px;
  line-height: 1;
}

/* Arrow — same color as the tooltip bg */
.mint-tooltip__content::after {
  content: '';
  position: absolute;
  border-width: 4px;
  border-style: solid;
}

.mint-tooltip__content--top::after,
.mint-tooltip__content--top-start::after,
.mint-tooltip__content--top-end::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: var(--text-primary) transparent transparent transparent;
}

.mint-tooltip__content--bottom::after,
.mint-tooltip__content--bottom-start::after,
.mint-tooltip__content--bottom-end::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent var(--text-primary) transparent;
}

.mint-tooltip__content--left::after,
.mint-tooltip__content--left-start::after,
.mint-tooltip__content--left-end::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent transparent transparent var(--text-primary);
}

.mint-tooltip__content--right::after,
.mint-tooltip__content--right-start::after,
.mint-tooltip__content--right-end::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent var(--text-primary) transparent transparent;
}