/*
  Tooltip component
  
  Structure:
  .a-tooltip                 - Base tooltip container
  .a-tooltip-arrow         - Arrow element
  .a-tooltip-content       - Line-clamped text (keep off the root — see note)
  
  Sizes:
  .a-tooltip--xs             - Extra small size (compact padding, smaller text)
  
  Placements:
  .a-tooltip--top            - Arrow below tooltip
  .a-tooltip--bottom         - Arrow above tooltip
  .a-tooltip--left           - Arrow to right of tooltip
  .a-tooltip--right          - Arrow to left of tooltip
  .a-tooltip--top-start      - Above the anchor, start edges aligned (not centered)
  .a-tooltip--top-end        - Above the anchor, end edges aligned (not centered)
  .a-tooltip--bottom-start   - Below the anchor, start edges aligned (not centered)
  .a-tooltip--bottom-end     - Below the anchor, end edges aligned (not centered)
  
  Note: Arrow dimensions automatically swap for vertical vs horizontal placements.
  Default arrows are 34px × 24px (horizontal) or 24px × 34px (vertical).
  XS arrows are 8px × 4px (horizontal) or 4px × 8px (vertical).
  
  Note: text must be wrapped in .a-tooltip-content, not placed directly in
  .a-tooltip. The arrow sits half outside the root's box on purpose, and
  the line-clamp's required `overflow: hidden` has to live on a separate
  element or it clips the arrow's protruding half.
  
  Positioning: uses CSS anchor positioning + the Popover API, like .a-menu.
  Trigger sets `anchor-name`, tooltip sets `popover="hint"` and
  `position-anchor` to the same name (see tooltip.html). `display` only
  takes effect once open, so setting it directly on a non-popover element
  needs an inline override — see the "Static Display" example.
*/

