// Shared body styles for OMC highlight popovers. Variant-specific overrides
// (font sizes, etc.) live in _OMCHighlightPopover.scss.
.nova-enabled {
  .highlight-popover-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);

    .title {
      font-weight: var(--font-weight-heading);
      margin: 0;
    }

    .subtitle {
      font-size: var(--font-size-root);
      margin: 0;
    }

    .button-wrapper {
      align-self: flex-start;
    }
  }

  .highlight-popover-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-small);
  }

  // The survey illustration is a compact tile grid, not a full-width banner
  // like the other widgets-callout images, so stretching it to 100% makes the
  // popover too tall. Constrain to the Figma image-slot width (169px) and
  // center it; the source PNG scales to fit.
  .widgets-survey-callout .highlight-popover-image {
    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
    width: 169px;
    align-self: center;
  }
}