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

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

        block-size: var(--toolbar-block-size);
        display: grid;

        /* The row never grows past the toolbar, so a title's insets can't
           push the trailing section off the edge. */
        grid-template-columns: minmax(0, 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;
        max-inline-size: 100%;

        /* toolbar.js measures the wider side's buttons, so a centred title
           never runs under them, and hides a title that has no room left.
           Without the script it clears one button on each side. */
        margin-inline: calc(
            var(--toolbar-title-inset, var(--toolbar-block-size)) + 0.5rem
        );
    }

    .toolbar[data-title-crowded] > .toolbar__title {
        visibility: hidden;
    }

    @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;
            margin-inline: 0rem;
        }
    }

    .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;
        }
    }

    /* One row of tools that never wraps: it scrolls sideways when it is too
       narrow for them. */
    .toolbar.toolbar--overflow-scroll {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        & .toolbar__section,
        & .toolbar__section > ul {
            flex-wrap: nowrap;
            gap: 0.25rem;
        }
    }

    .toolbar__item-group.toolbar__item-group--spacing-none {
        gap: 0rem;
    }
}