/**
 * Information Tooltip CSS
 * Framework-agnostic responsive tooltip styles
 */

:root {
  --info-tip-bg: #E5EAEE;
  --info-tip-text: #101720;
  --info-tip-radius: 5px;
  --info-tip-z: 1000;
  --info-tip-arrow-size: 8px;
}

/* Base tooltip styles */
.information-tooltip {
  position: fixed;
  z-index: var(--info-tip-z);
  background: var(--info-tip-bg);
  color: var(--info-tip-text);
  border-radius: var(--info-tip-radius);
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  font-family: "Satoshi-Light", system-ui;
  font-size: 14px;
  line-height: 1.4;
  padding: 12px 16px;
  word-wrap: break-word;
  hyphens: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease-out, visibility 120ms ease-out, transform 120ms ease-out;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .information-tooltip {
    transition: opacity 120ms ease-out, visibility 120ms ease-out;
    transform: none;
  }
}

/* Open state */
.information-tooltip--open {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: translateY(0);
}

/* Arrow base styles - using a rotated square */
.information-tooltip__arrow {
  position: absolute;
  width: var(--info-tip-arrow-size);
  height: var(--info-tip-arrow-size);
  background: var(--info-tip-bg);
  transform: rotate(45deg);
}

/* Arrow positioning based on data-placement attribute */

/* Right placement - arrow on left edge */
.information-tooltip[data-placement="right"] {
  transform-origin: left center;
}

.information-tooltip[data-placement="right"].information-tooltip--open {
  transform: translateX(0);
}

@media (prefers-reduced-motion: no-preference) {
  .information-tooltip[data-placement="right"] {
    transform: translateX(-4px);
  }
  .information-tooltip[data-placement="right"].information-tooltip--open {
    transform: translateX(0);
  }
}

.information-tooltip[data-placement="right"] .information-tooltip__arrow {
  top: 50%;
  left: calc(-1 * var(--info-tip-arrow-size) / 2);
  margin-top: calc(-1 * var(--info-tip-arrow-size) / 2);
}

/* Top placement - arrow on bottom edge */
.information-tooltip[data-placement="top"] {
  transform-origin: center bottom;
}

.information-tooltip[data-placement="top"].information-tooltip--open {
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .information-tooltip[data-placement="top"] {
    transform: translateY(4px);
  }
  .information-tooltip[data-placement="top"].information-tooltip--open {
    transform: translateY(0);
  }
}

.information-tooltip[data-placement="top"] .information-tooltip__arrow {
  bottom: calc(-1 * var(--info-tip-arrow-size) / 2);
  left: 50%;
  margin-left: calc(-1 * var(--info-tip-arrow-size) / 2);
}

/* Mobile: arrow on the bottom edge, 8px from right */
@media (max-width: 1159px) {
  .information-tooltip[data-placement="top"] .information-tooltip__arrow {
    bottom: calc(-1 * var(--info-tip-arrow-size) / 2);
    right: 8px;
    left: auto;
    margin-left: 0;
  }
}

/* Trigger button styles */
.info-tip-trigger {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -1ch;
  line-height: 1;
  vertical-align: -1em;
  color: #6E707C;
  cursor: pointer;
  transition: color 120ms ease-out;
}

.info-tip-trigger:hover {
  color: #6E707C;
}

/* Modal variant - smaller size and adjusted alignment */
#mg-modal .info-tip-trigger {
  width: 2rem;
  height: 2rem;
  margin-left: -1ch;
  vertical-align: -1em;
}

/* SVG icon styles */
.info-tip-trigger svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  flex: 0 0 auto;
}

/* Icon color theming - all SVGs now use only path elements */
.info-tip-trigger svg path {
  stroke: currentColor;
  stroke-width: 1;
  fill: none;
  transition: stroke 120ms ease-out;
}


/* Screen reader only utility class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 1159px) {
  .information-tooltip {
    max-width: 136px !important;
  }
}

/* Desktop max-width */
@media (min-width: 1160px) {
  .information-tooltip {
    max-width: 232px !important;
  }
}

@media (max-width: 480px) {
  .information-tooltip {
    padding: 10px 14px;
    font-size: 13px;
  }
}