////
/// @group modules.boilerplate
/// Generated boilerplate classes for a site based on global configuration settings.
////

@use '../utils' as *;
@use '../site' as *;
@use 'sanitize' as *;

@mixin boilerplate() {
    @if (get('fonts')) {
        // local fonts
        @each $font-name, $variants in get('fonts') {
            // convert maps to lists
            // prettier-ignore
            $variants-list: if(is-list($variants), $variants, ($variants,));
            @each $options in $variants-list {
                @if (map-has-key($options, src)) {
                    $src: map-get($options, src);
                    $weight: map-get-default($options, 'weight', null);
                    $style: map-get-default($options, style, null);
                    $exts: map-get-default($options, exts, woff ttf);
                    @include font-face($font-name, $src, $weight, $style, $exts);
                }
            }
        }

        // google fonts
        @each $font-name, $variants in get('fonts') {
            $variants-list: if(is-list($variants), $variants, ($variants));
            @each $options in $variants-list {
                @if (map-has-key($options, googleFont) and map-get($options, googleFont)) {
                    $weight: map-get-default($options, 'weight', '400');
                    $style: map-get-default($options, style, 'normal');
                    @include google-font($name: $font-name, $weights: $weight, $styles: $style);
                }
            }
        }
    }

    // run sanitize (general page reset)
    @if (get('reset:sanitize')) {
        @include sanitize();
    }

    html {
        // set the root font size (must be in px, sets the basis for rems)
        font-size: get(font-size-base);

        // set the font size at the specified breakpoints
        @each $break, $font-size in get(font-size-breaks) {
            @include media-until($break) {
                font-size: $font-size;
            }
        }
    }

    // set the body font size to be 1rem
    body {
        font-size: 1rem;
    }

    // font-family, color, line-height, etc.
    html,
    body {
        font-family: get(font-family);
        font-weight: get(font-weight);
        line-height: get(line-height);
        letter-spacing: get(letter-spacing);

        @if (get(font-smoothing)) {
            @include font-smoothing-on();
        }

        background-color: clr(page-bg);
        color: clr(page-fg);
    }

    // customize the text selection color
    ::selection {
        background: get('colors:selection-bg');
        color: get('colors:selection-fg');
    }

    // reset links
    @if (get('reset:link')) {
        a {
            color: inherit;
        }
        a,
        a:hover {
            text-decoration: inherit;
        }
    }

    // link styles
    @if (get('links:-selector')) {
        #{get('links:-selector')} {
            @include css-map(get('links'));
        }
    }

    // headings reset
    @if (get('reset:headings')) {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: inherit;
            margin: 0;
            padding: 0;
            line-height: get('line-height');
        }
    }

    // paragraph reset
    @if (get('reset:paragraph')) {
        p {
            font-size: inherit;
            padding: 0;
            margin: 0;
        }
    }

    // button reset
    @if (get('reset:button')) {
        button {
            appearance: none;
            display: block;
            outline: none;
            border: none;
            border-radius: 0;
            background: none transparent;
            background-color: transparent;
            padding: 0;
            width: auto;
            height: auto;
            border-spacing: 0;
            text-align: left;
            text-indent: 0;
            line-height: 1;
            color: inherit;
            font-family: inherit;
            font-size: inherit;
        }
    }

    // list reset
    @if (get('reset:lists')) {
        ul,
        ol {
            padding: 0;
            margin: 0;
            list-style: none;
            li {
                padding: 0;
                margin: 0;
            }
        }
    }

    // code, pre
    pre,
    code {
        font-family: get(code-font-family);
        font-size: get(code-font-size);
    }

    // defaults for hr
    hr {
        height: 0;
        margin: 2rem 0;
        padding: 0;
        border: none;
        border-top: 1px solid clr(page-fg);
    }

    // prevent sup from affecting line-height
    sup {
        line-height: 0.5;
    }

    // inline SVG inherits the current color (helpful for inline icons)
    .svg-icon,
    .svg-icon svg {
        path,
        circle,
        rect,
        polygon,
        ellipse {
            fill: currentColor;
        }
    }

    // create a basic content container (centered div with a max size and padding)
    @if (get('container:selector')) {
        #{get('container:selector')} {
            width: 100%;
            max-width: get('container:width');
            padding: 0 get('container:gutter');
            margin: 0 auto;
            position: relative;
        }
    }

    // create class for visually hiding content that should still be available for accessibility
    .visually-hidden {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }

    // create type styles
    @each $selector, $props in get('type-styles') {
        $base-name: map-get-default($props, '-base', ());

        #{$selector} {
            @include type-style($base-name, $props);
        }
    }
}