/*
    @example
    <div is="header-row">
        <div is="header-row-title">Title</div>
        <div is="header-row-actions">
            <button is="button">Primary</button>
            <button is="button">Secondary</button>
        </div>
    </div>
*/
@layer component {
    [is=header-row] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-m);
        margin-bottom: var(--space-m);

        & [is=header-row-title] {
            font-size: var(--font-size-ml);
        }

        & :is(h1, h2, h3, h4, h5, h6) {
            margin: 0;
        }

        & [is=header-row-actions] {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: var(--space-s);
        }
    }
}