// RIVER Design-System - Defaults: Base //

// Define base HTML properties to be applied as part of 'preload/base'.

// Design Map for Base Styles
@if(design-setting('defaults')
    // Output base defaults if styles are enabled, or 'base' has been whitelisted
    and (
        design-setting('defaults.styles', false) == true
        or list-contains(design-setting('defaults.styles'), 'base')
    )
) {
    $design-map-base: (
        '_variables':       false,

        // Base HTML Properties
        'html, body': (
            'min-height':           100vh,
        ),
        'html': (
            'font-size':            design-setting('type.root-size', 62.5%), // 1rem = 10px
        ),
        'body': (
            'font-family':          ('@', 'type.font.normal', sans-serif),
            'font-size':            ('@', 'type.size.normal', 1.6rem),
            'font-weight':          ('@', 'type.weight.normal', 400),
            'color':                ('@', 'colors.gray.normal', slategray),
            'background-color':     ('@', 'colors.base', white),
            'line-height':          ('@', 'type.line-height.normal', 1.5em),
            'letter-spacing':       ('@', 'type.letter-spacing.normal', 0),
            'overflow':             auto,
        ),
    ) !default;

    // Apply the map
    $design-map: design-map-set('base', $design-map-base);
}

// To update the map, you can use any of:
// design-map-set('base', (...)); design-map-update('base', (...)); design-map-deep-update('base', (...))


// Default Base Output, as per base.scss

// // Base Properties
// html, body {
//     min-height: 100vh;
// }
// html {
//     font-size: 62.5%; // 62.5%
// }
// body {
//     font-family: design-variable('type.font-family.Body', 'type.font-family.primary');
//     font-size: design-variable('type.font-size.Body', 'type.font-size.normal');
//     font-weight: design-variable('type.font-weight.Body', 'type.font-weight.normal');
//     color: design-variable('typography.Body.color', 'colors.grayscale.normal');
//     background-color: design-variable('colors.base.normal');
//     line-height: design-variable('type.line-height.Body', 'type.line-height.normal');
//     letter-spacing: design-variable('type.letter-spacing.Body', 'type.letter-spacing.normal');
//     overflow: auto;
// }