@c8y/style/styles/components/_markdown-content.less

Styles for Cumulocity IoT applications

/**
 * Markdown Content - Styling for markdown rendered content
 *
 * Note: Uses rem units for vertical spacing to maintain consistent rhythm based on root font size.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions (800px): Max content width for readability
 * - Rem values (1rem, 2rem): Vertical rhythm using rem units (not px tokens)
 * - Border widths (1px): Standard borders
 * - Percentages (100%): Layout
 * - Opacity values (0.65): Visual effects for dark theme
 * - Font-weight values (500, 600): Typography weights
 */

// NOTE: SCSS mixin with @content removed - manually expanded below
// @mixin heading-elements was used in SCSS but LESS doesn't support @content

.markdown-content {
  h1,
  h2,
  h3,
  h4,
  h5,
  p,
  ul,
  ol {
    margin-bottom: 1rem;
    max-width: 800px;
  }

  // Manually expanded from @include heading-elements mixin
  h1,
  h2,
  h3,
  h4,
  h5 {
    margin-bottom: 2rem;
    font-weight: 500;
  }

  h2 {
    margin: 2rem 0;
    padding: 2rem 0;
    border-top: 1px solid @gray-50;
    border-bottom: 1px dotted @gray-50;
  }

  &--to-h3 {
    h1,
    h2 {
      margin: 0 0 1rem;
      padding: 2rem 0;
      border-top: 1px dotted @gray-50;
      font-weight: 600;
      font-size: var(--c8y-font-size-h3);

      &:first-child {
        border-top: 0;
      }

      &:not(:first-child) {
        margin-top: 2rem;
      }
    }
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .c8y-dark-theme & {
    img {
      opacity: 0.65;
    }
  }
}