@use "../../variables/index" as *;

/**
 * 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
 */

// Shared mixin for heading group selectors
@mixin heading-elements {
  h1,
  h2,
  h3,
  h4,
  h5 {
    @content;
  }
}

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

  @include heading-elements {
    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;
    }
  }
}