MapComplete/src/UI/Base/SidebarUnit.svelte

<div class="sidebar-unit">
  <slot/>
</div>

<style>
    :global(.sidebar-unit) {
        display: flex;
        flex-direction: column;
        row-gap: 0.25rem;
        background: var(--background-color);
        padding: 0.5rem;
        border-radius: 0.5rem;
    }

    :global(.sidebar-unit > h3) {
        margin-top: 0;
        margin-bottom: 0.5rem;
        padding: 0.25rem;
    }

    :global(.sidebar-button svg, .sidebar-button img, .sidebar-unit > button img, .sidebar-unit > button svg) {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

    :global(.sidebar-button .weblate-link > svg) {
        width: 0.75rem;
        height: 0.75rem;
        flex-shrink: 0;
    }


    :global(.sidebar-button, .sidebar-unit > a, .sidebar-unit > button) {
        display: flex;
        align-items: center;
        border-radius: 0.25rem !important;
        padding: 0.4rem 0.75rem !important;
        text-decoration: none !important;
        width: 100%;
        text-align: start;
    }

    :global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit > a img, .sidebar-unit > a svg, .sidebar-unit > button svg, .sidebar-unit > button img) {
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

    :global(.sidebar-button:hover, .sidebar-unit > a:hover, .sidebar-unit > button:hover) {
        background: var(--low-interaction-background) !important;
    }


</style>