/*@example
<div is="item-box">
    <ul is="item-list" has="draggable-items">
        <li is="list-item">Alpha</li>
        <li is="list-item">Bravo</li>
    </ul>
</div>
*/
@layer component {
    [is=item-box] {
        display: flex;
        flex-direction: column;
        gap: var(--space-s);
        min-width: 0;
        min-height: 0;
        max-height: 100%;
        padding: var(--space-s);
        border-radius: var(--border-radius);
        background: var(--content-box-color);
        overflow: hidden;

        &[has~=no-filter] {
            gap: var(--space-xs);
        }

        & > [is=item-box-toolbar] {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: var(--space-s);
            padding: var(--space-s);
            border-radius: var(--border-radius);
            background: var(--background-little-darker-color);

            & > [is=input] {
                flex: 1;
                min-width: 0;
            }
        }

        & > [is=item-list] {
            flex: 1 1 auto;
            overflow-y: auto;
            min-height: 0;
        }
    }

    [is=item-list] {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-xxs);

        &[has~=draggable-items] {
            & > [is=list-item],
            & > li {
                cursor: grab;
            }
        }

        &[now~=dragging] {
            & > [is=list-item][now~=dragging],
            & > li[now~=dragging] {
                opacity: 0.6;
                cursor: grabbing;
            }
        }

        &[has~=small-layout] {
            & > [is=list-item],
            & > li {
                padding: var(--space-xs);
            }
        }
    }

    [is=list-item] {
        display: block;
        padding: var(--space-s);
        border-radius: var(--border-radius);
        background: var(--background-littel-lighter-color);

        &[now~=invisible] {
            display: none;
        }
    }

    [is=item-list][has~=nested-items] {
        & [is=list-item] > [is=item-list] {
            margin-top: var(--space-xxs);
            display: flex;
            flex-direction: column;
            gap: var(--space-xxs);
        }

        & [is=list-item] [is=list-item] {
            background: var(--background-color);
        }

        & [is=list-item] [is=list-item] [is=list-item] {
            background: var(--background-little-darker-color);
        }
    }
}