/**
 * @file Grid Item Base
 * @description Base grid item utilities.
 *
 * @usage
 * <!-- Emmet: ul.g.g-3>(li.clk.gc-2--lg+li.clk+li.clk) -->
 */

/**
 * @group Child Grid Item Placement (.g > *)
 * API to handle placement of grid items (areas, cols, rows).
 */
:where(.g, [data-display="grid"])> :where(*, .gi, [data-part="item"]),
:where(.sg, [class*="sg--"], [data-display*="subgrid"], .sgc, [class*="sgc--"], [data-display*="subcol"], .sgr, [class*="sgr--"], [data-display*="subrow"])> :where(*, .gi, [data-part="item"]) {

    /* Grid Area */
    --area: auto;
    --_ga: var(--ga, var(--area));
    grid-area: var(--_ga);


    /* Grid Column */
    --gi-col: auto;
    --_gc: var(--gc, var(--gi-col));
    grid-column: var(--_gc);

    /* Grid Row */
    --gi-row: auto;
    --_gr: var(--gr, var(--gi-row));
    grid-row: var(--_gr);


    /* Align Self */
    --as: auto;
    --gi-as: var(--as);
    --_as: var(--gi-as);
    align-self: var(--_as);

    /* Justify Self */
    --js: auto;
    --gi-js: var(--js);
    --_js: var(--gi-js);
    justify-self: var(--_js);


    /* Order */
    --gi-o: var(--o, 0);
    --_o: var(--gi-o);
    order: var(--_o);


    /* Min-Block-Size */
    --gi-mbs: 0;
    --_mbs: var(--gi-mbs);
    min-block-size: var(--_mbs);

    /* Min-Inline-Size */
    --gi-mis: 0;
    --_mis: var(--gi-mis);
    min-inline-size: var(--_mis);
}

@container (width < 30rem) {

    :where(.g, [data-display="grid"])> :where(*, .gi, [data-part="item"]),
	 :where(.sg, [class*="sg--"], [data-display*="subgrid"], .sgc, [class*="sgc--"], [data-display*="subcol"], .sgr, [class*="sgr--"], [data-display*="subrow"])> :where(*, .gi, [data-part="item"]) {

        /* Grid Area */
        --_ga: var(--ga--sm, var(--ga, var(--area--sm, var(--area))));
        /* Grid Column */
        --_gc: var(--gc--sm, var(--gc, var(--gi-col--sm, var(--gi-col))));
        /* Grid Row */
        --_gr: var(--gr--sm, var(--gr, var(--gi-row--sm, var(--gi-row))));

        /* Align Self */
        --_as: var(--gi-as--sm, var(--gi-as));
        /* Justify Self */
        --_js: var(--gi-js--sm, var(--gi-js));
        /* Order */
        --_o: var(--gi-o--sm, var(--gi-o));
    }
}

@container (30rem <= width <= 60rem) {

    :where(.g, [data-display="grid"])> :where(*, .gi, [data-part="item"]),
	 :where(.sg, [class*="sg--"], [data-display*="subgrid"], .sgc, [class*="sgc--"], [data-display*="subcol"], .sgr, [class*="sgr--"], [data-display*="subrow"])> :where(*, .gi, [data-part="item"]) {

        /* Grid Area */
        --_ga: var(--ga--md, var(--ga, var(--area--md, var(--area))));
        /* Grid Column */
        --_gc: var(--gc--md, var(--gc, var(--gi-col--md, var(--gi-col))));
        /* Grid Row */
        --_gr: var(--gr--md, var(--gr, var(--gi-row--md, var(--gi-row))));

        /* Align Self */
        --_as: var(--gi-as--md, var(--gi-as));
        /* Justify Self */
        --_js: var(--gi-js--md, var(--gi-js));
        /* Order */
        --_o: var(--gi-o--md, var(--gi-o));
    }
}

@container (width > 60rem) {

    :where(.g, [data-display="grid"])> :where(*, .gi, [data-part="item"]),
	 :where(.sg, [class*="sg--"], [data-display*="subgrid"], .sgc, [class*="sgc--"], [data-display*="subcol"], .sgr, [class*="sgr--"], [data-display*="subrow"])> :where(*, .gi, [data-part="item"]) {

        /* Grid Area */
        --_ga: var(--ga--lg, var(--ga, var(--area--lg, var(--area))));
        /* Grid Column */
        --_gc: var(--gc--lg, var(--gc, var(--gi-col--lg, var(--gi-col))));
        /* Grid Row */
        --_gr: var(--gr--lg, var(--gr, var(--gi-row--lg, var(--gi-row))));

        /* Align Self */
        --_as: var(--gi-as--lg, var(--gi-as));
        /* Justify Self */
        --_js: var(--gi-js--lg, var(--gi-js));
        /* Order */
        --_o: var(--gi-o--lg, var(--gi-o));
    }
}

@layer reset {

    :where(.g, [data-display="grid"])> :where(*, .gi, [data-part="item"]),
	 :where(.sg, [class*="sg--"], [data-display*="subgrid"], .sgc, [class*="sgc--"], [data-display*="subcol"], .sgr, [class*="sgr--"], [data-display*="subrow"])> :where(*, .gi, [data-part="item"]) {
        --area--sm: initial;
        --area--md: initial;
        --area--lg: initial;

        --gc: initial;
        --gc--sm: initial;
        --gc--md: initial;
        --gc--lg: initial;
        --gi-col--sm: initial;
        --gi-col--md: initial;
        --gi-col--lg: initial;

        --gr: initial;
        --gr--sm: initial;
        --gr--md: initial;
        --gr--lg: initial;
        --gi-row--sm: initial;
        --gi-row--md: initial;
        --gi-row--lg: initial;

        --gi-as--sm: initial;
        --gi-as--md: initial;
        --gi-as--lg: initial;

        --gi-js--sm: initial;
        --gi-js--md: initial;
        --gi-js--lg: initial;

        --gi-o--sm: initial;
        --gi-o--md: initial;
        --gi-o--lg: initial;

        --o: initial;
    }
}