////
/// @group 02-globals
////

@use "sass:math";
@use "units";
@use "config";
@use "breakpoint";

/// Fügt alle globalen Basis-Stile ein. **Alle Adventure-Komponenten gehen davon aus, dass diese Stile vorhanden sind.**
/// @param {Boolean} $html [true]
/// @param {Boolean} $img [true]
/// @param {Boolean} $provide-breakpoints [true] - Breakpoints an JS übergeben
/// @param {String} $provide-breakpoints-pseudo-element ["after"] - Pseudo-Element, das zur Übergabe der Breakpoints an JS verwendet wird
@mixin global-styles($html: true, $img: true, $provide-breakpoints: true, $provide-breakpoints-pseudo-element: "after") {
    * {
        margin: 0;
        padding: 0;
        outline: none;
        box: {
            sizing: inherit;
        }
        &::before,
        &::after {
            box: {
                sizing: inherit;
            }
        }
    }

    @if ($html) {
        @include global-html-styles($provide-breakpoints, $provide-breakpoints-pseudo-element);
    }

    @if ($img) {
        @include global-img-styles();
    }
}

/// Fügt HTML-Basis-Stile ein.
/// @param {Boolean} $provide-breakpoints [true] - Breakpoints an JS übergeben
/// @param {String} $provide-breakpoints-pseudo-element ["after"] - Pseudo-Element, das zur Übergabe der Breakpoints an JS verwendet wird
@mixin global-html-styles($provide-breakpoints: true, $provide-breakpoints-pseudo-element: "after") {
    html {
        font: {
            size: math.div(units.strip-unit(config.get("base-font-size")), 16) * 100%;
        }
        box: {
            sizing: border-box;
        }
        @if $provide-breakpoints {
            @include breakpoint.provide-breakpoints-for-js($pseudo-element: $provide-breakpoints-pseudo-element);
        }
    }
}

/// Fügt Basis-Stile für Bilder ein.
@mixin global-img-styles() {
    img {
        display: inline-block;
        max: {
            width: 100%;
        }
    }
}