@layer components {
    .toolbar {
        height: 3rem;
        display: grid;
        grid-template-columns: 1fr;
    }

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

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

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

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

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

    .toolbar-item,
    .toolbar-item-group {
        border-radius: 1.5rem;
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
    }
}