// 1. Read value of `--rui-local-<PROPERTY>-<BREAKPOINT>` that might have been defined by
//    JavaScript and assign it to `--rui-local-<PROPERTY>` used in 2.
//
//    Fallback cascade containing fallbacks for all previous breakpoints recursively is included
//    using CSS custom property fallback mechanism like this:
//
//    Fallback for `xs` breakpoint: `<INITIAL FALLBACK>`
//    Fallback for `sm` breakpoint: `var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>)`
//    Fallback for `md` breakpoint: `var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INIT. FALLBACK>))`
//
//    … etc, up to the largest breakpoint.
//
//    A media query is then created for each breakpoint (with exception of `xs` which doesn't need a
//    media query) and a corresponding responsive custom property variant is assigned to
//    `--rui-local-<PROPERTY>` that is used later in CSS, see 2.
//
//    Example for `sm` breakpoint:
//
//    `--rui-local-<PROPERTY>: var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>))`
//
// 2. Apply custom property value that is defined within current breakpoint, see 1.
//
// 3. Intentionally use longhand properties because the custom property fallback mechanism evaluates `initial` values
//    as empty. That makes the other value of the shorthand property unexpectedly used for both axes.

@use "sass:map";
@use "../../styles/tools/spacing";
@use "settings";
@use "tools";

@layer components.grid {
    .root {
        @include tools.assign-responsive-custom-properties(settings.$grid-responsive-properties); // 1.
        @include spacing.bottom(layouts);

        display: grid;
        grid-template-columns: var(--rui-local-columns); // 2.
        grid-template-rows: var(--rui-local-rows); // 2.
        grid-auto-flow: var(--rui-local-auto-flow); // 2.
        grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
        // stylelint-disable declaration-block-no-redundant-longhand-properties -- 3.
        align-content: var(--rui-local-align-content); // 2.
        align-items: var(--rui-local-align-items); // 2.
        justify-content: var(--rui-local-justify-content); // 2.
        justify-items: var(--rui-local-justify-items); // 2.
        // stylelint-enable declaration-block-no-redundant-longhand-properties
    }

    // stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.
    .root > * {
        margin-block: 0;
    }

    .span {
        @include tools.assign-responsive-custom-properties(settings.$grid-span-responsive-properties); // 1.

        grid-column: span var(--rui-local-column-span); // 2.
        grid-row: span var(--rui-local-row-span); // 2.
    }

    // stylelint-disable selector-no-qualifying-type
    dl.root,
    ol.root,
    ul.root {
        padding-left: 0;
        margin-left: 0;
        list-style: none;
    }

    // stylelint-enable selector-no-qualifying-type
}