/* Same appearance contract as the announcement multilingual title preview. */
:root {
  --gaip-tooltip-background: #2f3640;
  --gaip-tooltip-text: #fff;
  --gaip-tooltip-label: #8ee7df;
  --gaip-tooltip-radius: 4px;
  --gaip-tooltip-padding: 14px 16px;
  --gaip-tooltip-shadow: 0 8px 24px rgba(24,31,38,.2);
}
.gaip-tooltip,
body.gaip-component-catalog .tagSourceTooltip,
body.gaip-component-catalog .gaip-table-tag-tooltip {
  position: fixed; z-index: 1200; inset: auto; margin: 0; box-sizing: border-box;
  width: max-content; max-width: min(320px, calc(100vw - 32px));
  max-height: min(320px, calc(100vh - 32px)); overflow: auto;
  overflow-wrap: anywhere; white-space: normal; border: 0;
  border-radius: var(--gaip-tooltip-radius); padding: var(--gaip-tooltip-padding);
  background: var(--gaip-tooltip-background); color: var(--gaip-tooltip-text);
  box-shadow: var(--gaip-tooltip-shadow); font-family: var(--gaip-global-font);
  font-size: 13px; font-weight: 400; line-height: 20px;
}
.gaip-tooltip { --gaip-tooltip-gutter: 16; --gaip-tooltip-gap: 8; }
.gaip-tooltip[data-variant="grouped"] { width: min(520px, calc(100vw - 32px)); max-width: none; }
.gaip-tooltip[hidden], body.gaip-component-catalog .tagSourceTooltip[hidden] { display: none !important; }
.gaip-tooltip::backdrop { background: transparent; pointer-events: none; }
.gaip-tooltip__row + .gaip-tooltip__row { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.gaip-tooltip__row small { display: block; margin-bottom: 4px; color: var(--gaip-tooltip-label); font-size: 12px; line-height: 18px; }
.gaip-tooltip__row small[hidden] { display: none; }
.gaip-tooltip__row p { margin: 0; color: var(--gaip-tooltip-text); font: inherit; }
body.gaip-component-catalog .tagSourceTooltip { width: min(340px, calc(100vw - 32px)); max-width: none; }
body.gaip-component-catalog .tagSourceTooltip strong { color: var(--gaip-tooltip-label); font-size: 12px; line-height: 18px; font-weight: 400; }
body.gaip-component-catalog .tagSourceTooltip small { color: var(--gaip-tooltip-label); }
body.gaip-component-catalog .tagSourceTooltip p { color: var(--gaip-tooltip-text); }
body.gaip-component-catalog .tagSourceTooltip li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.tooltipDemo { display: grid; gap: 24px; }
.tooltipDemo__example > h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; }
.tooltipDemo__surface { display: flex; align-items: center; min-height: 112px; }
.tooltipDemo__trigger { max-width: 100%; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: transparent; color: #2f3640; font: inherit; cursor: help; text-align: left; }
.tooltipDemo__trigger:hover { color: #025b52; }
.tooltipDemo__trigger:focus-visible { outline: 2px solid #025b52; outline-offset: 4px; border-radius: 2px; }
.gaip-tooltip-trigger:focus-visible { outline: 2px solid #025b52; outline-offset: 2px; border-radius: 2px; }
.tooltipDemo__note { margin: 0; color: #59636c; font-size: 13px; line-height: 20px; }
.tooltipDemo__directionSurface { display: flex; justify-content: center; padding: 48px 24px; margin-top: 12px; }
.tooltipDemo__placements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 24px 16px; width: min(100%, 560px); }
.tooltipDemo__placementTop, .tooltipDemo__placementBottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tooltipDemo__placementLeft, .tooltipDemo__placementRight { display: flex; flex-direction: column; gap: 8px; }
.tooltipDemo__placementLeft { align-items: flex-start; }
.tooltipDemo__placementRight { align-items: flex-end; }
.tooltipDemo__placementCenter { text-align: center; color: #59636c; font-size: 13px; }
.tooltipDemo__placement { min-height: 32px; max-width: 100%; padding: 6px 10px; border: 1px solid #dce2e5; border-radius: 4px; background: #fff; color: #2f3640; font-family: var(--gaip-global-font); font-size: 12px; line-height: 18px; cursor: help; overflow-wrap: anywhere; }
.tooltipDemo__placement:hover { border-color: #025b52; }
.tooltipDemo__placement:focus-visible { outline: 2px solid #025b52; outline-offset: 2px; }