/*
 * Standard tooltip styling for configurator interfaces.
 * Provides directional tooltip helpers that rely on the
 * element's `data-tooltip` attribute for content.
 */

.tooltip {
  position: relative;
  --tooltip-offset: 16px;
  --tooltip-background: linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
  --tooltip-color: #f8fafc;
  --tooltip-border: rgba(255, 255, 255, 0.08);
  --tooltip-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
  --tooltip-arrow-color: rgba(15, 23, 42, 0.96);
  --tooltip-translate-x: 0;
  --tooltip-translate-y: 0;
  --tooltip-transform-origin: center center;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  min-width: max-content;
  background: var(--tooltip-background);
  color: var(--tooltip-color);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--tooltip-shadow);
  border: 1px solid var(--tooltip-border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
  transform: translate(var(--tooltip-translate-x), var(--tooltip-translate-y)) scale(0.95);
  transform-origin: var(--tooltip-transform-origin);
  transition: opacity 0.18s ease, transform 0.18s ease;
  transition-delay: 0s;
}

.tooltip::before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 999;
  transition: opacity 0.18s ease;
  transition-delay: 0s;
}

.tooltip:hover::after,
.tooltip:focus-within::after {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tooltip-translate-x), var(--tooltip-translate-y)) scale(1);
  transition-delay: 0.75s;
}

.tooltip:hover::before,
.tooltip:focus-within::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.75s;
}

.tooltip-right {
  --tooltip-translate-x: 0;
  --tooltip-translate-y: -50%;
  --tooltip-transform-origin: left center;
}

.tooltip-right::after {
  top: 50%;
  left: calc(100% + var(--tooltip-offset));
}

.tooltip-right::before {
  top: 50%;
  left: calc(100% + (var(--tooltip-offset) / 2));
  transform: translateY(-50%);
  border-color: transparent var(--tooltip-arrow-color) transparent transparent;
}

.tooltip-left {
  --tooltip-translate-x: 0;
  --tooltip-translate-y: -50%;
  --tooltip-transform-origin: right center;
}

.tooltip-left::after {
  top: 50%;
  right: calc(100% + var(--tooltip-offset));
}

.tooltip-left::before {
  top: 50%;
  right: calc(100% + (var(--tooltip-offset) / 2));
  transform: translateY(-50%);
  border-color: transparent transparent transparent var(--tooltip-arrow-color);
}

.tooltip-top {
  --tooltip-translate-x: -50%;
  --tooltip-translate-y: 0;
  --tooltip-transform-origin: center bottom;
}

.tooltip-top::after {
  left: 50%;
  bottom: calc(100% + var(--tooltip-offset));
}

.tooltip-top::before {
  left: 50%;
  bottom: calc(100% + (var(--tooltip-offset) / 2));
  transform: translateX(-50%);
  border-color: var(--tooltip-arrow-color) transparent transparent transparent;
}

.tooltip-bottom {
  --tooltip-translate-x: -50%;
  --tooltip-translate-y: 0;
  --tooltip-transform-origin: center top;
}

.tooltip-bottom::after {
  left: 50%;
  top: calc(100% + var(--tooltip-offset));
}

.tooltip-bottom::before {
  left: 50%;
  top: calc(100% + (var(--tooltip-offset) / 2));
  transform: translateX(-50%);
  border-color: transparent transparent var(--tooltip-arrow-color) transparent;
}

.tooltip[data-tooltip=''],
.tooltip:not([data-tooltip]) {
  --tooltip-arrow-color: transparent;
}

.tooltip[data-tooltip='']::after,
.tooltip:not([data-tooltip])::after,
.tooltip[data-tooltip='']::before,
.tooltip:not([data-tooltip])::before {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .tooltip::after,
  .tooltip::before,
  .tooltip:hover::after,
  .tooltip:focus-within::after,
  .tooltip:hover::before,
  .tooltip:focus-within::before {
    transition-delay: 0s;
    transition-duration: 0.01ms;
  }
}

/* Allow tooltips to overflow the control-tabs container */
#control-tabs:has(.tooltip) {
  overflow: visible;
}