/* components/tooltip/tooltip.css — Tooltip (doc, Componentes > Tooltip). Se carga después de style.css. */
@layer ms.system, ms.theme, ms.attributes;

@layer ms.system {
  /* Alias: valor por defecto; un Tema lo cambia en ms.theme */
  :root {
    --ms-tooltipRadius: var(--ms-radiusRole_floating);
    --_ms-tooltipPaddingX: var(--ms-spacing_8);
    --_ms-tooltipPaddingY: var(--ms-spacing_4);
    --_ms-tooltipMaxWidth: var(--ms-spacing_256);
    --ms-tooltipTextStyle_family: var(--ms-textStyle_bodyS_family);
    --ms-tooltipTextStyle_size: var(--ms-textStyle_bodyS_size);
    --ms-tooltipTextStyle_lineHeight: var(--ms-textStyle_bodyS_lineHeight);
    --ms-tooltipTextStyle_weight: var(--ms-textStyle_bodyS_weight);
    --ms-tooltipShowWaiting: var(--ms-motionWaiting_shortest);
    --ms-tooltipHideWaiting: var(--ms-motionWaiting_shortest);
  }

  /* Tooltip: invertido, en la capa superior */
  .ms-tooltip {
    position: fixed;
    inset: auto;
    box-sizing: border-box;
    max-inline-size: var(--_ms-tooltipMaxWidth);
    margin: var(--ms-spacing_4) 0;
    padding: var(--_ms-tooltipPaddingY) var(--_ms-tooltipPaddingX);
    overflow: visible;
    border: 0;
    border-radius: var(--ms-tooltipRadius);
    background: var(--ms-color_canvas);
    color: var(--ms-color_content);
    font-family: var(--ms-tooltipTextStyle_family); font-size: var(--ms-tooltipTextStyle_size); line-height: var(--ms-tooltipTextStyle_lineHeight); font-weight: var(--ms-tooltipTextStyle_weight);
    pointer-events: auto;
    opacity: 0;
    transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease);
  }
  .ms-tooltip[data-ms-state="open"] { opacity: 1; }
  .ms-tooltip:not([popover]):not([data-ms-state="open"]) { display: none; }
}