/* ========================================================================== */
/* Headings
/* ========================================================================== */
:is(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
    font-weight: var(--heading-font-weight);
}

:is(h1, h2, h3, h4, h5, h6).md-heading::before {
    all: unset;
    position: absolute;
    top: 50%;
    right: calc(100% + 0.5em);
    transform: translate(0, -50%);
    font-size: 0.75rem;
    letter-spacing: normal;
    color: var(--md-brackets);
    opacity: 0;
    transition: all 0.2s 0s;
}

:is(h1, h2, h3, h4, h5, h6).md-focus::before {
    transform: translate(-0.5em, -50%);
    opacity: 1;
}

h1 {
    margin-top: 3rem;
    font-size: var(--h1-font-size);
    line-height: 1.1;
    letter-spacing: var(--h1-letter-spacing);
}

h1.md-heading::before {
    content: 'H1';
}

h2 {
    margin-top: 2rem;
    font-size: var(--h2-font-size);
    line-height: 1.2;
    letter-spacing: var(--h2-letter-spacing);
}

h2.md-heading::before {
    content: 'H2';
}

h3 {
    font-size: var(--h3-font-size);
    line-height: 1.3;
    letter-spacing: var(--h3-letter-spacing);
}

h3.md-heading::before {
    content: 'H3';
}

h4 {
    font-size: var(--h4-font-size);
}

h4.md-heading::before {
    content: 'H4';
}

h5 {
    font-size: var(--h5-font-size);
}

h5.md-heading::before {
    content: 'H5';
}

h6 {
    font-size: var(--h6-font-size);
}

h6.md-heading::before {
    content: 'H6';
}

h6 ~ :not(h1, h2, h3, h4, h5, h6) {
    font-size: var(--h6-font-size);
}

h6 ~ :is(h1, h2, h3, h4, h5, h6) ~ *:not(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
}