.a-tooltip {
  --bg: var(--lens-semantic-color-surface-inverse);
  --color: var(--lens-semantic-color-type-inverse);
  --font-size: var(--lens-semantic-font-text-md-font-size);
  --line-height: var(--lens-semantic-font-text-md-line-height);
  --font-weight: var(--lens-semantic-font-text-md-font-weight);
  --letter-spacing: var(--lens-semantic-font-text-md-letter-spacing);
  --pt: var(--lens-semantic-spacing-desktop-padding-2);
  --pb: var(--lens-semantic-spacing-desktop-padding-2);
  --pl: var(--lens-semantic-spacing-desktop-padding-3);
  --pr: var(--lens-semantic-spacing-desktop-padding-3);
  --radius: var(--lens-semantic-radius-lg);
  --max-width: 288px;
  --shadow: var(--lens-semantic-shadow-low);
  --line-clamp: 6;
  --arrow-span: var(--lens-core-spacing-3);
  --arrow-depth: calc(var(--lens-core-spacing-2) - var(--lens-core-spacing-0-25));
  --arrow-corner-offset: var(--lens-core-spacing-4);
  border: none;
  background: var(--a-tooltip-bg, var(--bg));
  color: var(--a-tooltip-color, var(--color));
  border-radius: var(--a-tooltip-border-radius, var(--radius));
  padding-block-start: var(--a-tooltip-padding-top, var(--pt));
  padding-block-end: var(--a-tooltip-padding-bottom, var(--pb));
  padding-inline-start: var(--a-tooltip-padding-left, var(--pl));
  padding-inline-end: var(--a-tooltip-padding-right, var(--pr));
  max-width: var(--a-tooltip-max-width, var(--max-width));
  width: max-content;
  font-size: var(--a-tooltip-font-size, var(--font-size));
  line-height: var(--a-tooltip-line-height, var(--line-height));
  font-weight: var(--a-tooltip-font-weight, var(--font-weight));
  letter-spacing: var(--a-tooltip-letter-spacing, var(--letter-spacing));
  box-shadow: var(--a-tooltip-box-shadow, var(--shadow));
  overflow: visible;
  position-try:
    flip-block,
    flip-inline,
    flip-block flip-inline;
  &:popover-open {
    display: block;
  }
  &.a-tooltip--top {
    position-area: top;
    margin-block-end: var(--a-tooltip-arrow-depth, var(--arrow-depth));
  }
  &.a-tooltip--bottom {
    position-area: bottom;
    margin-block-start: var(--a-tooltip-arrow-depth, var(--arrow-depth));
  }
  &.a-tooltip--left {
    position-area: left;
    margin-inline-end: var(--a-tooltip-arrow-depth, var(--arrow-depth));
  }
  &.a-tooltip--right {
    position-area: right;
    margin-inline-start: var(--a-tooltip-arrow-depth, var(--arrow-depth));
  }
  &.a-tooltip--top-start {
    position-area: block-start span-inline-end;
    margin-block-end: var(--a-tooltip-arrow-depth, var(--arrow-depth));
  }
  &.a-tooltip--top-end {
    position-area: block-start span-inline-start;
    margin-block-end: var(--a-tooltip-arrow-depth, var(--arrow-depth));
  }
  &.a-tooltip--bottom-start {
    position-area: block-end span-inline-end;
    margin-block-start: var(--a-tooltip-arrow-depth, var(--arrow-depth));
  }
  &.a-tooltip--bottom-end {
    position-area: block-end span-inline-start;
    margin-block-start: var(--a-tooltip-arrow-depth, var(--arrow-depth));
  }
  &.a-tooltip--xs {
    --font-size: var(--lens-semantic-font-label-xs-font-size);
    --line-height: var(--lens-semantic-font-label-xs-line-height);
    --font-weight: var(--lens-semantic-font-label-xs-font-weight);
    --letter-spacing: var(--lens-semantic-font-label-xs-letter-spacing);
    --pt: var(--lens-semantic-spacing-desktop-padding-0-5);
    --pb: var(--lens-semantic-spacing-desktop-padding-0-5);
    --pl: var(--lens-semantic-spacing-desktop-padding-1);
    --pr: var(--lens-semantic-spacing-desktop-padding-1);
    --radius: var(--lens-semantic-radius-sm);
    --line-clamp: 4;
    --arrow-span: var(--lens-core-spacing-1);
    --arrow-depth: var(--lens-core-spacing-0-5);
    --arrow-corner-offset: var(--lens-core-spacing-1-5);
  }
  &.a-tooltip--top .a-tooltip-arrow {
    bottom: calc(-1 * var(--a-tooltip-arrow-depth, var(--arrow-depth)));
    left: 50%;
    width: var(--a-tooltip-arrow-span, var(--arrow-span));
    height: var(--a-tooltip-arrow-depth, var(--arrow-depth));
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  &.a-tooltip--bottom .a-tooltip-arrow {
    top: calc(-1 * var(--a-tooltip-arrow-depth, var(--arrow-depth)));
    left: 50%;
    width: var(--a-tooltip-arrow-span, var(--arrow-span));
    height: var(--a-tooltip-arrow-depth, var(--arrow-depth));
    transform: translateX(-50%);
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
  }
  &.a-tooltip--left .a-tooltip-arrow {
    right: calc(-1 * var(--a-tooltip-arrow-depth, var(--arrow-depth)));
    top: 50%;
    width: var(--a-tooltip-arrow-depth, var(--arrow-depth));
    height: var(--a-tooltip-arrow-span, var(--arrow-span));
    transform: translateY(-50%);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
  }
  &.a-tooltip--right .a-tooltip-arrow {
    left: calc(-1 * var(--a-tooltip-arrow-depth, var(--arrow-depth)));
    top: 50%;
    width: var(--a-tooltip-arrow-depth, var(--arrow-depth));
    height: var(--a-tooltip-arrow-span, var(--arrow-span));
    transform: translateY(-50%);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
  }
  &.a-tooltip--top-start .a-tooltip-arrow {
    bottom: calc(-1 * var(--a-tooltip-arrow-depth, var(--arrow-depth)));
    left: var(--a-tooltip-arrow-corner-offset, var(--arrow-corner-offset));
    width: var(--a-tooltip-arrow-span, var(--arrow-span));
    height: var(--a-tooltip-arrow-depth, var(--arrow-depth));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  &.a-tooltip--top-end .a-tooltip-arrow {
    bottom: calc(-1 * var(--a-tooltip-arrow-depth, var(--arrow-depth)));
    right: var(--a-tooltip-arrow-corner-offset, var(--arrow-corner-offset));
    width: var(--a-tooltip-arrow-span, var(--arrow-span));
    height: var(--a-tooltip-arrow-depth, var(--arrow-depth));
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  &.a-tooltip--bottom-start .a-tooltip-arrow {
    top: calc(-1 * var(--a-tooltip-arrow-depth, var(--arrow-depth)));
    left: var(--a-tooltip-arrow-corner-offset, var(--arrow-corner-offset));
    width: var(--a-tooltip-arrow-span, var(--arrow-span));
    height: var(--a-tooltip-arrow-depth, var(--arrow-depth));
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
  }
  &.a-tooltip--bottom-end .a-tooltip-arrow {
    top: calc(-1 * var(--a-tooltip-arrow-depth, var(--arrow-depth)));
    right: var(--a-tooltip-arrow-corner-offset, var(--arrow-corner-offset));
    width: var(--a-tooltip-arrow-span, var(--arrow-span));
    height: var(--a-tooltip-arrow-depth, var(--arrow-depth));
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
  }
}

.a-tooltip-arrow {
  position: absolute;
  background: var(--a-tooltip-bg, var(--bg));
  pointer-events: none;
}

.a-tooltip-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: var(--a-tooltip-line-clamp, var(--line-clamp));
  -webkit-line-clamp: var(--a-tooltip-line-clamp, var(--line-clamp));
  overflow-wrap: break-word;
  word-wrap: break-word;
}