@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) */
/* To prevent these styles on portal content (i.e. within a React app) */
/* TODO: Delete `:not(…)` after tup-ui does not load `core-styles.cms.css` */
:where(:--main-content, :not(:--portal-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; }