/*
 * SPDX-FileCopyrightText: 2026 Andyou <andyou@animagram.jp>
 * SPDX-License-Identifier: Apache-2.0
 */

/*  Usage:

    <* data-group="inline|block">
      <span></span>
      <label><input|select|button...></label></>

    <label>
        <span></span>
        <input></input>
        <select></select>
        <button></button></label>
*/

@layer css.data_group {

    :where(
        label:has(> *),
        [data-group="inline"],
        search,
        form[role="search"]
    ) {
        align-items: start;
        display:     inline flex;

        & > :not(span) {
            flex-shrink: 0;
        }

        & > span,
        & > legend > span {
            align-self: center;
        }
    }

    :where(label:has(> *):not([data-group])) {
        gap: var(--md-border-radius);
    }

    label:not([data-surround="fill"]):has(> :where(
        :disabled,
        [aria-disabled="true"]
    )) {
        color: var(--color-ink-mix);
    }

    :where(
        button,
        input:not([type=hidden]),
        meter,
        output,
        progress,
        select,
        textarea
    ) {
        display: inline flow-root;
    }

    :where(
        [data-group="inline"],
        search,
        form[role="search"]
    ) {
        & > span:first-child,
        & > legend > span {
            padding-inline-end: var(--md-border-radius);
        }
    }

    :where(
        [data-group="inline"],
        search,
        form[role="search"],
        label
    ),
    :where(
        [data-group="inline"],
        search,
        form[role="search"],
        label
    ) * {
        vertical-align: middle;
    }

    /* --- corner control --- */

    [data-group="inline"] > label:not(:last-child) > :where(
        input:is(
            [type="text"],
            [type="email"],
            [type="password"],
            [type="search"],
            [type="url"],
            [type="tel"],
            [type="number"],
            [type="date"],
            [type="time"],
            [type="datetime-local"],
            [type="month"],
            [type="week"]
        ),
        select
    ),
    [data-group="inline"] > :where(
        :is(
            button,
            input:is(
                [type="text"],
                [type="email"],
                [type="password"],
                [type="search"],
                [type="url"],
                [type="tel"],
                [type="number"],
                [type="date"],
                [type="time"],
                [type="datetime-local"],
                [type="month"],
                [type="week"]
            ),
            select,
            textarea
        ):not([data-surround]),
        [data-surround="fill"],
        [data-surround="outline"],
        label:has(> input[type="radio"])
    ):not(:last-child),
    :where(
        search,
        form[role="search"]
    ) > label:not(:last-child) > :where(
        input,
        select
    ),
    :where(
        search,
        form[role="search"]
    ) > button:not(:last-child) {
        border-end-end-radius:   0;
        border-start-end-radius: 0;
    }

    [data-group="inline"] > :where(
        label,
        button,
        input,
        select
    ) ~ label > :where(
        input:is(
            [type="text"],
            [type="email"],
            [type="password"],
            [type="search"],
            [type="url"],
            [type="tel"],
            [type="number"],
            [type="date"],
            [type="time"],
            [type="datetime-local"],
            [type="month"],
            [type="week"]
        ),
        select
    ),
    [data-group="inline"] > :where(
        label,
        button,
        input,
        select
    ) ~ :where(
        :is(
            button,
            input:is(
                [type="text"],
                [type="email"],
                [type="password"],
                [type="search"],
                [type="url"],
                [type="tel"],
                [type="number"],
                [type="date"],
                [type="time"],
                [type="datetime-local"],
                [type="month"],
                [type="week"]
            ),
            select,
            textarea
        ):not([data-surround]),
        [data-surround="fill"],
        [data-surround="outline"],
        label:has(> input[type="radio"])
    ),
    :where(
        search,
        form[role="search"]
    ) > label ~ label > :where(
        input,
        select
    ),
    :where(
        search,
        form[role="search"]
    ) > label ~ button {
        border-end-start-radius:   0;
        border-start-start-radius: 0;
    }

    /* --- color --- */

    :where(
        [data-group="inline"],
        search,
        form[role="search"]
    ) {
        & > button:not(:where(:active, [aria-pressed="true"])),
        & > label:where(:not([data-surround]), [data-surround="outline"]):has(> input[type="radio"]:not(:checked, :user-invalid, [aria-invalid="true"])) {
            border-color: var(--color-ink-mix);
        }

        @media (forced-colors: active) {
            & > button:not(:where(:active, [aria-pressed="true"])) {
                border-color: ButtonBorder;
            }
        }
    }
}