@layer components {
    :root {
        --toolbar-block-size: 3rem;
        --toolbar-title-min-size: 7rem;
    }

    /* Density (base.css): a compact toolbar row in an app on a fine pointer. */
    @media (pointer: fine) and (not ((min-width: 120rem) and (display-mode: fullscreen))) {
        .app {
            --toolbar-block-size: 2.25rem;
        }
    }

    .toolbar {
        --button-icon-size: calc(var(--font-size-body) * 1.3);

        block-size: var(--toolbar-block-size);
        display: grid;
        grid-template-columns: 1fr;
    }

    .toolbar-section {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
    }

    .toolbar-section > ul {
        flex-grow: 1;
        list-style: none;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
    }

    .toolbar-section--leading {
        justify-self: start;
    }

    .toolbar-section--center {
        justify-self: center;
    }

    .toolbar-section--trailing {
        justify-self: end;
    }

    /* The title shares the sections' row and is centred in it, as an
       inline navigation title; it is never pushed onto a row of its own. */
    .toolbar__title {
        font-size: var(--font-size-headline);
        font-weight: 600;
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        align-self: center;
        min-inline-size: 0;
    }

    @media (min-width: 48rem) {
        .toolbar--role-editor {
            column-gap: 0.75rem;
            grid-template-columns: auto minmax(0, 1fr) auto;

            & > .toolbar-section--leading {
                grid-column: 1;
            }

            & > .toolbar__title,
            & > .toolbar-section--center {
                grid-column: 2;
                grid-row: 1;
            }

            & > .toolbar-section--trailing {
                grid-column: 3;
            }
        }

        .toolbar--role-editor > .toolbar__title {
            justify-self: start;
        }
    }

    .toolbar-item,
    .toolbar-item-group {
        border-radius: calc(var(--toolbar-block-size) / 2);
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
    }

    .toolbar-item[hidden],
    .toolbar__folded[hidden] {
        display: none;
    }

    @media (max-width: 47.999rem) {
        .toolbar:not([data-measured]) .toolbar__action--secondary {
            display: none;
        }
    }

    @media (min-width: 48rem) {
        .toolbar:not([data-measured]) .toolbar__folded,
        .toolbar:not([data-measured]) .toolbar__more--when-folded {
            display: none;
        }
    }
}