/* Material Design 3 Tooltip Component
 * ==========================================================================
 * MD3 Tooltips display informative text when users hover, focus, or tap an element
 * Reference: https://m3.material.io/components/tooltips
 */

/* Base Tooltip
 * -------------------------------------------------------------------------- */

.tooltip {
  /* Structure */
  position: relative;
  display: inline-block;

  /* Don't clip tooltip content */
  overflow: visible;

  /* Ensure tooltip can expand beyond wrapper */
  z-index: auto;
}

.tooltip__content {
  /* Structure */
  position: absolute;
  z-index: var(--layer-tooltip); /* Ensure above other content */

  /* Sizing */
  max-width: 200px;
  padding: 4px 8px;
  height: auto; /* Allow natural height */
  min-height: unset; /* Reset constraints */

  /* Typography */
  font-size: 0.75rem; /* 13.5px with 18px base */
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  text-align: center;

  /* Appearance */
  background: var(--color-bg--inverse);
  color: var(--color-ink--inverse);
  border-radius: 4px;
  box-shadow: 0 2px 6px 2px oklch(0 0 0 / 0.15);

  /* Default hidden state */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  /* Transition */
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rich Tooltip (with more padding/formatting) */
.tooltip__content--rich {
  padding: 8px 12px;
  width: 250px; /* Fixed width */
  min-height: unset; /* Reset any height constraints */
  height: auto; /* Natural height */
  text-align: left;

  /* Ensure text wraps properly */
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;

  /* Make sure content is visible */
  overflow: visible;

  /* Reset max-width to prevent conflicts */
  max-width: 250px;
}

/* Reset paragraph margins inside tooltips */
.tooltip__content p,
.tooltip__content--rich p {
  margin: 0;
}

.tooltip__content p + p,
.tooltip__content--rich p + p {
  margin-top: 0.5rem;
}

/* Show tooltip on hover/focus
 * -------------------------------------------------------------------------- */

.tooltip:hover .tooltip__content,
.tooltip:focus-within .tooltip__content,
.tooltip[data-tooltip-visible="true"] .tooltip__content {
  visibility: visible;
  opacity: 1;
}

/* Positioning Variants
 * -------------------------------------------------------------------------- */

/* Top (default) */
.tooltip__content,
.tooltip__content--top {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom */
.tooltip__content--bottom {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;
}

/* For rich tooltips that are bottom positioned, adjust centering */
.tooltip__content--rich.tooltip__content--bottom {
  margin-left: -125px; /* Half of 250px width */
  left: 50%;
  transform: none; /* Remove translateX since we're using margin */
}

/* Left */
.tooltip__content--left {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

/* Right */
.tooltip__content--right {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

/* Top-start */
.tooltip__content--top-start {
  bottom: calc(100% + 8px);
  left: 0;
}

/* Top-end */
.tooltip__content--top-end {
  bottom: calc(100% + 8px);
  right: 0;
}

/* Bottom-start */
.tooltip__content--bottom-start {
  top: calc(100% + 8px);
  left: 0;
}

/* Bottom-start arrow */
.tooltip__content--bottom-start .tooltip__arrow {
  top: -4px;
  left: 20px; /* Position near the start */
  border-width: 0 4px 4px 4px;
  border-color: transparent transparent var(--color-bg--inverse) transparent;
}

/* Bottom-end */
.tooltip__content--bottom-end {
  top: calc(100% + 8px);
  right: 0;
}

/* Arrow/Caret (optional)
 * -------------------------------------------------------------------------- */

.tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

/* Top arrow */
.tooltip__content--top .tooltip__arrow,
.tooltip__content .tooltip__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px 4px 0 4px;
  border-color: var(--color-bg--inverse) transparent transparent transparent;
}

/* Bottom arrow */
.tooltip__content--bottom .tooltip__arrow {
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 4px 4px 4px;
  border-color: transparent transparent var(--color-bg--inverse) transparent;
}

/* Left arrow */
.tooltip__content--left .tooltip__arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 4px 0 4px 4px;
  border-color: transparent transparent transparent var(--color-bg--inverse);
}

/* Right arrow */
.tooltip__content--right .tooltip__arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 4px 4px 4px 0;
  border-color: transparent var(--color-bg--inverse) transparent transparent;
}

/* Color Variants
 * -------------------------------------------------------------------------- */

.tooltip__content--primary {
  background: var(--color-primary);
  color: var(--color-ink--primary);
}

.tooltip__content--primary .tooltip__arrow {
  border-color: var(--color-primary) transparent transparent transparent;
}

.tooltip__content--error {
  background: var(--color-error);
  color: var(--color-ink--error);
}

.tooltip__content--error .tooltip__arrow {
  border-color: var(--color-error) transparent transparent transparent;
}

/* Delay variants
 * -------------------------------------------------------------------------- */

.tooltip--delay-short .tooltip__content {
  transition-delay: 200ms;
}

.tooltip--delay-medium .tooltip__content {
  transition-delay: 500ms;
}

.tooltip--delay-long .tooltip__content {
  transition-delay: 1000ms;
}

/* Always visible (for demos/onboarding)
 * -------------------------------------------------------------------------- */

.tooltip--visible .tooltip__content {
  visibility: visible;
  opacity: 1;
}

/* Interactive tooltip (allows clicking content)
 * -------------------------------------------------------------------------- */

.tooltip--interactive .tooltip__content {
  pointer-events: auto;
}

/* CSS-only implementation using data attributes
 * -------------------------------------------------------------------------- */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  /* Content from attribute */
  content: attr(data-tooltip);

  /* Structure */
  position: absolute;
  z-index: var(--layer-tooltip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);

  /* Sizing */
  max-width: 200px;
  padding: 4px 8px;

  /* Typography */
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;

  /* Appearance */
  background: var(--color-bg--inverse);
  color: var(--color-ink--inverse);
  border-radius: 4px;
  box-shadow: 0 2px 6px 2px oklch(0 0 0 / 0.15);

  /* Default hidden state */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  /* Transition */
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 200ms;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
  visibility: visible;
  opacity: 1;
}


/* Position modifiers for data-tooltip */
[data-tooltip-position="bottom"]::after {
  bottom: auto;
  top: calc(100% + 8px);
}

[data-tooltip-position="left"]::after {
  bottom: auto;
  left: auto;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

[data-tooltip-position="right"]::after {
  bottom: auto;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

/* Responsive behavior
 * -------------------------------------------------------------------------- */

@media (max-width: 40em) {
  .tooltip__content {
    max-width: 90vw;
  }

  /* Force tooltips to bottom on mobile for better visibility */
  .tooltip__content--top {
    bottom: auto;
    top: calc(100% + 8px);
  }
}

/* Examples of usage:
 * --------------------------------------------------------------------------
 *
 * HTML structure with wrapper:
 * <div class="tooltip">
 *   <button>Hover me</button>
 *   <span class="tooltip__content">
 *     Helpful information
 *     <span class="tooltip__arrow"></span>
 *   </span>
 * </div>
 *
 * Simple CSS-only:
 * <button data-tooltip="Delete item">🗑️</button>
 *
 * With position:
 * <button data-tooltip="Save document" data-tooltip-position="bottom">💾</button>
 *
 * Rich tooltip:
 * <div class="tooltip">
 *   <button>Settings</button>
 *   <div class="tooltip__content tooltip__content--rich">
 *     <strong>Account Settings</strong>
 *     <p>Manage your profile, security, and preferences</p>
 *   </div>
 * </div>
 */