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

// Define our default title styles here.
// We use these to apply default HTML elements styling via the '.scope-styles' scope defined in 'helpers/styles-scope'.
// Each style is applied a .style-title variation (eg, .style-title--1, .style-title--2, etc)

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

    // Create titles and headings from our typography map
    @if(type-of(design-map('typography')) == 'map') {
        // Loop through each selector
        // eg, .style-title, .style-title--1, etc...
        @each $selector, $values in design-map('typography') {
            #{$selector} { // Open Selector
                // Loop through each property
                // eg, font-family, font-size, font-weight, etc...
                @each $property, $value in $values {
                    // Apply each property/value pair
                    #{$property}: #{design-variable-resolve($value)};
                }
            } // Close Selector
        }
    }

    // Use this code to manually define titles 1-6 for explicitness and discoverability
    // @for $t from 1 through 6 {
    //     .style-title--#{$t} {
    //         font-size: design-variable('type.size.title-#{$t}', 5.87rem);
    //         font-family: design-variable('type.font.title', inherit);
    //         font-weight: design-variable('type.weight.title', 'type.weight.bold', bold);
    //         line-height: design-variable('type.line-height.title', 1.8em);
    //         letter-spacing: design-variable('type.letter-spacing.title', 0);
    //         color: design-variable('colors.gray.title', inherit);
    //         margin-bottom: design-variable('type.spacing.title', 1.0em);
    //     }
    // }

}