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

<style>
  :global(.sidebar-unit) {
    display: flex;
    flex-direction: column;
    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;
    top: 0;
    position: sticky;
    z-index: 1;
    padding-top: 0.5rem;
    background: var(--background-color);
  }

  :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.5rem 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.2rem;
    flex-shrink: 0;
  }

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