.kubeflow-markdown-view {
  word-break: break-word;

  &--with-padding {
    padding-bottom: var(--pf-v6-global--spacer--md);

    p {
      margin-bottom: var(--pf-v6-global--spacer--sm);
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--pf-v6-global--FontFamily--heading--sans-serif);
    font-weight: var(--pf-v6-global--FontWeight--normal);
    margin-top: var(--pf-v6-global--spacer--md);
    margin-bottom: var(--pf-v6-global--spacer--sm);
  }

  h1 {
    font-size: var(--pf-v6-global--FontSize--2xl);
  }

  h2 {
    font-size: var(--pf-v6-global--FontSize--xl);
  }

  h3 {
    font-size: var(--pf-v6-global--FontSize--lg);
  }

  h4,
  h5,
  h6 {
    font-size: var(--pf-v6-global--FontSize--md);
    margin-top: var(--pf-v6-global--spacer--sm);
  }

  ul,
  ol {
    margin-top: 0;
    margin-bottom: var(--pf-v6-global--spacer--sm);
  }

  ul {
    list-style: initial;
  }

  li {
    margin-left: var(--pf-v6-global--spacer--lg);
  }

  code,
  pre {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    background-color: var(--pf-v6-global--BackgroundColor--200);
    border-radius: var(--pf-v6-global--BorderRadius--sm);
  }

  code {
    padding: 2px 4px;
    font-size: 85%;
    color: var(--pf-v6-global--danger-color--100);
  }

  pre {
    display: block;
    padding: var(--pf-v6-global--spacer--sm);
    margin-bottom: var(--pf-v6-global--spacer--sm);
    font-size: var(--pf-v6-global--FontSize--sm);
    color: var(--pf-v6-global--Color--300);
    word-break: break-all;
    word-wrap: break-word;
    background-color: var(--pf-v6-global--BackgroundColor--200);
    border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--Color--light-300);
    border-radius: var(--pf-v6-global--BorderRadius--sm);
    code {
      padding: 0;
      font-size: inherit;
      color: inherit;
      white-space: pre-wrap;
    }
  }
}