@import url("../tools/selectors.css");
@import url("../tools/x-headings.css");
@import url("../tools/x-headings--docs.css");

/* To scope these styles to main content (i.e. not header, not navbar) */
:where(:--main-content) {

& :is( h1, h2, h3, h4, h5, h6 ) {
    @mixin heading;
}
& h1 { @mixin heading-1; }
& h2 { @mixin heading-2; }
& h3 { @mixin heading-3; }
& h4 { @mixin heading-4; }
& h5 { @mixin heading-5; }
& h6 { @mixin heading-6; }

}

/* Must load after regular elements so classes take precedence */
:is( .h1, .h2, .h3, .h4, .h5, .h6 ) {
    @mixin heading;
}
.h1 { @mixin heading-1; }
.h2 { @mixin heading-2; }
.h3 { @mixin heading-3; }
.h4 { @mixin heading-4; }
.h5 { @mixin heading-5; }
.h6 { @mixin heading-6; }