@media screen, print {
  .colorful-headings-side,
  .colorful-headings-full {
    .markdown-rendered h1::before,
    .HyperMD-header-1::before {
      background-color: var(--h1-color, var(--color-red));
    }
    .markdown-rendered h2::before,
    .HyperMD-header-2::before {
      background-color: var(--h2-color, var(--color-orange));
    }
    .markdown-rendered h3::before,
    .HyperMD-header-3::before {
      background-color: var(--h3-color, var(--color-yellow));
    }
    .markdown-rendered h4::before,
    .HyperMD-header-4::before {
      background-color: var(--h4-color, var(--color-green));
    }
    .markdown-rendered h5::before,
    .HyperMD-header-5::before {
      background-color: var(--h5-color, var(--color-blue));
    }
    .markdown-rendered h6::before,
    .HyperMD-header-6::before {
      background-color: var(--h6-color, var(--color-purple));
    }

    .markdown-rendered :is(h1, h2, h3, h4, h5, h6),
    .HyperMD-header-1,
    .HyperMD-header-2,
    .HyperMD-header-3,
    .HyperMD-header-4,
    .HyperMD-header-5,
    .HyperMD-header-6 {
      position: relative;
      padding-inline-start: var(--font-ui-smaller);

      &::before {
        pointer-events: none;
        display: inline-flex;
        border-radius: var(--radius-s);
        width: 4px;
        height: calc(100% - 6px);
        content: "";
        bottom: 4px;
        position: absolute;
        inset-inline-start: 0;
        transition: var(--anim-duration-moderate) var(--anim-motion-baseline);
      }
      &.cm-line::before {
        height: calc(100% - 6px - var(--p-spacing));
      }
      &.cm-line .cm-header:not(.cm-inline-code) {
        padding-inline-start: var(--font-ui-smaller);
        box-decoration-break: clone;
      }
      &.cm-line.cm-active {
        &::before {
          inset-inline-start: -16px;
        }

        .cm-header:not(.cm-inline-code) {
          padding-inline-start: 0;
        }
        .cm-fold-indicator {
          inset-inline-start: 4px;
        }
      }
    }
    .collapse-indicator.heading-collapse-indicator {
      margin-inline-start: -36px;
    }

    .cm-line:is(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) + .cm-line:has(br:only-child):not(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6) + .cm-line:is(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3, .HyperMD-header-4, .HyperMD-header-5, .HyperMD-header-6)::before {
      height: calc(100% - 6px);
    }
  }

  .colorful-headings-side {
    .markdown-rendered :is(h1, h2, h3, h4, h5, h6),
    .HyperMD-header-1,
    .HyperMD-header-2,
    .HyperMD-header-3,
    .HyperMD-header-4,
    .HyperMD-header-5,
    .HyperMD-header-6 {
      color: inherit;
    }
  }

  .colorful-headings-full,
  .colorful-headings-subtle {
    --inline-title-color: inherit;
    .markdown-rendered h1,
    .HyperMD-header-1 {
      color: color-mix(in srgb, var(--h1-color, var(--color-red)) 75%, var(--color-base-100));
    }
    .markdown-rendered h2,
    .HyperMD-header-2 {
      color: color-mix(in srgb, var(--h2-color, var(--color-orange)) 75%, var(--color-base-100));
    }
    .markdown-rendered h3,
    .HyperMD-header-3 {
      color: color-mix(in srgb, var(--h3-color, var(--color-yellow)) 75%, var(--color-base-100));
    }
    .markdown-rendered h4,
    .HyperMD-header-4 {
      color: color-mix(in srgb, var(--h4-color, var(--color-green)) 75%, var(--color-base-100));
    }
    .markdown-rendered h5,
    .HyperMD-header-5 {
      color: color-mix(in srgb, var(--h5-color, var(--color-blue)) 75%, var(--color-base-100));
    }
    .markdown-rendered h6,
    .HyperMD-header-6 {
      color: color-mix(in srgb, var(--h6-color, var(--color-purple)) 75%, var(--color-base-100));
    }
  }

  .colorful-headings-subtle,
  .colorful-headings-strong {
    .markdown-rendered :is(h1, h2, h3, h4, h5, h6),
    .HyperMD-header-1,
    .HyperMD-header-2,
    .HyperMD-header-3,
    .HyperMD-header-4,
    .HyperMD-header-5,
    .HyperMD-header-6 {
      padding-inline: 0.2em;
      border-radius: var(--radius-s);
      width: fit-content;

      &.cm-line {
        padding-inline: 0.2em;
      }
    }

    .HyperMD-header-1,
    .HyperMD-header-2,
    .HyperMD-header-3,
    .HyperMD-header-4,
    .HyperMD-header-5,
    .HyperMD-header-6 {
      &::after {
        content: "";
        position: absolute;
        inset: var(--p-spacing) 0 0;
        border-radius: var(--radius-s);
      }
    }

    .markdown-rendered h1,
    .HyperMD-header-1::after {
      background-color: color-mix(in srgb, var(--h1-color, var(--color-red)) 10%, transparent);
    }
    .markdown-rendered h2,
    .HyperMD-header-2::after {
      background-color: color-mix(in srgb, var(--h2-color, var(--color-orange)) 10%, transparent);
    }
    .markdown-rendered h3,
    .HyperMD-header-3::after {
      background-color: color-mix(in srgb, var(--h3-color, var(--color-yellow)) 10%, transparent);
    }
    .markdown-rendered h4,
    .HyperMD-header-4::after {
      background-color: color-mix(in srgb, var(--h4-color, var(--color-green)) 10%, transparent);
    }
    .markdown-rendered h5,
    .HyperMD-header-5::after {
      background-color: color-mix(in srgb, var(--h5-color, var(--color-blue)) 10%, transparent);
    }
    .markdown-rendered h6,
    .HyperMD-header-6::after {
      background-color: color-mix(in srgb, var(--h6-color, var(--color-purple)) 10%, transparent);
    }
  }

  .colorful-headings-strong {
    .markdown-rendered :is(h1, h2, h3, h4, h5, h6),
    .HyperMD-header-1,
    .HyperMD-header-2,
    .HyperMD-header-3,
    .HyperMD-header-4,
    .HyperMD-header-5,
    .HyperMD-header-6 {
      color: rgb(var(--mono-rgb-100));
    }

    .markdown-rendered h1,
    .HyperMD-header-1 .cm-header-1 {
      background-color: color-mix(in srgb, var(--h1-color, var(--color-red)) 75%, transparent);
    }
    .markdown-rendered h2,
    .HyperMD-header-2 .cm-header-2 {
      background-color: color-mix(in srgb, var(--h2-color, var(--color-orange)) 75%, transparent);
    }
    .markdown-rendered h3,
    .HyperMD-header-3 .cm-header-3 {
      background-color: color-mix(in srgb, var(--h3-color, var(--color-yellow)) 75%, transparent);
    }
    .markdown-rendered h4,
    .HyperMD-header-4 .cm-header-4 {
      background-color: color-mix(in srgb, var(--h4-color, var(--color-green)) 75%, transparent);
    }
    .markdown-rendered h5,
    .HyperMD-header-5 .cm-header-5 {
      background-color: color-mix(in srgb, var(--h5-color, var(--color-blue)) 75%, transparent);
    }
    .markdown-rendered h6,
    .HyperMD-header-6 .cm-header-6 {
      background-color: color-mix(in srgb, var(--h6-color, var(--color-purple)) 75%, transparent);
    }
  }
}
