// RIVER Design-System: Preload - Styles / Scope //

// Create a Scope that styles HTML elements with our style helpers.
// Useful for working with plain HTML and WYSIWYG CMS content.
// Apply this to any HTML using the '.scope-styles' class.

@if(design-setting('helpers') and design-setting('helpers.styles-scope', false)) {
    /* RIVER Design-System: Helpers - Styles / Scope */

    .scope-styles {
        // Note, we create empty placeholder classes in case any style helpers are disabled (no CSS is generated).

        // Titles
        .style-title--1 {}
        .style-title--2 {}
        .style-title--3 {}
        .style-title--4 {}
        .style-title--5 {}
        .style-title--6 {}

        :where(h1) {
            @extend .style-title--1;
        }
        :where(h2) {
            @extend .style-title--2;
        }
        :where(h3) {
            @extend .style-title--3;
        }
        :where(h4) {
            @extend .style-title--4;
        }
        :where(h5) {
            @extend .style-title--5;
        }
        :where(h6) {
            @extend .style-title--6;
        }

        // Paragraph <p>
        .style-paragraph {}
        :where(p) {
            @extend .style-paragraph;
        }

        // Link <a>
        .style-link {}
        :where(a) {
            @extend .style-link;
        }

        // Button <button>
        .style-button {}
        :where(button) {
            @extend .style-button;
        }

        // Input <input>
        .style-input {}
        :where(input) {
            @extend .style-input;
        }

        // Small <small>
        .style-small {}
        :where(small) {
            @extend .style-small;
        }

        // Big <big>
        .style-big {}
        :where(big) {
            @extend .style-big;
        }

        // Strong <strong> <b>
        .style-strong {}
        :where(strong, b) {
            @extend .style-strong;
        }

        // Emphasis <em>
        .style-emphasis {}
        :where(em) {
            @extend .style-emphasis;
        }

        // Divider <hr>
        .style-divide {}
        :where(hr) {
            @extend .style-divide;
        }

        // Blockquote <blockquote>
        .style-blockquote {}
        :where(blockquote) {
            @extend .style-blockquote;
        }

        // Inline Quote <q>
        .style-inlinequote {}
        :where(q) {
            @extend .style-inlinequote;
        }

        // Code <code>
        .style-code {}
        :where(code) {
            @extend .style-code;
        }

        // Codeblock <pre>
        .style-codeblock {}
        :where(pre) {
            @extend .style-codeblock;
        }

        // List <ul><ol><li>
        .style-list {}
        .style-ul {}
        .style-ol {}
        .style-li {}
        :where(ul) {
            @extend .style-list;
            @extend .style-ul;
        }
        :where(ol) {
            @extend .style-list;
            @extend .style-ol;
        }
        :where(li) {
            @extend .style-li;
        }

        // Table <table><th><td>
        .style-table {}
        :where(table) {
            @extend .style-table;
        }

        // Image, Icon <img>
        .style-image {}
        :where(img) {
            @extend .style-image;
        }

        // Sensible Margins
        *:where(
            h1, h2, h3, h4, h5, h6
        ) {
            margin-bottom: design-variable('type.spacing.small', 0.5em);
        }

        // *:where(
        p,
        button, input, blockquote,
        pre,
        ul, ol,
        table
        {
        // ) {
            margin-bottom: design-variable('type.spacing.normal', 1em);
        }

        *:last-child {
            margin-bottom: 0 !important;
        }
    }
}